react-native-wheel-picker-android

ReactNativeWheelPicker

A simple Wheel Picker for Android

Installation Android

1. npm install react-native-wheel-picker-android --save
2. react-native link react-native-wheel-picker-android

Usage

import WheelPicker from 'react-native-wheel-picker-android';
...

  render() {
  let arr = [1,2,3];
    return (
      <WheelPicker
          onItemSelected={(event)=>{console.log(event)}}
          isCurved
          isCyclic
          data={arr}
          style={{width:300, height: 300}}/>
    );
  }

Time Picker

import TimePicker from './TimePicker';
...

  render() {
  let minutesArray = ['00', '15', '30', '45'];
  let now = new Date();
    return (
      	<TimePicker
					minutes={minutesArray}
					onDateSelected={(date)=>this.onDateSelected(date))}
					initDate={now.toISOString()}
					/>
    );
  }

  onDateSelected(date){
    // do something
  }

Date Picker

import DatePicker from './DatePicker';
...

  render() {
  let now = new Date();
    return (
      	<DatePicker
					initDate={now.toISOString()}
					onDateSelected={(date)=> this.onDateSelected(date)}/>
    );
  }

  onDateSelected(date){
    // do something
  }

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

Prop	Default	Type	Description
onDateSelected	null	func	Callback when user select time {date: 'selectedDate'}
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 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