kresnaputra/react-native-wheel-datepicker

Android & iOS iOS-style Picker & DatePicker Components for ReactNative

@davidgovea/react-native-wheel-datepicker

A iOS style picker and datepicker components for ReactNative.

• Original repository by @lesliesam: react-native-wheel-picker.
• Fork by @wusuopu who added the real cross platform behavior and datepicker react-native-wheel-picker.
• Fork by @pinguinjkeke, who provided maintenance and fixes react-native-wheel-datepicker

This is the fourth fork of repository, since it seems that @pinguinjkeke is no longer supporting react-native-wheel-datepicker.

Goals of this fork:

• Maintenance / updates for RN & platform changes
• Implement some missing features on Android (12-hour AM/PM mode, minute intervals)
• Typescript definitions
• Add tests
• Semver adherance

Introduction

Cross platform Picker component for React-native.

Since picker is originally supported by iOS while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this.

The android component is based on wheel-picker which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker.

Installation

npm i @davidgovea/react-native-wheel-datepicker --save

Configration (for RN below 0.60):

react-native link @davidgovea/react-native-wheel-datepicker

<Picker> Component

import { Picker } from '@davidgovea/react-native-wheel-datepicker';

<Picker
  style={{ flex: 1 }}
  selectedValue={3}
  pickerData={[1, 2, 3, 4, 5, 6]}
  onValueChange={value => { console.log(value); }}
/>

Picker props

Property	Type	Default	Description
pickerData	any[]	-	Required: an array of data to display in picker
onValueChange	(value: any) => void	-	Required: selected value changed callback
selectedValue	any?	First item of pickerData	Set/control the selected value
textColor	string	'#333'	(Android only) Color of spinner text
textSize	number	26	(Android only) Spinner text size
itemSpace	number	20	(Android only) Spacing between spinner items
itemStyle	style	null	(iOS only) passed into PickerIOS for item styling
style	style	null	Style applied to the picker element

---

<DatePicker> Component

import { DatePicker } from '@davidgovea/react-native-wheel-datepicker';

<DatePicker
  mode="datetime"
  use12Hours
  minuteInterval={15}
  onDateChange={(date) => { console.log(date); }}
/>

DatePicker props

Property	Type	Default	Description
onDateChange	(value: Date) => void	-	Required: selected date changed callback
mode	enum('date', 'time', 'datetime')	'date'	Show date, time, or both in picker
date	Date	new Date() (now)	Provide/control the selected date value
maximumDate	Date	10 years in future	Restricts the range of possible date/time values.
minimumDate	Date	10 years in past	Restricts the range of possible date/time values.
minuteInterval	enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)	1	The interval at which minutes can be selected.
use12Hours	boolean	false	(Android only) Use 12-hour AM/PM for hour selection. On iOS, DatePickerIOS automatically uses i18n information to enable 12-hour mode.
order	custom string	'D-M-Y'	(Android only) Ordering of date fields. Use "D" for day, "M" for month, "Y" for year, separated by dashes ("-")
labelUnit	{ year: string, month: string, date: string }	{ year: '', month: '', date: '' }	(Android only) Suffix labels for year, month, date values
textColor	string	'#333'	(Android only) Color of spinner text
textSize	number	26	(Android only) Spinner text size
itemSpace	number	20	(Android only) Spacing between spinner items
style	style	null	Style applied to the datepicker element

[DEPRECATED] Integration with CustomDatePickerIOS

CustomDatePickerIOS can apparently cause Appstore approval issues. This library will be removing iOS functionality in a future release. Users are advised to use the builtin Pickers on iOS.

By default, package provides default DatePickerIOS on the iOS side to simplify usage on both platforms.

You can install react-native-custom-datepicker-ios package if you need textColor functionality on IOS platform.

Just install:

npm i react-native-custom-datepicker-ios
// or
yarn add react-native-custom-datepicker-ios

link dependencies:

react-native link react-native-custom-datepicker-ios

And register CustomDatePickerIOS inside react-native-wheel-datepicker package.

import { registerCustomDatePickerIOS } from '@davidgovea/react-native-wheel-datepicker';
import CustomDatePickerIOS from 'react-native-custom-datepicker-ios';

registerCustomDatePickerIOS(CustomDatePickerIOS);

Then you can use textColored components for both platforms inside render function!

import { DatePicker } from '@davidgovea/react-native-wheel-datepicker';

// ...
render() {
  return (
    <DatePicker
      mode="date"
      textColor="green"
    />
  )
}