WheelPickerA customizable WheelPicker component

UX Guidelines

Dev

UsageCode Example

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

APIThis is the list of additional props for the component

activeTextColor

string

Text color for the focused row

align

WheelPickerAlign

Align the content to center, right ot left. Default is center

flatListProps

FlatListProps

Props to be sent to the FlatList.

inactiveTextColor

string

Text color for other, non-focused rows

initialValue

number | string

Initial value (uncontrolled)

itemHeight

number

Height of each item in the WheelPicker. Default is 44

items

WheelPickerItemProps[]

Data source for WheelPicker

label

string

Additional label to render next to the items text

labelProps

TextProps

Additional label's props

labelStyle

TextStyle

Additional label's style

numberOfVisibleRows

number

Number of rows visible. Default is 5

onChange

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

Change item event callback

separatorsStyle

ViewStyle

Extra style for the separators

style

ViewStyle

Container's custom styleheight is computed according to itemHeight * numberOfVisibleRows

testID

string

test identifier

textStyle

TextStyle

Row text custom style