Home

Awesome

<div align="center"> <img src="screenshots/ios.gif" width="200" height="400"> <img src="screenshots/android.gif" width="200" height="400"> </div> <br/> <br/> <div align="center"><h3>React Native Picker Modal View<h3></div> <div align="center">React Native Module to select item picker modal.</div> <br/> <div align="center">

Maintainability Test Coverage npm version npm downloads per month dependencies Status dev-dependencies Status Build Status Meercode CI Score

</div> <br/> <div align="center"> <sub>Created by <a href="https://www.pankod.com">Pankod</a></sub> </div> <br/>

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

$ npm install react-native-picker-modal-view --save

or

$ yarn add react-native-picker-modal-view
<!-- ## Usage -->

Live Demo with Expo

<div align="center">

Explore with Expo Snack

</div>

Example

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');
	}
}
<br/>

Options

<br/>
PropertiesTypeDescriptionDefault
modalAnimationTypestringThe RN Modal show/hide animation type"slide"
showAlphabeticalIndexbooleanHides alphabetical index"true"
onClosedFunctionFired when the modal is closed
onBackButtonPressedFunctionFired when the back key is pressed
onSelected <br> *requiredFunctionReturns selected item object"{Id, Name, Value, [key: string]: any}"
items <br> *requiredarrayArray of list items"[{Id, Name, Value, [key: string]: any}]"
renderSelectViewElementRender Select Component<SelectBoxComponent (built-in)>
renderListItemElementRender List item<ListItemComponent (built-in)/>
alphabeticalIndexCharsarrayChracters array for the alphabetical index<Turkish alphabet chracters>
searchInputTextColorstringSearch input placeholder text color"#252525"
keyExtractorFunctionFlatlist defined {key} function<Predefined return map index>
autoGenerateAlphabeticalIndexbooleanAuto-generates alphabetical index from list items data"false"
sortingLanguagestringCountry ISO (Alpha 2) Code for localeCompare"tr"
showToTopButtonbooleanButton for scroll to offset 0"true"
onEndReachedFunctionFired when the list reaches the end
selectPlaceholderTextstringSelect box placeholder text"Choose one..."
searchPlaceholderTextstringSearch input placeholder text"Search..."
selectedobjectDefault selected item
autoSortbooleanAuto-sort data list"false"
disabledbooleanDisable Select box
requireSelectionbooleanRequire at least one list item is selected"false"
backButtonDisabledbooleanHide to back button"false"
renderSearchFunctionRender custom search input``

Core Props of React Native

<br/>
PropertiesTypeDescriptionDefault
ModalPropsobjectReact Native Modal Props
FlatListPropsobjectReact Native Flatlist Props
SearchInputPropsobjectReact Native TextInput Props
<br/> <br/>

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.

    <br/>

  2. Install the dependencies:

npm install
  1. Once the installation is done, you can run the following command:

npm

npm start

You can also use:

expo

expo start

yarn

expo start
<br/>

Notes

Releases