DOCSEARCHbyAlgolia
Submit Docs

react-native-wheel-pick

repository·master·Indexed 42 days ago

https://github.com/tronnatthakorn/react-native-wheel-pick

A React Native wheel picker component providing iOS-style Picker and DatePicker interfaces for iOS, Android, and Web. Version 1.2.8 includes a Picker for string or object arrays and a DatePicker with customizable date ranges and Android-specific formatting options.

Tokens
1.8K
Snippets
7
Records
8
Agent score
3%

What's inside react-native-wheel-pick

  1. Install react-native-wheel-pick

    master

    For React Native >= 0.60+

    Install the library and its required peer dependencies using --legacy-peer-deps to ensure compatibility with React 18:

    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

    After installation, clear the cache and rebuild the native code:

    npx react-native start --reset-cache
npx react-native run-ios
npx react-native run-android

    For React Native < 0.60

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

  2. Change Font Family for Android

    master

    To use a custom font in the wheel picker on Android, follow these steps:

    1. Locate your font file (e.g., myfont.ttf).
    2. Open android/app/src/main/res/values/styles.xml.
    3. Add an item with the name wheel_font_path pointing to your font in the assets folder:

    <item name="wheel_font_path">fonts/[FONT_NAME].ttf</item>

    <item name="wheel_font_path">fonts/YOUR_FONT_NAME.ttf</item>

  3. Use the Picker component

    master

    The Picker component allows you to create a wheel selection UI. You can provide data as an array of strings or an array of objects for more control.

    Data Formats:

    • String Array: Simple list of values. onValueChange returns the string.
    • Object Array: Use { value: string, label: string }. onValueChange returns the value, while label is only used for display in the UI.

    TypeScript Support:

    • onValueChange receives a string.

    Web Support:

    • <Picker /> is supported on Web (Platform.OS === 'web').
    import { Picker } from 'react-native-wheel-pick';

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

// Object-based usage
<Picker
  selectedValue='5765387680'
  pickerData={[
    { value : '5765387677', label : 'item1' },
    { value : '5765387680', label : 'item4' },
  ]}
  onValueChange={value => { console.log(value) }} // returns '5765387680'
/>

  4. Use the DatePicker component

    master

    The DatePicker component provides a wheel-based date selection interface.

    Key Props:

    • date: Sets the initial selected date (defaults to Today).
    • minimumDate: Sets the earliest selectable date.
    • maximumDate: Sets the latest selectable date.
    • onDateChange: Callback returning a Date object.

    Platform Notes:

    • Web: <DatePicker /> is not supported on Web.
    • Android: Supports the order prop to change date formatting (e.g., 'D-M-Y'). Default is 'M-D-Y'.
    import { DatePicker } from 'react-native-wheel-pick';

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

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

  5. Configure Android-specific Picker and DatePicker props

    master

    The following props are exclusive to Android and will not work on iOS or Web. They can be applied to both Picker and DatePicker components.

    Picker Android Props:

    • textSize: Number
    • selectTextColor: Color string
    • isShowSelectBackground: Boolean (Default: true)
    • selectBackgroundColor: HEXA color string (e.g., #8080801A). Always include the alpha channel for transparency.
    • isShowSelectLine: Boolean (Default: true)
    • selectLineColor: Color string
    • selectLineSize: Number (Default: 4)
    • isCyclic: Boolean (Enables infinite scrolling)

    DatePicker Android Props:

    • order: Date format string (e.g., 'D-M-Y'). Default is 'M-D-Y'.
    // Android Only Picker
<Picker
  textSize={20}
  selectTextColor='green'
  isShowSelectBackground={false}
  selectBackgroundColor='#8080801A'
  isShowSelectLine={false}
  selectLineColor='black'
  selectLineSize={6}
  isCyclic={true}
/>

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

  7. Register a custom DatePicker for iOS

    master

    The registerCustomDatePickerIOS function allows you to override the default DatePicker component specifically for iOS platforms. This is useful if you want to provide a custom implementation of the date picker component when running on iOS. The function accepts a component as an argument and returns the component that will be used for date picking (either your custom one if on iOS, or the default one otherwise).

    import { registerCustomDatePickerIOS } from 'react-native-wheel-pick';

// Replace CustomIOSComponent with your own component implementation
registerCustomDatePickerIOS(CustomIOSComponent);