@omerman/react-native-wheel-picker-android v1.1.1

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

Installation Android

1. npm install @omerman/react-native-wheel-picker-android --save
2. react-native link @omerman/react-native-wheel-picker-android
3. In android/build.gradle add the jitpack repository to your project.

allprojects {
    repositories {
        ...
+       maven {
+          url "https://jitpack.io"
+       }
    }
}

Usage

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

class MyPickers extends Component {
  render() {
    let now = new Date()
    let wheelPickerData = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    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)=>{console.log(event)}}
          isCurved
          isCyclic
          data={arr}
          style={{width:300, height: 300}}/>
    );
  }

Props

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() {
    let minutesArray = ['00', '15', '30', '45'];
    let now = new Date();
    return (
      	<TimePicker
	       minutes={minutesArray}
   	     onTimeSelected={(date)=>this.onTimeSelected(date))}
	       initDate={now.toISOString()}/>
    );
  }

  onTimeSelected(date){
    // do something
  }

Props

Date Picker

...

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

  onDateSelected(date){
    // do something
  }

Props

Questions or suggestions?

Feel free to open an issue