react-native-wheel-pick-2

This package is an updated version of react-native-wheel-pick with dependencies.

React native wheel picker for both iOS and android. (Support DatePicker)

Preview

Note

• 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

How to use

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

Example code

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) }}
/>

More Example

// 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
/>

Release Note

[Android]

• Update sdk support for SDK Version 33 (Google Play need sdk version 30+)

PROPS

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.