### Install react-native-wheel-pick and Dependencies (React Native >= 0.60)

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Installs the react-native-wheel-pick library along with necessary peer dependencies for iOS and Android. It also includes commands to install pods and reset the Metro bundler cache for a clean build.

```bash
npm install react-native-wheel-pick --save-dev --legacy-peer-deps
npm install @react-native-picker/picker --save-dev --legacy-peer-deps
npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps
npx pod-install

npx react-native start --reset-cache

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

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

### Install react-native-wheel-pick (React Native < 0.60)

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Installs the react-native-wheel-pick library for older React Native versions (< 0.60) using npm and links the native modules.

```bash
npm install react-native-wheel-pick
react-native link react-native-wheel-pick
```

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

### Basic Usage of Picker and DatePicker

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Demonstrates the fundamental usage of the Picker and DatePicker components from react-native-wheel-pick. It shows how to configure basic props like `selectedValue`, `pickerData`, `style`, and `onValueChange`/`onDateChange` handlers.

```jsx
import { Picker, DatePicker } from 'react-native-wheel-pick';

// use Picker
<Picker
  style={{ backgroundColor: 'white', width: 300, height: 215 }}
  selectedValue='item4'
  pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
  onValueChange={value => { console.log(value) }}
/>

// use DatePicker
<DatePicker
  style={{ backgroundColor: 'white', width: 370, height: 240 }} 
  onDateChange={date => { console.log(date) }}
/>

// for TypeScript
onValueChange={(value: string) => { console.log(value) }}
onDateChange={(date: Date) => { console.log(date) }}
```

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

### Basic Picker and DatePicker Usage in React Native

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Demonstrates the fundamental usage of the Picker and DatePicker components from the react-native-wheel-pick library. It shows how to import them, set basic styles, and handle value changes. Note that the `itemSpace` prop is Android-specific, and the `width` prop for DatePicker is not supported on Android.

```jsx
import { Platform } from 'react-native';
import { Picker, DatePicker } from 'react-native-wheel-pick';

const isIos = Platform.OS === 'ios'

// use Picker
<Picker
  style={{ backgroundColor: 'white', width: 300, height: 215 }}
  selectedValue='item4'
  pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
  onValueChange={value => { }}
  itemSpace={30} // this only support in android
/>

// use DatePicker
<DatePicker
  style={{ backgroundColor: 'white', height: 215, width: isIos ? 300 : undefined }}
  // android not support width
  onDateChange={date => { }}
/>
```

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

### Implement Typed Picker and DatePicker in React Native

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Demonstrates the usage of Picker and DatePicker components with TypeScript support. It shows how to manage state for selected values and dates using React hooks and the library's callback props.

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { Picker, DatePicker } from 'react-native-wheel-pick';

interface PickerItem {
  value: string;
  label: string;
}

function TypedPicker(): JSX.Element {
  const [selectedValue, setSelectedValue] = useState<string>('option1');
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());

  const options: PickerItem[] = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return (
    <View>
      <Picker
        style={{ backgroundColor: 'white', width: 300, height: 215 }}
        selectedValue={selectedValue}
        pickerData={options}
        onValueChange={(value: string) => {
          console.log('Selected:', value);
          setSelectedValue(value);
        }}
      />

      <DatePicker
        style={{ backgroundColor: 'white', width: 370, height: 240 }}
        date={selectedDate}
        mode="date"
        onDateChange={(date: Date) => {
          console.log('Date selected:', date.toISOString());
          setSelectedDate(date);
        }}
      />
    </View>
  );
}

export default TypedPicker;
```

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

### DatePicker with Default, Minimum, and Maximum Dates in React Native

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Illustrates how to configure the DatePicker component with specific date ranges and default selections. This includes setting an initial date, a minimum allowable date, and a maximum allowable date, providing more control over user date input.

```jsx
// DatePicker set default choose date
<DatePicker
  style={{ height: 215, width: isIos ? 300 : undefined }}
  date={new Date('2018-06-27')} // Optional prop - default is Today
  onDateChange={date => { }}
/>

// DatePicker set min/max Date
<DatePicker
  style={{ height: 215, width: isIos ? 300 : undefined }}
  minimumDate={new Date('2000-01-01')}
  maximumDate={new Date('2050-12-31')}
  onDateChange={date => { }}
/>
```

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

### DatePicker Component Usage (React Native)

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Demonstrates the basic usage of the DatePicker component for selecting birthdates, times, and full datetimes. It shows how to set initial dates, minimum/maximum dates, and handle date changes. The component adapts its appearance and behavior based on the 'mode' prop.

```jsx
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DatePicker } from 'react-native-wheel-pick';

function BirthdayPicker() {
  const [birthdate, setBirthdate] = useState(new Date('1990-01-15'));

  return (
    <View>
      <Text>Birthday: {birthdate.toDateString()}</Text>
      <DatePicker
        style={{ backgroundColor: 'white', width: 370, height: 240 }}
        date={birthdate}
        minimumDate={new Date('1900-01-01')}
        maximumDate={new Date()}
        mode="date"
        onDateChange={(date) => {
          console.log('Selected date:', date);
          setBirthdate(date);
        }}
        textColor="#333"
        textSize={26}
      />
    </View>
  );
}

// Time picker mode
function TimePicker() {
  const [time, setTime] = useState(new Date());

  return (
    <DatePicker
      style={{ backgroundColor: 'white', width: 300, height: 215 }}
      date={time}
      mode="time"
      onDateChange={(date) => setTime(date)}
    />
  );
}

// DateTime picker mode
function DateTimePicker() {
  const [datetime, setDatetime] = useState(new Date());

  return (
    <DatePicker
      style={{ backgroundColor: 'white', width: 400, height: 240 }}
      date={datetime}
      mode="datetime"
      minimumDate={new Date('2020-01-01')}
      maximumDate={new Date('2030-12-31')}
      onDateChange={(date) => setDatetime(date)}
    />
  );
}
```

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

### Basic Picker Component Usage in React Native

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Demonstrates how to use the Picker component for selecting values from a simple string array or an array of objects with custom labels. It handles state updates for the selected value and accepts basic styling props.

```jsx
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Picker } from 'react-native-wheel-pick';

function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('apple');

  return (
    <View>
      <Text>Selected: {selectedFruit}</Text>
      <Picker
        style={{ backgroundColor: 'white', width: 300, height: 215 }}
        selectedValue={selectedFruit}
        pickerData={['apple', 'banana', 'orange', 'grape', 'mango']}
        onValueChange={(value) => setSelectedFruit(value)}
        textColor="#333"
        textSize={26}
      />
    </View>
  );
}

// Using object array for custom labels and values
function CountryPicker() {
  const [selectedCountry, setSelectedCountry] = useState('us');

  const countries = [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'jp', label: 'Japan' },
    { value: 'de', label: 'Germany' },
    { value: 'fr', label: 'France' },
  ];

  return (
    <Picker
      style={{ backgroundColor: 'white', width: 300, height: 215 }}
      selectedValue={selectedCountry}
      pickerData={countries}
      onValueChange={(value) => {
        console.log('Selected country code:', value); // 'us', 'uk', etc.
        setSelectedCountry(value);
      }}
    />
  );
}
```

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

### Custom Date Order for DatePicker (Android)

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Illustrates how to customize the order of date components (Day, Month, Year) on Android using the 'order' prop. This allows for locale-specific date formatting like D-M-Y or Y-M-D. It also shows additional Android styling options.

```jsx
import React, { useState } from 'react';
import { View, Platform } from 'react-native';
import { DatePicker } from 'react-native-wheel-pick';

function EuropeanDatePicker() {
  const [date, setDate] = useState(new Date());

  return (
    <DatePicker
      style={{ backgroundColor: 'white', width: 370, height: 240 }}
      date={date}
      mode="date"
      order="D-M-Y"  // Day-Month-Year format (Android only, default is M-D-Y)
      onDateChange={(date) => setDate(date)}
      textColor="#333"
      textSize={26}

      // Android styling options also work with DatePicker
      isShowSelectLine={true}
      selectLineColor="#007AFF"
      isShowSelectBackground={false}
    />
  );
}

// ISO date order
function ISODatePicker() {
  const [date, setDate] = useState(new Date());

  return (
    <DatePicker
      style={{ backgroundColor: 'white', width: 370, height: 240 }}
      date={date}
      order="Y-M-D"  // Year-Month-Day format
      onDateChange={(date) => setDate(date)}
    />
  );
}
```

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

### Advanced Picker and DatePicker Customization

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Illustrates advanced customization options for both Picker and DatePicker components. This includes setting text color, default/minimum/maximum dates for DatePicker, and using arrays of objects for picker data.

```jsx
// Set Text Color
<Picker textColor="red" />

// DatePicker set default select date
<DatePicker
  style={{ height: 215, width: 300 }}
  date={new Date('2018-06-27')} // Optional prop - default is Today
  onDateChange={date => { console.log(date) }}
/>

// DatePicker set min/max Date
<DatePicker
  style={{ height: 215, width: 300 }}
  minimumDate={new Date('2000-01-01')}
  maximumDate={new Date('2050-12-31')}
  onDateChange={date => { console.log(date) }}
/>

// pickerData also support array of object. (Optional Way)

// Normal Way
<Picker
  selectedValue='item4'
  pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
  onValueChange={value => { console.log(value) }}
/>

// Optional Way
// `label` only use for show Text to UI.
// You cannot get `label` from onValueChange
<Picker
  selectedValue='5765387680'
  pickerData={
    [
      { value : '5765387677', label : 'item1' },
      { value : '5765387678', label : 'item2' },
      { value : '5765387679', label : 'item3' },
      { value : '5765387680', label : 'item4' },
      { value : '5765387681', label : 'item5' },
      { value : '5765387682', label : 'item6' },
      { value : '5765387683', label : 'item7' },
    ]
  }
  onValueChange={value => { console.log(value) }} // '5765387680'
/>
```

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

### Android-Specific Picker and DatePicker Props

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Details platform-specific props available only for Android. These include text size, selection text color, background visibility and color, line visibility, color, and size, cyclic scrolling, and date order for DatePicker.

```jsx
// Android Only.
// These is special props for Android. (iOS and Web not work)
// You can also use these props for DatePicker, too.
<Picker
  textSize={20}

  selectTextColor='green'
  isShowSelectBackground={false} // Default is true
  selectBackgroundColor='#8080801A' // support HEXA color Style (#rrggbbaa)
  // (Please always set 'aa' value for transparent)
  
  isShowSelectLine={false} // Default is true
  selectLineColor='black'
  selectLineSize={6} // Default is 4

  isCyclic={true} // Support Infinitely Scrolling.
/>

// Android Only.
<DatePicker
  order='D-M-Y' // Default is M-D-Y
/>

// Test on Web (Platform.OS === 'Web')
<Picker style={{ height: 50 }} />
// DatePicker still not supported on Web.
```

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

### Registering Custom iOS DatePicker

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Explains how to replace the default iOS DatePicker implementation with a custom component using `registerCustomDatePickerIOS`. This is useful for advanced customization or integrating third-party picker libraries. The function must be called before rendering the DatePicker.

```jsx
import React from 'react';
import { Picker, DatePicker, registerCustomDatePickerIOS } from 'react-native-wheel-pick';
import CustomIOSDatePicker from './CustomIOSDatePicker';

// Register a custom DatePicker component for iOS
// This must be called before rendering any DatePicker components
const CustomizedDatePicker = registerCustomDatePickerIOS(CustomIOSDatePicker);

function App() {
  return (
    <View>
      {/* This will now use CustomIOSDatePicker on iOS */}
      <DatePicker
        style={{ height: 215, width: 300 }}
        date={new Date()}
        onDateChange={(date) => console.log(date)}
      />
    </View>
  );
}

// Or use the returned component directly
function AnotherApp() {
  return (
    <CustomizedDatePicker
      style={{ height: 215, width: 300 }}
      date={new Date()}
      onDateChange={(date) => console.log(date)}
    />
  );
}
```

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

### Android-Specific Styling for Picker Component in React Native

Source: https://context7.com/tronnatthakorn/react-native-wheel-pick/llms.txt

Illustrates advanced styling options available exclusively for the Picker component on Android. This includes customization of the selection line, background, text colors, and cyclic scrolling behavior. These props are ignored on other platforms.

```jsx
import React, { useState } from 'react';
import { View, Platform } from 'react-native';
import { Picker } from 'react-native-wheel-pick';

function StyledAndroidPicker() {
  const [selected, setSelected] = useState('item3');

  return (
    <Picker
      style={{ backgroundColor: 'white', width: 300, height: 215 }}
      selectedValue={selected}
      pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
      onValueChange={(value) => setSelected(value)}

      // Text styling
      textColor="#333"
      textSize={20}
      selectTextColor="green"  // Android only: selected item text color

      // Selection background (Android only)
      isShowSelectBackground={true}  // Default is true
      selectBackgroundColor="#8080801A"  // HEXA format (#rrggbbaa)

      // Selection line (Android only)
      isShowSelectLine={true}  // Default is true
      selectLineColor="black"
      selectLineSize={6}  // Default is 4

      // Cyclic scrolling (Android only)
      isCyclic={true}  // Enable infinite scrolling
    />
  );
}
```

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

### Change Font Family for Android

Source: https://github.com/tronnatthakorn/react-native-wheel-pick/blob/master/README.md

Provides instructions on how to change the font family for the wheel picker on Android devices. This involves modifying the `styles.xml` file in the Android project to include a reference to the desired font file.

```xml
<!-- android/app/src/main/res/values/styles.xml -->
<item name="wheel_font_path">fonts/[FONT_NAME].ttf</item>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.