An alternative to Picker and 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

`
$ yarn add react-native-picker-modal-view
`

Live Demo with Expo

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 (

renderSelectView={(disabled, selected, showModal) =>

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









Running example project

1. You should have React Expo CLI to be installed in order to run example. Follow this instructions if you need to install Expo CLI.




2. Install the dependencies:

`sh
npm install
`

3. Once the installation is done, you can run the following command:

npm
`
npm start
`
You can also use:

expo
`
expo start
`

yarn
`
expo start
``

#### Notes

- Auto-alphabetical index supported for Turkish and English languages.

#### Releases

- 1.3.2 - Added renderSearch feature #54 Thanks to @murilo-campaner
- 1.3.1 - Fixed #44 Thanks to @fnando
- 1.3.0 - No back button support #42 Thanks to @ChildishForces
- 1.2.8 - Fixed #37
- 1.2.6 - Deprecated lifecycle methods fix
- 1.2.5 - Flatlist initialNumToRender property hotfix
- 1.2.3 - Refactor and code coverage
- 1.2.2 - Fixed #5
- 1.2.0 - Added renderSelectView and renderListItem properties.
- 1.0.0 - Initial release