This 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-2
import { Picker, DatePicker } from 'react-native-wheel-pick-2';
// use Picker
<Picker
style={{ backgroundColor: '#333', width: 300, height: 215 }}
textColor={"#f1f1f1"}
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) }}
/>
// 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.
// Way 1
<Picker
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// Optional Way 2
<Picker
style={{ backgroundColor: 'white', width: 300, height: 215 }}
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) }}
/>
// Android Only.
// These is special props for Android. (iOS not work)
// You can also use these props for DatePicker, too.
<Picker
textColor='red'
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.
<DatePicker
order='D-M-Y' // Default is M-D-Y
/>
[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. | |
maximumDate | instanceOf(Date) |
The maximum date that can be selected. | |
minimumDate | instanceOf(Date) |
The minimum date that can be selected. | |
mode | oneOf(['date', 'time', 'datetime']) |
'date' | The display mode for the date picker. |
onDateChange | func.isRequired |
Callback function to be called when the date changes. |
Prop | Type | Default | Description |
---|---|---|---|
textColor | string |
'#333' | The color of the text in the picker. |
textSize | number |
26 | The size of the text in the picker. |
itemStyle | object |
null | The style for the picker items. |
onValueChange | func.isRequired |
Callback function to be called when the value changes. | |
pickerData | array.isRequired |
The data for the picker items. | |
style | object |
{} | The style for the picker container. |
selectedValue | any |
'' | The initially selected value in the picker. |