react-native-wido-picker
v1.0.1
Published
A Picker component for React Native which emulates the native <select> interfaces for each platform
Downloads
3
Maintainers
Readme
react-native-wido-picker
Getting started
$ npm install react-native-wido-picker --save
##Props
| Name | Description | Details |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| onValueChange
| Callback which returns value, index
| requiredfunction |
| 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 | requiredarray |
| 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?