@dpelkey98/react-native-picker NPM

React Native Picker

A dead simple, performant React Native Picker using Shopify's FlashList and React Native Reanimated

As many items as you want	Supports disabled items

npm install @dpelkey98/react-native-picker

The picker uses Reanimated under the hood. In order for it to work with Expo you need to install your specific SDK version

npx expo install react-native-reanimated

Refer to Reanimated's getting started guide

Method	Params	Description
`.setValue()`	Value	Set the currently selected value of the picker

Prop	Value	Default	Description
`data`	PickerData	`[]`	Data to render in your picker; `value` must be unique
`defaultValue?`	Value	`undefined`	Automatically scrolls and selects the specified value
`disabled?`	`boolean`	`false`	Disable the picker
`onChange?`	`(PickerItem) => void`	`undefined`	Callback function passed with a PickerItem
`itemHeight?`	`number`	`40`	Height of each item in the picker
`numberOfItems?`	`3 \\| 5 \\| 7`	`5`	Height of the picker; `numberOfItems*itemHeight`
`showsBar?`	`boolean`	`true`	Whether or not to display the center bar (grey bar in the videos above)
`barStyle?`	`ViewStyle`	`undefined`	Styles to apply to center bar
`barColor?`	`string`	`#efefef`	Convenience prop to only change the bar color
`itemTextStyle?`	`TextStyle`	`undefined`	Styles to apply to each picker item's text component
`itemDisabledTextStyle?`	`TextStyle`	`undefined`	Styles to apply to each disabled picker item's text component
`itemStyle?`	`Omit<ViewStyle, "height">`	`undefined`	Styles to apply to each picker item's container component
`itemDisabledStyle?`	`Omit<ViewStyle, "height">`	`undefined`	Styles to apply to each disabled picker item's container component
`style?`	`Omit<ViewStyle, "height">`	`undefined`	Styles to apply to the picker's container component

string | number

{
  label?: string;
  value: Value;
  disabled?: boolean;
}

Provided for convenience

PickerItem[]

5 months ago