@omerman/react-native-wheel-picker-android

1.1.1 • Public • Published

ReactNativeWheelPicker

npm version npm version

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

Prop Default Type Description
onItemSelected null func Callback when user select item {data: 'itemData', position: 'itemPosition'}
data default string array array Data array (string or number type)
isCurved false bool Make Wheel Picker curved
isCyclic false bool Make Wheel Picker cyclic
isAtmospheric false bool Design Wheel Picker's items
selectedItemTextColor grey string Wheel Picker's selected Item Text Color
itemSpace 20 number Wheel Picker's items spacing
visibleItemCount 7 number Wheel Picker's items max visible count
renderIndicator false bool Show Wheel Picker indicator
indicatorColor transparent string Indicator color
isCurtain false bool Wheel Picker curtain
curtainColor transparent string Wheel Picker curtain color
itemTextColor grey string Wheel Picker's items color
itemTextSize 20 number Wheel Picker's items text size
itemTextFontFamily null string Wheel Picker's items text font name
itemTextAlign center string (left/right/center) Wheel Picker's text alignment
selectedItemPosition null number Select current item position
backgroundColor transparent string Wheel Picker background color

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

Prop Default Type Description
onTimeSelected null func Callback when user select time {date: 'selectedTime'}
initDate current date ISOString Initial selected time
hours [1, 2, 3, .. 12] array hours array
minutes ['00', '05' ,'10', .. '55'] array minutes array

Date Picker

...

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

  onDateSelected(date){
    // do something
  }

Props

Prop Default Type Description
onDateSelected null func Callback when user select date {date: 'selectedDate'}
initDate current date ISOString Initial selected date
days ['Today', 'Wed Dec 28', ...] array days array
hours [1, 2, 3 .. 12] array hours array
minutes ['00', '05', '10', .. '55'] array minutes array
format24 false bool if true hours format is 24 hours
startDate current date ISOString The Earlest date
daysCount 365 number How many days included in Date Picker

Questions or suggestions?

Feel free to open an issue

Dependencies (1)

Dev Dependencies (8)

Package Sidebar

Install

npm i @omerman/react-native-wheel-picker-android

Weekly Downloads

10

Version

1.1.1

License

MIT

Last publish

Collaborators

  • omerman