### Start Metro Server (npm)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Starts the Metro bundler using npm. This is required before starting the application.

```bash
npm start
```

--------------------------------

### Start Metro Server (Yarn)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Starts the Metro bundler using Yarn. This is required before starting the application.

```bash
yarn start
```

--------------------------------

### Install and Run iOS/Android

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

Troubleshoots installation issues by ensuring native dependencies are installed and the app is run correctly.

```bash
cd ios && pod install && cd ..
npx react-native run-ios   # or run-android
```

--------------------------------

### Installation Errors Solution

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Troubleshoot installation errors by ensuring pods are installed and running the correct native build commands.

```bash
# iOS
cd ios && pod install && cd ..

# All platforms
npx react-native run-ios
npx react-native run-android
```

--------------------------------

### Install and Rebuild React Native Date Picker

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

Install the package using npm and then run pod install for iOS. Rebuild the application for both iOS and Android.

```bash
# Install
npm install react-native-date-picker
cd ios && pod install && cd ..

# Rebuild
npx react-native run-ios
npx react-native run-android
```

--------------------------------

### Install React Native Date Picker

Source: https://github.com/henninghall/react-native-date-picker/blob/master/README.md

Install the library using npm, yarn, or pnpm.

```sh
# npm
npm install react-native-date-picker

# yarn
yarn add react-native-date-picker

# pnpm
pnpm add react-native-date-picker
```

--------------------------------

### Install react-native-date-picker

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Install the package using npm and run native builds for iOS and Android.

```bash
npm install react-native-date-picker
cd ios && pod install && cd ..
npx react-native run-ios
npx react-native run-android
```

--------------------------------

### Install Specific Version

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Install a specific version of react-native-date-picker, for example, v4.11.0.

```bash
npm install react-native-date-picker@4.11.0
```

--------------------------------

### getInstallationErrorMessage()

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Provides platform-specific installation error messages to guide users through troubleshooting native module linking issues.

```APIDOC
## getInstallationErrorMessage()

### Description
Returns platform-specific installation instructions to help users resolve issues with the native module installation.

### Returns
String with installation steps for the current platform:

**iOS (Non-Expo):**
```
react-native-date-picker is not installed correctly. Make sure you:
1. Installed pods (by for instance running 'cd ios && pod install')
2. Rebuilt the app (by for instance 'npx react-native run-ios')
...
```

**iOS (Expo):**
```
react-native-date-picker is not installed correctly. Make sure you:
1. Have rebuilt your app (with for instance 'npx expo run:ios')
2. Are not using Expo Go (Expo Go is unsupported)...
```

**Android (Non-Expo):**
```
react-native-date-picker is not installed correctly. Make sure you:
1. Rebuilt the app (by for instance 'npx react-native run-android')
...
```

**Android (Expo):**
```
react-native-date-picker is not installed correctly. Make sure you:
1. Have rebuilt your app (with for instance 'npx expo run:android')
2. Are not using Expo Go (Expo Go is unsupported)...
```
```

--------------------------------

### Troubleshoot Installation: Clear Cache and Reinstall

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Steps to resolve installation errors by clearing the npm cache, removing node modules and lock files, and then reinstalling and rebuilding the project.

```bash
# Clear cache
npm cache clean --force
rm -rf node_modules package-lock.json

# Reinstall
npm install

# Rebuild
npx react-native run-android  # or run-ios
```

--------------------------------

### Start iOS Application (npm)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Launches the React Native application on an iOS simulator using npm.

```bash
npm run ios
```

--------------------------------

### Start Metro Server

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn072/README.md

Start the Metro bundler, which is essential for running React Native applications. Use either npm or Yarn.

```bash
# using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install iOS Pods

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Command to install iOS dependencies after updating the package.

```bash
cd ios && pod install && cd ..
```

--------------------------------

### Install v5.0.13

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Command to install version 5.0.13 of react-native-date-picker.

```bash
npm install react-native-date-picker@5.0.13
```

--------------------------------

### Installation Error Handling with DatePicker

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Demonstrates how to conditionally render a fallback UI if the DatePicker's native modules fail to load during installation. This prevents app crashes by catching potential errors.

```jsx
import React, { useState } from 'react'
import { Text, View } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default function SafeApp() {
  const [date, setDate] = useState(new Date())
  const [error, setError] = useState(null)

  // In your setup code, you can catch installation issues
  React.useEffect(() => {
    try {
      // Try to use the date picker
      // If native module is missing, this will throw
    } catch (e) {
      setError(e.message)
    }
  }, [])

  if (error) {
    return <Text>Error: {error}</Text>
  }

  return <DatePicker date={date} onDateChange={setDate} />
}
```

--------------------------------

### Install react-native-date-picker with npm

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Follow these steps to install the package using npm, install iOS pods, and rebuild your project for Expo and non-Expo applications.

```bash
# 1. Install the package
npm install react-native-date-picker

# 2. Install iOS pods (iOS/Expo only)
cd ios && pod install && cd ..

# 3. Rebuild the project
# For Expo projects:
npx expo run:ios
npx expo run:android

# For non-Expo projects:
npx react-native run-ios
npx react-native run-android
```

--------------------------------

### Modal Date Picker Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

Demonstrates how to implement a modal date picker. Use this pattern when you need a user to explicitly confirm their selection.

```jsx
const [date, setDate] = useState(new Date())
const [open, setOpen] = useState(false)

<Button title="Pick Date" onPress={() => setOpen(true)} />
<DatePicker
  modal
  open={open}
  date={date}
  onConfirm={(d) => { setOpen(false); setDate(d); }}
  onCancel={() => setOpen(false)}
  mode="date"
/>
```

--------------------------------

### Install Latest Version (npm)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Use this command to install the latest stable version of react-native-date-picker using npm.

```bash
npm install react-native-date-picker
```

--------------------------------

### Start iOS Application (Yarn)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Launches the React Native application on an iOS simulator using Yarn.

```bash
yarn ios
```

--------------------------------

### Start Android Application (npm)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Launches the React Native application on an Android emulator or device using npm.

```bash
npm run android
```

--------------------------------

### getInstallationErrorMessage Function

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/MANIFEST.md

Provides platform-specific error messages to guide users during the installation or setup process. It generates tailored messages for iOS, Android, and Expo environments.

```typescript
function getInstallationErrorMessage(platform: string): string;
```

--------------------------------

### Install Latest Version (yarn)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Use this command to install the latest stable version of react-native-date-picker using yarn.

```bash
yarn add react-native-date-picker
```

--------------------------------

### Install Pods and Rebuild Project

Source: https://github.com/henninghall/react-native-date-picker/blob/master/README.md

Install native dependencies using CocoaPods for iOS and rebuild the project for Android and iOS.

```sh
cd ios && pod install

# expo projects
npx expo run:android
npx expo run:ios

# non-expo projects
npx react-native run-android
npx react-native run-ios
```

--------------------------------

### Install react-native-date-picker with yarn

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Follow these steps to install the package using yarn, install iOS pods, and rebuild your project for Expo and non-Expo applications.

```bash
# 1. Install the package
yarn add react-native-date-picker

# 2. Install iOS pods (iOS/Expo only)
cd ios && pod install && cd ..

# 3. Rebuild the project
# For Expo projects:
npx expo run:ios
npx expo run:android

# For non-Expo projects:
npx react-native run-ios
npx react-native run-android
```

--------------------------------

### v3 to v5 Standard Usage

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Example of standard DatePicker usage, which remains identical between v3 and v5.

```jsx
<DatePicker
  date={date}
  onDateChange={setDate}
/>
```

--------------------------------

### Install Latest Version (pnpm)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Use this command to install the latest stable version of react-native-date-picker using pnpm.

```bash
pnpm add react-native-date-picker
```

--------------------------------

### Start Android Application (Yarn)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn073/README.md

Launches the React Native application on an Android emulator or device using Yarn.

```bash
yarn android
```

--------------------------------

### Error Handling Examples for colorToHex

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Illustrates error cases for the colorToHex function, showing how it throws an Error for invalid color formats.

```javascript
colorToHex('#gg0000')  // Throws: Error: Invalid color: #gg0000
colorToHex('notacolor') // Throws: Error: Invalid color: notacolor
colorToHex('rgb(256, 0, 0)') // Throws: Error: Invalid color: rgb(256, 0, 0)
```

--------------------------------

### DatePicker Modal with Custom Theme and Localization Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/MANIFEST.md

Demonstrates customizing the DatePicker's appearance with a custom theme and setting a specific locale for language and date formatting. This example uses a modal presentation.

```jsx
import React, { useState } from 'react';
import DatePicker from 'react-native-date-picker';

const ThemedLocalizedDatePicker = () => {
  const [date, setDate] = useState(new Date());

  return (
    <DatePicker
      modal
      date={date}
      locale="fr-FR" // French locale
      theme={{ backgroundColor: 'lightblue', confirmTextColor: 'blue' }} // Custom theme
      onDateChange={setDate}
    />
  );
};

export default ThemedLocalizedDatePicker;
```

--------------------------------

### Configure Date Picker with Minimum and Maximum Dates

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/DatePicker.md

This example shows how to set minimum and maximum date constraints for the picker, useful for limiting user selection to a specific range. It also demonstrates setting minute intervals and locale.

```jsx
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default function App() {
  const [date, setDate] = useState(new Date())
  const minDate = new Date('2020-01-01')
  const maxDate = new Date('2030-12-31')

  return (
    <DatePicker
      date={date}
      onDateChange={setDate}
      mode="datetime"
      minimumDate={minDate}
      maximumDate={maxDate}
      minuteInterval={15}
      locale="en"
    />
  )
}
```

--------------------------------

### Suppress Installation Warnings

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/configuration.md

Globally override installation error warnings by setting `global.ignoreDatePickerWarning` to true. This is useful in test environments to prevent errors when native modules are not properly installed.

```javascript
// At the top of your index file
global.ignoreDatePickerWarning = true

import DatePicker from 'react-native-date-picker'
```

--------------------------------

### Timezone-Aware Picker Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

Shows how to create a date and time picker that respects a specific timezone offset. Ensure the locale is also set for consistent formatting.

```jsx
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="datetime"
  timeZoneOffsetInMinutes={-420}  // PDT
  locale="en_US"
/>
```

--------------------------------

### PropCheck Class Usage Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Illustrates how to create and use an instance of the `PropCheck` class for validating specific props. This example shows date validation.

```javascript
const dateCheck = new PropCheck(
  (props) => !(props.date instanceof Date),
  'Invalid or missing Date prop. Must be a Date object.'
)

dateCheck.validate({ date: new Date() })  // OK
dateCheck.validate({ date: '2024-01-01' }) // Throws error
```

--------------------------------

### DatePicker Modal Mode Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/MANIFEST.md

Shows how to use the DatePicker component in modal mode, typically triggered by a button press. This example includes managing the modal's open state.

```jsx
import React, { useState } from 'react';
import DatePicker from 'react-native-date-picker';
import { Button, View } from 'react-native';

const ModalDatePicker = () => {
  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="Open Date Picker" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false);
          setDate(date);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};

export default ModalDatePicker;
```

--------------------------------

### Time Range Picker Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

Configures the picker for time selection within a specified range. Useful for setting time slots or availability.

```jsx
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  minimumDate={new Date('2024-01-01')}
  maximumDate={new Date('2024-12-31')}
  minuteInterval={15}
/>
```

--------------------------------

### Usage Example for colorToHex

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Demonstrates how to use the colorToHex function with various input formats including hex, RGB, HSL, and CSS names. Handles undefined and 'none' inputs.

```javascript
import { colorToHex } from 'react-native-date-picker' 

// Convert various formats to hex
colorToHex('#f00')                    // Returns: '#ff0000'
colorToHex('rgb(255, 0, 0)')          // Returns: '#ff0000'
colorToHex('hsl(0, 100%, 50%)')       // Returns: '#ff0000'
colorToHex('red')                     // Returns: '#ff0000'
colorToHex(undefined)                 // Returns: undefined
colorToHex('none')                    // Returns: 'none'
```

--------------------------------

### Install iOS Dependencies

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Command to install iOS dependencies using CocoaPods after updating React Native and the date picker component.

```bash
cd ios && pod install && cd ..

```

--------------------------------

### Start iOS Application

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn072/README.md

Run your React Native application on an iOS simulator or device. Ensure the Metro server is running in a separate terminal.

```bash
# using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### iOS Installation Error Resolution

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Ensure pods are installed and the app is rebuilt for iOS. If using Expo Go, switch to Expo Development Builds. A GitHub issue link is provided for further assistance.

```text
react-native-date-picker is not installed correctly. Make sure you: 
1. Installed pods (by for instance running 'cd ios && pod install')
2. Rebuilt the app (by for instance 'npx react-native run-ios')

Please reply in this thread if this solved your issue or not: 
https://github.com/henninghall/react-native-date-picker/issues/404

To ignore this warning, add 'global.ignoreDatePickerWarning = true' to the top of your index file.
```

--------------------------------

### Manual Prop Validation Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Demonstrates how to manually call the `throwIfInvalidProps` function for testing purposes. Ensure the function is imported before use.

```javascript
// This is called automatically in development mode
// You can call it manually for testing
import { throwIfInvalidProps } from 'react-native-date-picker'

const props = { date: new Date(), mode: 'invalid' }
throwIfInvalidProps(props) // Throws error immediately
```

--------------------------------

### Start Android Application

Source: https://github.com/henninghall/react-native-date-picker/blob/master/examples/Rn072/README.md

Run your React Native application on an Android emulator or device. Ensure the Metro server is running in a separate terminal.

```bash
# using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Example Usage of getNativeComponent

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Demonstrates how to obtain the native component using getNativeComponent and then use it within a React Native component.

```javascript
const NativeComponent = getNativeComponent()
// Use NativeComponent in your React Native component
```

--------------------------------

### Rebuild iOS with New Architecture

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Commands to rebuild the iOS application with the new architecture enabled, involving pod installation and running the app via the CLI.

```bash
cd ios
RCT_NEW_ARCH_ENABLED=1 pod install
cd ..
npx react-native run-ios --newArchEnabled
```

--------------------------------

### Getting Module Constants

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Illustrates the call to getConstants, which currently returns an empty object but is reserved for future use.

```javascript
getConstants(): object
```

--------------------------------

### Android Installation Error Resolution

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Ensure the app is rebuilt for Android. If using Expo Go, switch to Expo Development Builds. A GitHub issue link is provided for further assistance.

```text
react-native-date-picker is not installed correctly. Make sure you: 
1. Rebuilt the app (by for instance 'npx react-native run-android')

Please reply in this thread if this solved your issue or not: 
https://github.com/henninghall/react-native-date-picker/issues/404

To ignore this warning, add 'global.ignoreDatePickerWarning = true' to the top of your index file.
```

--------------------------------

### DatePicker DateTime with Constraints Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/MANIFEST.md

Illustrates setting minimum and maximum dates for the DatePicker to constrain the selectable date range. This is useful for scenarios like selecting birth dates.

```jsx
import React, { useState } from 'react';
import DatePicker from 'react-native-date-picker';

const ConstrainedDatePicker = () => {
  const [date, setDate] = useState(new Date());
  const minDate = new Date(2020, 0, 1); // January 1, 2020
  const maxDate = new Date(2024, 11, 31); // December 31, 2024

  return (
    <DatePicker
      date={date}
      minimumDate={minDate}
      maximumDate={maxDate}
      onDateChange={setDate}
    />
  );
};

export default ConstrainedDatePicker;
```

--------------------------------

### Integration Test DatePicker with Maestro

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Implement end-to-end (E2E) integration tests for the DatePicker using Maestro. This example shows a basic test flow involving tapping elements and asserting visibility.

```yaml
# Maestro test
appLaunchDelay: 1000
---
- tapOn:
    text: "Open Date Picker"
- tapOn:
    text: "Confirm"
- assertVisible:
    text: "2024-01-15"
```

--------------------------------

### React Component Tree

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Visualizes the hierarchical structure of React components, starting from the main exported wrapper and detailing the platform-specific components and their sub-components.

```text
DatePickerWrapper (index.js - exported)
    │
    ├─ Props: DatePickerProps
    │
    └─ getTheme()
    └─ getDividerColor()
    └─ getTextColor()
    └─ getButtonColor()
    └─ getTitle()
    │
    └─ Platform.select()
        ├─ DatePickerIOS
        │   ├─ Props: PlatformPickerProps
        │   ├─ useModal()
        │   └─ useCallback(onChange)
        │   └─ NativeComponent
        │
        └─ DatePickerAndroid
            ├─ Props: PlatformPickerProps
            ├─ useModal()
            ├─ useRef(thisId)
            ├─ useCallback(onChange)
            ├─ useCallback(onSpinnerStateChanged)
            ├─ useEffect(NativeEventEmitter)
            └─ NativeComponent
```

--------------------------------

### Invalid Theme Error Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Illustrates incorrect 'theme' prop values. Only 'light', 'dark', and 'auto' are accepted. Case sensitivity and invalid theme names will result in errors.

```jsx
// ❌ Invalid theme values
<DatePicker date={date} theme="Light" />      // Case-sensitive, should be 'light'
<DatePicker date={date} theme="darkMode" />   // Not a valid theme
<DatePicker date={date} theme="system" />     // Should be 'auto'
```

```jsx
// ✅ Use valid theme values
<DatePicker date={date} theme="light" />      // Light theme
<DatePicker date={date} theme="dark" />       // Dark theme
<DatePicker date={date} theme="auto" />       // System preference (default)
```

--------------------------------

### Get Installation Error Message

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Retrieves a platform-specific error message to guide users on how to correctly install the native modules. It detects whether the app is running in Expo or a standard React Native environment.

```javascript
function getInstallationErrorMessage(): string
```

--------------------------------

### Inlined Date Picker Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/README.md

Shows how to use the date picker in an inlined mode, directly within the component's view. The date is updated as the user interacts with the picker.

```jsx
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())

  return <DatePicker date={date} onDateChange={setDate} />
}
```

--------------------------------

### DatePicker Inline Mode Example (Uncontrolled)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/MANIFEST.md

Demonstrates how to use the DatePicker component in inline mode without explicit state management. The component manages its own date value internally.

```jsx
import React from 'react';
import DatePicker from 'react-native-date-picker';

const InlineDatePicker = () => {
  return (
    <DatePicker
      date={new Date()} // Initial date
      onDateChange={(date) => console.log(date.toString())} // Callback on date change
    />
  );
};

export default InlineDatePicker;
```

--------------------------------

### Basic DatePicker Component Usage

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/README.md

A simple example demonstrating how to use the DatePicker component to select a date. It manages the selected date using React's useState hook.

```jsx
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default function App() {
  const [date, setDate] = useState(new Date())

  return (
    <DatePicker
      date={date}
      onDateChange={setDate}
      mode="date"
    />
  )
}
```

--------------------------------

### Handle Unsupported Platform Error

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Check the platform before rendering the DatePicker component. This example demonstrates how to conditionally render a message for unsupported platforms like web or Windows.

```jsx
import { Platform } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default function MyComponent() {
  if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
    return <Text>Date picker is not supported on this platform</Text>
  }

  return <DatePicker date={date} onDateChange={setDate} />
}
```

--------------------------------

### Development Error Handling with DatePicker

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Example of how to use the DatePicker component in development mode, where prop validation errors are immediately visible. Ensure all required and optional props are correctly formatted.

```jsx
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default function SafeDatePicker() {
  const [date, setDate] = useState(new Date())

  // Props are validated in __DEV__ mode
  // If you pass invalid props, you'll see an error immediately
  return (
    <DatePicker
      date={date}                          // Required: must be a Date object
      onDateChange={setDate}               // Inline callback
      mode="datetime"                      // Valid: 'date', 'time', 'datetime'
      theme="auto"                         // Valid: 'light', 'dark', 'auto'
      style={{ width: 310, height: 216 }} // Valid: numeric width/height
    />
  )
}
```

--------------------------------

### Accessing the Native Module

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Demonstrates how to import and access the native module instance in your JavaScript code.

```javascript
import { getNativeModule } from 'react-native-date-picker'
const nativeModule = getNativeModule()
```

--------------------------------

### Opening the Date Picker Modal (Android)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Illustrates calling openPicker on Android with configuration props. Event listeners for confirmation and cancellation should be set up separately.

```javascript
const nativeModule = getNativeModule()
nativeModule.openPicker(props)
// Listen for 'onConfirm' and 'onCancel' events via NativeEventEmitter
```

--------------------------------

### Opening the Date Picker Modal (iOS)

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Shows how to call the openPicker method on iOS, passing configuration props and optional confirmation/cancel callbacks.

```javascript
const nativeModule = getNativeModule()
nativeModule.openPicker(props, onConfirmCallback, onCancelCallback)
```

--------------------------------

### Specify Timezone Offset

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Set a specific timezone offset in minutes, for example, for Pacific Daylight Time (PDT).

```jsx
<DatePicker
  date={date}
  onDateChange={setDate}
  timeZoneOffsetInMinutes={-480}  // PDT = UTC-7 = -420 min
/>
```

--------------------------------

### Basic Modal Date Picker Usage

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Implement a modal date picker that opens on button press and confirms the selected date.

```jsx
import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default function App() {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Pick Date" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(d) => {
          setOpen(false)
          setDate(d)
        }}
        onCancel={() => setOpen(false)}
      />
    </>
  )
}
```

--------------------------------

### Package Structure Overview

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Lists the main directories and files within the react-native-date-picker package, indicating the purpose of key files like the main entry point, platform implementations, and utility modules.

```tree
react-native-date-picker/
├── src/
│   ├── index.js                    # Main entry point, component wrapper
│   ├── DatePickerIOS.js            # iOS platform implementation
│   ├── DatePickerAndroid.js        # Android platform implementation
│   ├── modal.js                    # Modal functionality (useModal hook)
│   ├── modules.js                  # Native module/component access
│   ├── propChecker.js              # Prop validation in development
│   ├── colorToHex.js               # Color conversion utilities
│   ├── installationError.js        # Installation error messages
│   ├── type-definitions.js         # JSDoc type definitions
│   └── fabric/
│       ├── NativeRNDatePicker.ts   # Turbo Module specification
│       ├── NativeRNDatePicker.js   # Turbo Module fallback
│       ├── RNDatePickerNativeComponent.ts  # Native component spec
│       └── RNDatePickerNativeComponent.js  # Native component fallback
├── index.d.ts                      # TypeScript definitions
├── package.json                    # Package metadata
└── examples/                       # Example projects
```

--------------------------------

### Development Mode Type Errors

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Examples of common type errors that occur in development mode for incorrect prop values.

```javascript
// Throws immediately in development (__DEV__)
<DatePicker date={'2024-01-01'} />  // Error: date must be Date object
<DatePicker date={date} mode="invalid" />  // Error: invalid mode
<DatePicker date={date} style={{ width: '100%' }} />  // Error: width must be number
<DatePicker date={date} theme="invalid" /> // Error: invalid theme
```

--------------------------------

### Module Dependencies Diagram

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Illustrates the dependencies between the main JavaScript modules, showing how the entry point and platform-specific files rely on other internal modules like modal and modules.

```text
index.js (main entry point)
├── DatePickerIOS.js
│   ├── modal.js → modules.js
│   ├── modules.js → getNativeComponent()
│   └── propChecker.js (if __DEV__)
├── DatePickerAndroid.js
│   ├── modal.js → modules.js
│   ├── modules.js → getNativeComponent()
│   └── propChecker.js (if __DEV__)
├── colorToHex.js
│   └── (no dependencies)
├── propChecker.js
│   └── (no dependencies)
└── modules.js
    └── installationError.js
```

--------------------------------

### Removing Event Listeners

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Shows how to remove event listeners, typically handled automatically by NativeEventEmitter. This example demonstrates manual removal.

```javascript
// Usually handled automatically by NativeEventEmitter
eventEmitter.removeAllListeners('onConfirm')
```

--------------------------------

### Set Timezone Offset

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Use the `timeZoneOffsetInMinutes` prop to specify the desired timezone offset. For example, -480 minutes corresponds to PST.

```jsx
<DatePicker
  date={date}
  onDateChange={setDate}
  timeZoneOffsetInMinutes={-480}  // PST
/>
```

--------------------------------

### Custom Event Handling with Logging

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Shows how to create a wrapper component to intercept and log date change events before passing them to the original handler.

```javascript
function DatePickerWithLogging(props) {
  const handleChange = (date) => {
    console.log('Date changed to:', date)
    props.onDateChange?.(date)
  }
  return <DatePicker {...props} onDateChange={handleChange} />
}
```

--------------------------------

### Closing the Date Picker Modal

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Provides the usage example for calling the closePicker method to dismiss the currently open date picker modal.

```javascript
const nativeModule = getNativeModule()
nativeModule.closePicker()
```

--------------------------------

### Turbo Modules Integration

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Shows how the native module integrates with Turbo Modules, automatically detecting and utilizing them when available for improved performance.

```javascript
// In modules.js
const nativeModule = TurboModuleRegistry
  ? TurboModuleRegistry.get('RNDatePicker')
  : NativeModules.RNDatePicker
```

--------------------------------

### Get Native Component Function Signature

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

This is the function signature for getNativeComponent, which retrieves the appropriate native UI component for the current platform (iOS or Android).

```javascript
function getNativeComponent(): HostComponent<NativeProps>
```

--------------------------------

### Basic Inline Date Picker Configuration

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/configuration.md

This snippet shows the simplest configuration for an inline date picker. It requires the current date and a callback for when the date changes.

```jsx
<DatePicker
  date={selectedDate}
  onDateChange={setSelectedDate}
/>
```

--------------------------------

### Backup Code Before Upgrade

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Git commands to add all changes and commit them with a descriptive message, serving as a backup before upgrading React Native.

```bash
git add .
git commit -m "Before React Native upgrade"
```

--------------------------------

### Unit Test DatePicker with Jest

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/quick-reference.md

Write unit tests for the DatePicker component using Jest and `@testing-library/react-native`. This example demonstrates rendering the component and checking for its existence.

```javascript
import { render } from '@testing-library/react-native'
import DatePicker from 'react-native-date-picker'

describe('DatePicker', () => {
  it('renders without crashing', () => {
    const date = new Date()
    const { getByTestId } = render(
      <DatePicker date={date} onDateChange={() => {}} />
    )
    expect(getByTestId('datepicker')).toBeDefined()
  })
})
```

--------------------------------

### useEffect Cleanup for Event Emitter

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Provides an example of cleaning up event listeners within a useEffect hook's return function to prevent memory leaks.

```javascript
// useEffect cleanup removes listeners
return () => {
  eventEmitter.removeAllListeners('dateChange')
  eventEmitter.removeAllListeners('spinnerStateChange')
}
```

--------------------------------

### Invalid Style Width Error Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Demonstrates incorrect usage of the 'style.width' prop. Width must be a number representing points/pixels; percentages or strings are not supported.

```jsx
// ❌ Non-numeric width values
<DatePicker date={date} style={{ width: '100%' }} />       // Percentage not supported
<DatePicker date={date} style={{ width: 'auto' }} />       // String not supported
<DatePicker date={date} style={{ width: '300px' }} />      // Unit-based string not supported
<DatePicker date={date} style={{ width: undefined }} />    // OK if omitted, but not if explicitly undefined
```

```jsx
// ✅ Use numeric width values
<DatePicker date={date} style={{ width: 300 }} />          // Number (in points/pixels)
<DatePicker date={date} style={{ width: 350 }} />          // Custom width

// ✅ Or omit the width to use default
<DatePicker date={date} />                                  // Uses default width (310 points)
```

--------------------------------

### Rebuild Project with Expo

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Commands to rebuild your Expo project for iOS and Android after updating the package.

```bash
npx expo run:ios
npx expo run:android
```

--------------------------------

### Direct Dependencies

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Shows that react-native-date-picker has no direct dependencies, making it lightweight.

```json
{
  "dependencies": {}
}
```

--------------------------------

### Callback Memoization with useCallback

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Illustrates the use of the useCallback hook to ensure that callback functions are not recreated on every render, optimizing performance.

```javascript
// DatePickerAndroid wraps callbacks in useCallback
const onChange = useCallback((e) => { ... }, [props, thisId])
```

--------------------------------

### Rebuild Android with New Architecture

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/version-guide.md

Command to rebuild the Android application with the new architecture enabled using the React Native CLI.

```bash
npx react-native run-android --newArchEnabled
```

--------------------------------

### Invalid Mode Error Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Shows incorrect usage of the 'mode' prop. Valid modes are 'date', 'time', and 'datetime'. Case sensitivity and non-existent modes will cause errors.

```jsx
// ❌ Invalid mode value
<DatePicker date={date} mode="dateTime" /> // Should be 'datetime'
<DatePicker date={date} mode="clock" />    // No such mode
<DatePicker date={date} mode="DATE" />     // Case-sensitive
```

```jsx
// ✅ Use valid mode values
<DatePicker date={date} mode="date" />        // Date picker
<DatePicker date={date} mode="time" />        // Time picker
<DatePicker date={date} mode="datetime" />    // Date and time picker (default)
```

--------------------------------

### Prop Transformation Pipeline

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Illustrates the flow of user-defined props through the wrapper component to the platform-specific native components. It highlights various transformations and default values applied before reaching the native layer.

```text
User Props (DatePickerProps)
    ↓
index.js (wrapper)
    ├─ colorToHex(getTextColor(props))
    ├─ colorToHex(getDividerColor(props))
    ├─ colorToHex(getButtonColor(props))
    ├─ getTheme(props)
    ├─ getTitle(props)
    ├─ confirmText default: 'Confirm'
    ├─ cancelText default: 'Cancel'
    ├─ minuteInterval default: 1
    ├─ mode default: 'datetime'
    └─ timeZoneOffsetInMinutes → string
    ↓
Platform-Specific Component (iOS/Android)
    ├─ Convert dates to ISO strings
    ├─ Add NativeEventEmitter handlers
    ├─ Add unique ID (Android only)
    ↓
NativeProps
    ├─ date: ISO string
    ├─ minimumDate: ISO string
    ├─ maximumDate: ISO string
    ├─ locale: string
    ├─ theme: 'light' | 'dark' | 'auto'
    ├─ ... (other native props)
    ↓
Native Component
    ├─ iOS: UIDatePicker
    └─ Android: DatePickerDialog/TimePickerDialog
```

--------------------------------

### Registering for Native Events

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/native-api.md

Demonstrates how to use NativeEventEmitter to listen for date picker events like 'onConfirm', 'onCancel', 'dateChange', and 'spinnerStateChange'.

```javascript
import { NativeEventEmitter } from 'react-native'
import { getNativeModule } from 'react-native-date-picker'

const nativeModule = getNativeModule()
const eventEmitter = new NativeEventEmitter(nativeModule)

eventEmitter.addListener('onConfirm', (params) => {
  console.log('Date selected:', params.date)
})

eventEmitter.addListener('onCancel', (params) => {
  console.log('Cancelled')
})
```

--------------------------------

### Invalid Date Prop Error Example

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/errors.md

Demonstrates incorrect usage of the 'date' prop, which must be a valid Date object. This includes missing, null, undefined, string, or timestamp values.

```jsx
// ❌ Missing date prop
<DatePicker onDateChange={setDate} />

// ❌ Date is a string instead of Date object
<DatePicker date="2024-01-01" onDateChange={setDate} />

// ❌ Date is a number (timestamp)
<DatePicker date={1704067200000} onDateChange={setDate} />

// ❌ Date is null or undefined
<DatePicker date={null} onDateChange={setDate} />
```

```jsx
// ✅ Use a valid Date object
const [date, setDate] = useState(new Date())

<DatePicker date={date} onDateChange={setDate} />

// ✅ Create a Date from a string
const dateFromString = new Date('2024-01-01')
<DatePicker date={dateFromString} onDateChange={setDate} />

// ✅ Create a Date from a timestamp
const dateFromTimestamp = new Date(1704067200000)
<DatePicker date={dateFromTimestamp} onDateChange={setDate} />
```

--------------------------------

### Wrapping DatePicker for Custom State Management

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/module-architecture.md

Demonstrates how to wrap the DatePicker component to manage its state externally, allowing for custom logic before updating the date.

```javascript
function CustomDatePicker(props) {
  const [date, setDate] = useState(props.date)
  return (
    <DatePicker
      {...props}
      date={date}
      onDateChange={setDate}
    />
  )
}
```

--------------------------------

### Get Native Module for Platform

Source: https://github.com/henninghall/react-native-date-picker/blob/master/_autodocs/api-reference/utilities.md

Retrieves the native module specific to the current platform (iOS or Android). This is used to access native methods for opening and closing the date picker modal.

```javascript
function getNativeModule(): NativeModule
```