An alternative to [Picker](https://facebook.github.io/react-native/docs/picker) and [PickerIOS](https://facebook.github.io/react-native/docs/pickerios) components with an unified API and consistent look & feel on both plaforms. It's fully configurable and includes built-in support for text search and alphabetical index. Ideal for longer lists not suitable for "wheel-pickers".
## Getting started
```
$ npm install react-native-picker-modal-view --save
```
or
```
$ yarn add react-native-picker-modal-view
```
## Live Demo with Expo
[](https://snack.expo.io/@pankod/github.com-pankod-react-native-picker-modal-view:example)
## Example
```javascript
import * as React from 'react';
import { Button, SafeAreaView, Text, View } from 'react-native';
import PickerModal from 'react-native-picker-modal-view';
import data from '../../../top20.json';
export default class Main extends React.Component<{}, { selectedItem: {} }> {
constructor(props: {}) {
super(props);
this.state = {
selectedItem: {}
};
}
public render(): JSX.Element {
const { selectedItem } = this.state;
return (
}
onSelected={this.onSelected.bind(this)}
onClosed={this.onClosed.bind(this)}
onBackButtonPressed={this.onBackButtonPressed.bind(this)}
items={data}
sortingLanguage={'tr'}
showToTopButton={true}
selected={selectedItem}
showAlphabeticalIndex={true}
autoGenerateAlphabeticalIndex={true}
selectPlaceholderText={'Choose one...'}
onEndReached={() => console.log('list ended...')}
searchPlaceholderText={'Search...'}
requireSelection={false}
autoSort={false}
/>
Chosen: {JSON.stringify(selectedItem)}
);
}
private onClosed(): void {
console.log('close key pressed');
}
private onSelected(selected: any): void {
this.setState({ selectedItem: selected });
return selected;
}
private onBackButtonPressed(): void {
console.log('back key pressed');
}
}
```
## Options
| Properties | Type | Description | Default |
| --------------------------------- | ---------- | ------------------------------------------------------ | ------------------------------------------- |
| **modalAnimationType** | `string` | The RN Modal show/hide animation type | `"slide"` |
| **showAlphabeticalIndex** | `boolean` | Hides alphabetical index | `"true"` |
| **onClosed** | `Function` | Fired when the modal is closed | |
| **onBackButtonPressed** | `Function` | Fired when the back key is pressed | |
| **onSelected** **required* | `Function` | Returns selected item object | `"{Id, Name, Value, [key: string]: any}"` |
| **items** **required* | `array` | Array of list items | `"[{Id, Name, Value, [key: string]: any}]"` |
| **renderSelectView** | `Element` | Render Select Component | `` |
| **renderListItem** | `Element` | Render List item | `` |
| **alphabeticalIndexChars** | `array` | Chracters array for the alphabetical index | `` |
| **searchInputTextColor** | `string` | Search input placeholder text color | `"#252525"` |
| **keyExtractor** | `Function` | Flatlist defined {key} function | `` |
| **autoGenerateAlphabeticalIndex** | `boolean` | Auto-generates alphabetical index from list items data | `"false"` |
| **sortingLanguage** | `string` | Country ISO (Alpha 2) Code for localeCompare | `"tr"` |
| **showToTopButton** | `boolean` | Button for scroll to offset 0 | `"true"` |
| **onEndReached** | `Function` | Fired when the list reaches the end | |
| **selectPlaceholderText** | `string` | Select box placeholder text | `"Choose one..."` |
| **searchPlaceholderText** | `string` | Search input placeholder text | `"Search..."` |
| **selected** | `object` | Default selected item | |
| **autoSort** | `boolean` | Auto-sort data list | `"false"` |
| **disabled** | `boolean` | Disable Select box | |
| **requireSelection** | `boolean` | Require at least one list item is selected | `"false"` |
| **backButtonDisabled** | `boolean` | Hide to back button | `"false"` |
| **renderSearch** | `Function` | Render custom search input | `` |
# Core Props of React Native
| Properties | Type | Description | Default |
| -------------------- | -------- | ---------------------------- | ------- |
| **ModalProps** | `object` | React Native Modal Props | |
| **FlatListProps** | `object` | React Native Flatlist Props | |
| **SearchInputProps** | `object` | React Native TextInput Props | |
