cclion/react-native-picky

An awesome native wheel picker component for React Native.

⛏️ react-native-picky

An awesome native wheel picker component for react-native.

Features

• Supports multiple columns ✅

• Supports looping ✅

• Native Android and iOS components for improved performance ✅

• Typescript ✅

Preview

Preview	iOS	Android
Single Column
Multiple Columns with looping

Installation

yarn add react-native-picky

Quick Start

import { Picker, PickerColumn, PickerItem } from 'react-native-picky';

export const Demo = () => (
  <Picker>
    <PickerColumn>
      <PickerItem label="Monday" value="Monday" />
      <PickerItem label="Tuesday" value="Tuesday" />
      <PickerItem label="Wednesday" value="Wednesday" />
      <PickerItem label="Thursday" value="Thursday" />
      <PickerItem label="Friday" value="Friday" />
    </PickerColumn>
  </Picker>
);

Props

<Picker />

Property	Type	Description	Platform	Default
loop	boolean	Enable looping options	iOS, Android	false
style	object	View style prop	iOS, Android
onChange	function	A callback function when a value is changed in any column	iOS, Android
numberOfLines	number	The number of lines for each row in a column	iOS	1
hasCurtain	boolean	Enable the curtain to highlight the selected value	Android	true
curtainColor	string	Color of the curtain	Android	hsla(0, 0%, 0%, 0.1)
hasIndicator	boolean	Enable the indicator to highlight the selected value	Android	true
indicatorColor	string	Color of the indicator	Android	hsla(0, 0%, 0%, 0.1)
indicatorSize	number	The size of the indicator	Android	1
itemSpace	number	The amount of space between items	Android	12
textColor	string	The color of the item text	Android	#000000
textSize	number	The size of the item text	Android	20

<PickerColumn />

Property	Type	Description	Platform	Default
selectedValue	string | number	The selected value	iOS, Android
onChange	function	A callback function if the value is changed in this column	iOS, Android
width	number	The width of this column	iOS, Android	Takes up the available space

<PickerItem />

Property	Type	Description	Platform	Default
label	string	The label of the item	iOS, Android
value	string | number	The value of the item	iOS, Android
testID	string	The testID of the item	iOS
color	string	The color of the item text	iOS

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT