ReactNativeWheelPicker

A simple Wheel Picker for Android based on https://github.com/AigeStudio/WheelPicker Also you can use multiple pickers, such as DatePicker or TimePicker

For IOS you can use a good Picker for IOS and DatePicker for IOS

Installation Android

yarn add react-native-wheel-picker-android

Usage

import{WheelPicker,DatePicker,TimePicker}from'react-native-wheel-picker-android'importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';constwheelPickerData=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];constnow=newDate()classMyPickersextendsComponent{render(){return(<Viewstyle={styles.container}><WheelPickeronItemSelected={(event)=>this.onItemSelected(event)}isCurveddata={wheelPickerData}style={styles.wheelPicker}/><DatePickerinitDate={now.toISOString()}onDateSelected={(date)=>this.onDateSelected(date)}/><TimePickerinitDate={now.toISOString()}onTimeSelected={(date)=>this.onTimeSelected(date)}/></View>);}onItemSelected(event){// do something}onDateSelected(date){// do something}onTimeSelected(date){// do something}}conststyles=StyleSheet.create({container: {flex: 1,alignItems: 'center',},wheelPicker: {width: 200,height: 150}});module.exports=MyPickers;

Wheel Picker

import{WheelPicker,DatePicker,TimePicker}from'react-native-wheel-picker-android'
...
render(){letarr=[1,2,3];return(<WheelPickeronItemSelected={(event)=>{/* do something */}}isCurvedisCyclicdata={arr}style={{width:300,height: 300}}/>);}

Props

Prop	Default	Type	Description
onItemSelected	null	func	Callback when user select item {data: 'itemData', position: 'itemPosition'}
data	default string array	array	Data array (string or number type)
isCurved	false	bool	Make Wheel Picker curved
isCyclic	false	bool	Make Wheel Picker cyclic
isAtmospheric	false	bool	Design Wheel Picker's items
selectedItemTextColor	grey	string	Wheel Picker's selected Item Text Color
itemSpace	20	number	Wheel Picker's items spacing
visibleItemCount	7	number	Wheel Picker's items max visible count
renderIndicator	false	bool	Show Wheel Picker indicator
indicatorColor	transparent	string	Indicator color
isCurtain	false	bool	Wheel Picker curtain
curtainColor	transparent	string	Wheel Picker curtain color
itemTextColor	grey	string	Wheel Picker's items color
itemTextSize	20	number	Wheel Picker's items text size
itemTextFontFamily	null	string	Wheel Picker's items text font name
selectedItemPosition	null	number	Select current item position
backgroundColor	transparent	string	Wheel Picker background color

data

An array of options. This should be provided with an array of strings or array of numbers.

onItemSelected(event)

Callback with event in the form event = { data: 1, position: 0 }

Time Picker

...
render(){constminutesArray=['00','15','30','45'];constnow=newDate();return(<TimePickerminutes={minutesArray}onTimeSelected={(date)=>this.onTimeSelected(date))}initDate={now.toISOString()}/>);}onTimeSelected(date){// do something}

Props

Prop	Default	Type	Description
onTimeSelected	null	func	Callback when user select time {date: 'selectedTime'}
initDate	current date	ISOString	Initial selected time
hours	[1, 2, 3, .. 12]	array	hours array
minutes	['00', '05' ,'10', .. '55']	array	minutes array

Date Picker

...
render(){letnow=newDate();return(<DatePickerinitDate={now.toISOString()}onDateSelected={(date)=>this.onDateSelected(date)}/>);}onDateSelected(date){// do something}

Props

Prop	Default	Type	Description
onDateSelected	null	func	Callback when user select date {date: 'selectedDate'}
initDate	current date	ISOString	Initial selected date
days	['Today', 'Wed Dec 28', ...]	array	days array
hours	[1, 2, 3 .. 12]	array	hours array
minutes	['00', '05', '10', .. '55']	array	minutes array
format24	false	bool	if true hours format is 24 hours
startDate	current date	ISOString	The Earlest date
daysCount	365	number	How many days included in Date Picker

Questions or suggestions?

Feel free to open an issue