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".
$ npm install react-native-picker-modal-view --save
or
$ yarn add react-native-picker-modal-view
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 (
<SafeAreaView style={{ flex: 1, justifyContent: 'center', marginHorizontal: 20 }}>
<PickerModal
renderSelectView={(disabled, selected, showModal) =>
<Button disabled={disabled} title={'Show me!'} onPress={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}
/>
<View style={{ padding: 10, alignItems: 'center', backgroundColor: '#ddd' }}>
<Text>Chosen: </Text>
<Text>{JSON.stringify(selectedItem)}</Text>
</View>
</SafeAreaView>
);
}
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');
}
}
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 | <SelectBoxComponent (built-in)> |
renderListItem | Element |
Render List item | <ListItemComponent (built-in)/> |
alphabeticalIndexChars | array |
Chracters array for the alphabetical index | <Turkish alphabet chracters> |
searchInputTextColor | string |
Search input placeholder text color | "#252525" |
keyExtractor | Function |
Flatlist defined {key} function | <Predefined return map index> |
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 | `` |
Properties | Type | Description | Default |
---|---|---|---|
ModalProps | object |
React Native Modal Props | |
FlatListProps | object |
React Native Flatlist Props | |
SearchInputProps | object |
React Native TextInput Props |
You should have React Expo CLI to be installed in order to run example. Follow this instructions if you need to install Expo CLI.
Install the dependencies:
npm install
Once the installation is done, you can run the following command:
npm
npm start
You can also use:
expo
expo start
yarn
expo start