Note: this is a heavily modified fork, the original can be found here

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

Android-only WheelPicker (based on https://github.com/AigeStudio/WheelPicker) and DatePicker components that mimic their standard iOS counterparts (PickerIOS and DatePickerIOS, correspondingly).

DatePicker interface is mostly compatible with DatePickerIOS.

Installation

yarn add @delightfulstudio/react-native-wheel-picker-android

Auto linking

Note: Doesn't work with RN v0.55, not tested with v0.56

react-native link @delightfulstudio/react-native-wheel-picker-android

Manual linking

Open android/settings.gradle and add the following two lines right above include ':app':

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

Open android/app/build.gradle and add the following line to dependencies section:

compile project(':react-native-wheel-picker-android')

Open android/app/java/com/{your package name}/MainApplication.java and add the following line right below package com.{your package name}

import com.delightfulstudio.wheelpicker.WheelPickerPackage;

In the same file find method getPackages() and add new WheelPickerPackage() at the end of the returned array, like this:

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

Usage

import { WheelPicker, DatePicker } from '@delightfulstudio/react-native-wheel-picker-android'
import React, { Component } from 'react';
import {
    StyleSheet,
    View
} from 'react-native';

const wheelPickerData = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'];
const now = new Date()

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    wheelPicker: {
        width: 200,
        height: 150
    }
});

export default class MyPickers extends Component {
    render() {
        return (
            <View style={ styles.container }>
                <WheelPicker
                    onItemSelected={ this.onItemSelected }
                    isCurved
                    data={ wheelPickerData }
                    visibleItemCount={5}
                    style={ styles.wheelPicker }/>
                <DatePicker
                    date={ now }
                    mode="datetime"
                    onDateChange={ this.onDateSelected }/>
                <DatePicker
                    date={ now }
                    mode="time"
                    onDateChange={ this.onTimeSelected }/>
            </View>
        );
    }

    onItemSelected = event => {
        // do something
    };

    onDateSelected = date => {
        // do something
    };

    onTimeSelected = date =>{
        // do something
    };
}

To check out working example:

1. Clone this repo
2. Install root packages: yarn or npm install
3. Install example packages: in the example folder, do yarn or npm install
4. Start metro server: in the example folder, do yarn start or npm start
5. Compile/start Android app: in the example folder, do yarn run-android or npm run-android

Wheel Picker

import { WheelPicker } from '@delightfulstudio/react-native-wheel-picker-android'
...

    render() {
        const arr = [1,2,3];
        return (
        <WheelPicker
            onItemSelected={ event => {/* do something */} }
            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
indicatorSize	5	number	Indicator stroke size
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'	enum('left', 'center', 'right')	Wheel Picker's items text alignment
selectedItemPosition	null	number	Select current item position
backgroundColor	transparent	string	Wheel Picker background color
allowFontScaling	false	bool	Font scaling based on Pixel Ratio

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 }

Date Picker

import { DatePicker } from '@delightfulstudio/react-native-wheel-picker-android'
...

    render() {
        const now = new Date();
        return (
            <DatePicker
                date={ now }
                mode="datetime"
                onDateChange={ this.onDateSelected }/>
        );
    }

    onDateSelected = date => {
        // do something
    };
...

Props

Prop	Required	Default	Type	DatePickerIOS	Description
date	[ ]	now	Date	[x]	The currently selected date
onDateChange	[x]	null	func	[x]	Date change handler
minimumDate	[ ]	maximumDate - 1 year or date	Date	[x]	Minimum date - restricts the range of possible date/time values
maximumDate	[ ]	minimumDate + 1 year	Date	[x]	Maximum date - restricts the range of possible date/time values
minuteInterval	[ ]	1	enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)	[x]	The interval at which minutes can be selected
mode*	[ ]	'date'	enum('date', 'time', 'datetime')	[x]	The date picker mode
locale**	[ ]		Locale ID	[x]	The locale for the date picker
style***	[ ]	null	obj	[x]	The control container style
styles****	[ ]		{ picker, date, hours, minutes, gap, AM }	[ ]	The control part styles - allows to adjust control internal layout, each property is an object with style properties, ex: { picker: { height: 100 } }
todayTitle	[ ]	'Today'	string	[ ]	The title for today date item

* mode: 'date' doesn't support year selection, therefor it is not suitable for large range of dates, ex: birthdays.

** locale: "<locale id>" support is limited to 12/24 mode and names of months and days, it also requires explicit import 'moment/locale/<locale id>' somewhere in your script for any non-english locales to work properly.

*** style can be used to change background color and surrounding margin/padding

**** styles were tested only with size, padding and margin style properties, other properties may not work

Questions or suggestions?

Feel free to open an issue