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

Live Demo with Expo

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

Options

Core Props of React Native

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:

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