A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
npm install react-native-modal-selectorA cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
This project is the official continuation of the abandoned react-native-modal-picker repo. Contributors are welcome to request a promotion to collaborator status.

``sh`
npm install react-native-modal-selector
You can either use this component in its default mode, as a wrapper around your existing component or provide a custom component (where you need to control opening of the modal yourself). In default mode a customizable button is rendered.
See SampleApp for an example how to use this component.
`jsx
import ModalSelector from 'react-native-modal-selector'
class SampleApp extends Component {
constructor(props) {
super(props);
this.state = {
textInputValue: ''
}
}
render() {
let index = 0;
const data = [
{ key: index++, section: true, label: 'Fruits' },
{ key: index++, label: 'Red Apples' },
{ key: index++, label: 'Cherries' },
{ key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
// etc...
// Can also add additional custom keys which are passed to the onChange callback
{ key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
];
return (
// Default mode
initValue="Select something yummy!"
onChange={(option)=>{ alert(${option.label} (${option.key}) nom nom nom) }} />
// Wrapper
initValue="Select something yummy!"
supportedOrientations={['landscape']}
accessible={true}
scrollViewAccessibilityLabel={'Scrollable options'}
cancelButtonAccessibilityLabel={'Cancel Button'}
onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
editable={false}
placeholder="Select something yummy!"
value={this.state.textInputValue} />
// Custom component
ref={selector => { this.selector = selector; }}
customSelector={
/>
);
}
}
`
The selector accepts a specific format of data:
`javascript`
[{ key: 5, label: 'Red Apples' }]
Optionally provide a component key which overrides the default label text. Optionally provide a unique testID for each item:`javascript`
[{
key: 5,
label: 'Red Apples',
// The next keys are optional --
component:
testID: '5-red-apples'
}]

If your data has a specific format, you can define extractors of data, example:
`javascript
this.setState({data: [{ id: 5, name: 'Red Apples' }]});
return (
keyExtractor= {item => item.id}
labelExtractor= {item => item.name}
/>
);
`
Prop | Type | Optional | Default | Description
------------------- | -------- | -------- | ------------ | -----------
data | array | No | [] | array of objects with a unique key and label to select in the modal. Optional component overrides label text. Optional unique testID for each item.onChange | function | Yes | () => {} | callback function, when the users has selected an optiononModalOpen | function | Yes | () => {} | callback function, when modal is openingonModalClose | function | Yes | (item) => {} | callback function, when modal is closing. Returns the selected item.keyExtractor | function | Yes | (data) => data.key | extract the key from the data itemlabelExtractor | function | Yes | (data) => data.label | extract the label from the data itemcomponentExtractor| function | Yes | (data) => data.component | extract the component from the data itemvisible | bool | Yes | false | control open/close state of modalcloseOnChange | bool | Yes | true | control if modal closes on selectinitValue | string | Yes | Select me! | text that is initially shown on the buttoncancelText | string | Yes | cancel | text of the cancel buttondisabled | bool | Yes | false | true disables opening of the modalsupportedOrientations | ['portrait', 'landscape'] | Yes | both | orientations the modal supportskeyboardShouldPersistTaps| string / bool | Yes | always | passed to underlying ScrollViewlistType | string | Yes | SCROLLVIEW | scroller type: SCROLLVIEW or FLATLISTanimationType | string | Yes | slide | type of animation to be used to show the modal. Must be one of none, slide or fade.style | object | Yes | | style definitions for the root elementchildrenContainerStyle| object | Yes | {} | style definitions for the children container viewtouchableStyle | object | Yes | {} | style definitions for the touchable elementtouchableActiveOpacity | number | Yes | 0.2 | opacity for the touchable element on touchselectStyle | object | Yes | {} | style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop.selectTextStyle | object | Yes | {} | style definitions for the select element (available in default mode only!)overlayStyle | object | Yes | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.sectionStyle | object | Yes | {} | style definitions for the section elementsectionTextStyle | object | Yes | {} | style definitions for the select text elementselectedItemTextStyle | object | Yes | {} | style definitions for the currently selected text elementoptionStyle | object | Yes | {} | style definitions for the option elementoptionTextStyle | object | Yes | {} | style definitions for the option text elementoptionContainerStyle| object | Yes | {} | style definitions for the option container elementcancelStyle | object | Yes | {} | style definitions for the cancel elementcancelTextStyle | object | Yes | {} | style definitions for the cancel text elementinitValueTextStyle| object | Yes | {} | style definitions for the initValue text elementcancelContainerStyle| object | Yes | {} | style definitions for the cancel containerbackdropPressToClose| bool | Yes | false | true makes the modal close when the overlay is pressedpassThruProps| object | Yes | {} | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)selectTextPassThruProps| object | Yes | {} | props to pass through to the select text componentoptionTextPassThruProps| object | Yes | {} | props to pass through to the options text components in the modalcancelTextPassThruProps| object | Yes | {} | props to pass through to the cancel text components in the modalscrollViewPassThruProps| object | Yes | {} | props to pass through to the internal ScrollViewopenButtonContainerAccessible| bool | Yes | false | true enables accessibility for the open button container. Note: if false be sure to define accessibility props directly in the wrapped component.listItemAccessible| bool | Yes | false | true enables accessibility for data items. Note: data items should have an accessibilityLabel property if this is enabledcancelButtonAccessible| bool | Yes | false | true enables accessibility for cancel button.scrollViewAccessible| bool | Yes | false | true enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items.scrollViewAccessibilityLabel | string | Yes | undefined | Accessibility label for the modal ScrollViewcancelButtonAccessibilityLabel | string | Yes | undefined | Accessibility label for the cancel buttonmodalOpenerHitSlop | object | Yes | {} | How far touch can stray away from touchable that opens modal (RN docs)customSelector | node | Yes | undefined | Render a custom node instead of the built-in select box.selectedKey | any | Yes | '' | Key of the item to be initially selectedenableShortPress | bool | Yes | true | enables short press. This is regular touch behavior.enableLongPress | bool | Yes | false | enables long press. When true, onModalOpen returns {longPress: true}optionsTestIDPrefix | string | Yes | 'default' | This prefixes each selectable option's testID prop if no testID keys are provided in props.data array objects. Default for each option's testID: 'default-\header | node | Yes | undefined | Render a header above the listonEndReached | function | Yes | undefined | Called once when the scroll position gets of the rendered content.
* open(): open the modal.close()
* : close the modal.getSelectedItem()`: get current selected item, updated by onChange event.
*
* A similar project is hepter/react-native-modal-selector-searchable, which is a fork of this module that adds searching capabilities.