Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-wheel-picker-android with all npm packages installed. Try it out:

var reactNativeWheelPickerAndroid = require("react-native-wheel-picker-android")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-wheel-picker-android v2.0.5

Simple Wheel Picker for Android to use with react-native

React native wheel picker V2

A simple Wheel Picker for Android (For IOs is used PickerIOS)

Installation

yarn add react-native-wheel-picker-android

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
indicatorColorblackstringIndicator color
hideIndicator-booleanHide indicator
indicatorWidth1numberIndicator width
backgroundColortransparentstringWheel Picker background color

Time Picker

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

Props

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free