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 :-: | :-: |

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

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[]