React native wheel picker iOS style with android.
npm install react-native-wheel-pick-2This package is an updated version of react-native-wheel-pick with dependencies.
React native wheel picker for both iOS and android. (Support DatePicker)

- For Picker of iOS use @react-native-picker/picker
- For DatePicker of iOS use @react-native-community/datetimepicker
- For Picker and DatePicker of Android use WheelPicker of AigeStudio
React Native >= 0.60+
``
npm install react-native-wheel-pick-2 --save --legacy-peer-deps
npm install @react-native-picker/picker --save --legacy-peer-deps
npm install @react-native-community/datetimepicker --save --legacy-peer-deps
npx pod-install
npx react-native run-ios // re-build native-code
npx react-native run-android // re-build native-code for gradle
`
React Native < 0.60
``
npm install react-native-wheel-pick-2
react-native link react-native-wheel-pick-2Example code
`jsx
import { Picker, DatePicker } from 'react-native-wheel-pick-2';
// use Picker
textColor={"#f1f1f1"}
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// use DatePicker
onDateChange={date => { console.log(date) }}
/>
`More Example
`jsx
// DatePicker set default select date
date={new Date('2018-06-27')} // Optional prop - default is Today
onDateChange={date => { console.log(date) }}
/>
// DatePicker set min/max Date
minimumDate={new Date('2000-01-01')}
maximumDate={new Date('2050-12-31')}
onDateChange={date => { console.log(date) }}
/>
``jsx
// pickerData also support array of object.
// Way 1
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// Optional Way 2
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) }}
/>
``jsx
// Android Only.
// These is special props for Android. (iOS not work)
// You can also use these props for DatePicker, too.
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
/>
// Android Only.
/>
`Release Note
[Android]
- Update sdk support for SDK Version 33 (Google Play need sdk version 30+)
| Prop | Type | Default | Description |
|---------------|----------------------|---------|-------------------------------------------------------|
| date | instanceOf(Date) | | The initial date to be displayed. |instanceOf(Date)
| maximumDate | | | The maximum date that can be selected. |instanceOf(Date)
| minimumDate | | | The minimum date that can be selected. |oneOf(['date', 'time', 'datetime'])
| mode | | 'date' | The display mode for the date picker. |func.isRequired
| onDateChange | | | Callback function to be called when the date changes. |
| Prop | Type | Default | Description |
|---------------|----------------------|-----------|-------------------------------------------------------|
| textColor | string | '#333' | The color of the text in the picker. |number
| textSize | | 26 | The size of the text in the picker. |object
| itemStyle | | null | The style for the picker items. |func.isRequired
| onValueChange | | | Callback function to be called when the value changes.|array.isRequired
| pickerData | | | The data for the picker items. |object
| style | | {} | The style for the picker container. |any` | '' | The initially selected value in the picker. |
| selectedValue |