React native wheel picker android

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

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 .

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

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

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

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

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

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

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

To check out working example:

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

Prop	Default	Type	Description
onItemSelected	null	func	Callback when user select item
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

An array of options. This should be provided with an array of strings or array of numbers.

Callback with event in the form event =

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****	[ ]		[ ]	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: support is limited to 12/24 mode and names of months and days, it also requires explicit import ‘moment/locale/‘ 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

Источник