No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Artem
Latest commit a90c8c2 Sep 20, 2018

README.md

ReactNativeWheelPicker

npm version npm version

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

react-native link react-native-wheel-picker-android

Usage

import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

const wheelPickerData = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'];
const now = new Date()

class MyPickers extends Component {
  render() {
    return (
      <View style={styles.container}>
        <WheelPicker
           onItemSelected={(event)=>this.onItemSelected(event)}
           isCurved
           data={wheelPickerData}
           style={styles.wheelPicker}/>
         <DatePicker
           initDate={now.toISOString()}
           onDateSelected={(date)=>this.onDateSelected(date)}/>
         <TimePicker
           initDate={now.toISOString()}
           onTimeSelected={(date)=>this.onTimeSelected(date)}/>
      </View>
    );
  }

  onItemSelected(event){
    // do something
  }

  onDateSelected(date){
    // do something
  }

  onTimeSelected(date){
    // do something
  }


}

const styles = 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() {
    let arr = [1,2,3];
    return (
      <WheelPicker
          onItemSelected={(event)=>{/* do something */}}
          isCurved
          isCyclic
          data={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() {
    const minutesArray = ['00', '15', '30', '45'];
    const now = new Date();
    return (
      	<TimePicker
	       minutes={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
itemTextColor grey string Time Picker's items color
selectedItemTextColor black string Time Picker's selected Item Text Color
backgroundColor - string Time Picker background color

Date Picker

...

  render() {
  let now = new Date();
    return (
      	<DatePicker
          initDate={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
itemTextColor grey string Date Picker's items color
selectedItemTextColor black string Date Picker's selected Item Text Color
backgroundColor - string Date Picker background color
hideDate - boolean Hide date wheel picker
hideHours - boolean Hide hours wheel picker
hideMinutes - boolean Hide minutes wheel picker
hideAM - boolean Hide AM wheel picker

Questions or suggestions?

Feel free to open an issue