React Native Picker

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

---

Preview

As many items as you want	Supports disabled items
Preview1.mov	Preview2.mov

---

Installation

npm install @dpelkey98/react-native-picker

Expo

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

---

Example

const items = useRef(
  Array.from(new Array(1000))
  .map((_, index) => ({
    value: `Option ${index+1}`
  }))
).current

...

<Picker
  data={items}
  defaultValue={"Option 13"}
  onChange={value => console.log(value)}
  itemHeight={45}
/>

---

Methods

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

---

Props

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

---

Types

Value

string | number

PickerItem

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

PickerData

Provided for convenience

PickerItem[]