Skip to main content
Version: 7.0.0

WheelPicker

A customizable WheelPicker component
(code example)

note

When using Android by default the FlatList will have maxToRenderPerBatch prop set to items.length to solve FlatList bug on Android, you can override it by passing your own flatListProps with maxToRenderPerBatch prop.
See the RN FlatList issue for more info: https://github.com/facebook/react-native/issues/15990

Usage​

Live Editor
<WheelPicker
  items={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}, {label: 'Maybe', value: 'maybe'}]}
  initialValue={'yes'}
  onChange={() => console.log('changed')}
/>
Result
Loading...

API​

activeTextColor​

Text color for the focused row string

align​

Align the content to center, right ot left WheelPickerAlign

flatListProps​

Props to be sent to the FlatList. FlatListProps

inactiveTextColor​

Text color for other, non-focused rows string

initialValue​

Initial value (uncontrolled) number | string

itemHeight​

Height of each item in the WheelPicker number

items​

Data source for WheelPicker WheelPickerItemProps[]

label​

Additional label to render next to the items text string

labelProps​

Additional label's props TextProps

labelStyle​

Additional label's style TextStyle

numberOfVisibleRows​

Number of rows visible number

onChange​

Change item event callback (item: string | number, index: number) => void

separatorsStyle​

Extra style for the separators ViewStyle

style​

height is computed according to itemHeight * numberOfVisibleRows​

Container's custom style ViewStyle

testID​

test identifier string

textStyle​

Row text custom style TextStyle