Skip to content

valudio/ReactNativeWheelPicker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Prop Default Type Description
onItemSelected - func Returns selected position
data - Array<string> Data array
isCyclic false bool Make Wheel Picker cyclic
selectedItemTextColor black string Wheel Picker's selected Item text color
selectedItemTextSize 16 number Wheel Picker's selected Item text size
selectedItemTextFontFamily - font-family Wheel Picker's selected Item font
itemTextColor grey string Wheel Picker's Item Text Color
itemTextSize 16 number Wheel Picker's Item text size
itemTextFontFamily - font-family Wheel Picker's Item font
selectedItem 0 number Current item position
initPosition 0 number Initial item position
indicatorColor black string Indicator color
hideIndicator - boolean Hide indicator
indicatorWidth 1 number Indicator width
backgroundColor transparent string Wheel Picker background color

Time Picker

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

Props

Prop Default Type Description
...WheelPicker props - - All style WheelPicker props
initDate current date Date Initial date
onTimeSelected - func Callback with selected time
hours [1,2,3,4...] Array<string> Custom hours array
minutes [00,05,10,15...] Array<string> Custom minutes array
format24 false boolean Time format

Date Picker

For IOs DatePickerIOS is used

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

Props

Prop Default Type Description
DatePickerIOS props - - All DatePickerIOS props (IOS only)
initDate current date Date Initial date
onDateSelected - func Callback 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)
format24 false boolean Time format (Android only)
startDate current date Date Min Date (Android only)
daysCount 365 number Days count to display from start date (Android only)
hideDate false boolean Hide days picker (Android only)
hideHours false boolean Hide hours picker (Android only)
hideMinutes false boolean Hide minutes picker (Android only)
hideAM false boolean Hide time format picker (Android only)

Questions or suggestions?

Feel free to open an issue

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 62.4%
  • JavaScript 37.6%