Home

Awesome

React native wheel picker V2

<p> <img src="http://img.shields.io/npm/v/react-native-wheel-picker-android.svg" /> <img src="https://img.shields.io/npm/dm/react-native-wheel-picker-android.svg" /> <img src="https://img.shields.io/npm/dt/react-native-wheel-picker-android.svg" /> </p>

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

PropDefaultTypeDescription
onItemSelected-funcReturns selected position
data-Array<string>Data array
isCyclicfalseboolMake Wheel Picker cyclic
selectedItemTextColorblackstringWheel Picker's selected Item text color
selectedItemTextSize16numberWheel Picker's selected Item text size
selectedItemTextFontFamily-font-familyWheel Picker's selected Item font
itemTextColorgreystringWheel Picker's Item Text Color
itemTextSize16numberWheel Picker's Item text size
itemTextFontFamily-font-familyWheel Picker's Item font
selectedItem0numberCurrent item position
initPosition0numberInitial item position
indicatorColorblackstringIndicator color
hideIndicator-booleanHide indicator
indicatorWidth1numberIndicator width
backgroundColortransparentstringWheel Picker background color
disabledundefindboolDisable picker selection

Time Picker

For IOs DatePickerIOS is used

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

Props

PropDefaultTypeDescription
DatePickerIOS props--All DatePickerIOS props (IOS only)
...WheelPicker props--All style WheelPicker props (Android only)
initDatecurrent dateDateInitial date
onTimeSelected-funcCallback with selected time
hours[1,2,3,4...]Array<string>Custom hours array (Android only)
minutes[00,05,10,15...]Array<string>Custom minutes array (Android only)
format24falsebooleanTime format (Android only)

Date Picker

For IOs DatePickerIOS is used

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

Props

PropDefaultTypeDescription
DatePickerIOS props--All DatePickerIOS props (IOS only)
initDatecurrent dateDateInitial date
onDateSelected-funcCallback with selected date
days[1,2,3,4...]Array<string>Custom days array (Android only)
hours[1,2,3,4...]Array<string>Custom hours array (Android only)
minutes[00,05,10,15...]Array<string>Custom minutes array (Android only)
format24falsebooleanTime format (Android only)
startDatecurrent dateDateMin Date (Android only)
daysCount365numberDays count to display from start date (Android only)
hideDatefalsebooleanHide days picker (Android only)
hideHoursfalsebooleanHide hours picker (Android only)
hideMinutesfalsebooleanHide minutes picker (Android only)
hideAMfalsebooleanHide time format picker (Android only)

Questions or suggestions?

Feel free to open an issue