react-native-wido-picker

A Picker component for React Native which emulates the native <select> interfaces for each platform

Usage no npm install needed!

<script type="module">
  import reactNativeWidoPicker from 'https://cdn.skypack.dev/react-native-wido-picker';
</script>

README

react-native-wido-picker

Getting started

$ npm install react-native-wido-picker --save

Props

Name Description Details
onValueChange Callback which returns value, index required
function
items The items for the component to render
- Each item should be in the following format:
{label: 'Orange', value: 'orange', key: 'orange', color: 'orange'}
- The label and the value are required
- The key and color are optional
- The key will be set to the label if not included
- The value can be any data type
required
array
placeholder - An override for the default placeholder object with a label of Select an item... and a value of null
- An empty object can be used if you'd like to disable the placeholder entirely
object
disabled Disables interaction with the component boolean
value Will attempt to locate a matching item from the items array by checking each item's value property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. any
itemKey Will attempt to locate a matching item from the items array by checking each item's key property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by value as above. string, number
style Style overrides for most parts of the component.
More details in styling
object
pickerProps Additional props to pass to the Picker (some props are used in core functionality so use this carefully) object
Icon Custom icon component to be rendered.
More details in styling
Component
textInputProps Additional props to pass to the TextInput (some props are used in core functionality so use this carefully). This is iOS only unless useNativeAndroidPickerStyle={false}. object
useNativeAndroidPickerStyle
Android only
The component defaults to using the native Android Picker in its un-selected state. Setting this flag to false will mimic the default iOS presentation where a tappable TextInput is displayed.
More details in styling
boolean
hideDoneBar
iOS only
Hides the bar with tabbing arrows and Done link to exit the modal. While this is typical on select elements on the web, the interface guidelines does not include it. boolean
doneText
iOS only
"Done" default text on the modal. Can be overwritten here string
onUpArrow / onDownArrow
iOS only
Presence enables the corresponding arrow
- Closes the picker
- Calls the callback provided
function
onDonePress
iOS only
Callback when the 'Done' button is pressed function
onOpen / onClose
iOS only
Callback triggered right before the opening or closing of the picker function
modalProps
iOS only
Additional props to pass to the Modal (some props are used in core functionality so use this carefully) object

Usage

import RNWidoPicker from "react-native-wido-picker";

// TODO: What to do with the module?