Awesome

React native wheel picker V2

A simple Wheel Picker for Android (For IOs is using Picker from react-native)

Example

You can clone the repo and run example from ./example folder

Installation

yarn add react-native-wheel-picker-android

Automatic Installation

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

Manual Android Installation

In android/settings.gradle

include ':react-native-wheel-picker-android'
project(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')

In android/app/build.gradle

dependencies {
    ...
    compile project(':react-native-wheel-picker-android')
}

In android/app/src/main/java/com/PROJECT_NAME/MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(new MainReactPackage(), new WheelPickerPackage());
}

Usage

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

const wheelPickerData = [
  "sunday",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday"
];

class MyPicker extends Component {
  state = {
    selectedItem: 0
  };

  onItemSelected = selectedItem => {
    this.setState({ selectedItem });
  };

  onPress = () => {
    this.setState({ selectedItem: 3 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title={"Select third element"} onPress={this.onPress} />
        <Text>Selected position: {this.state.selectedItem}</Text>
        <WheelPicker
          selectedItem={this.state.selectedItem}
          data={wheelPickerData}
          onItemSelected={this.onItemSelected}
        />
      </View>
    );
  }
}

module.exports = MyPicker;

Props

Time Picker

For IOs DatePickerIOS is used

onTimeSelected = date => {}
...
<TimePicker onTimeSelected={this.onTimeSelected}/>

Props

Date Picker

For IOs DatePickerIOS is used

onDateSelected = date => {}
...
<DatePicker onDateSelected={this.onDateSelected}/>

Props

Questions or suggestions?

Feel free to open an issue