An unified alternative to React Native Picker Component

React Native ships with a Picker Component providing bindings to native implementations of this most basic UI element. It renders as an UIPickerView on iOS and as a Spinner on Android devices:

As seen on the demos, the output is totally different on iOS and Android. If you want a consistent look & feel on both platforms, official React Picker component is definitely not the way to go.

Another issue with the stock component is platform-specific props, which causes you to add platform-specific code to your project to make it work on both platforms.

We took an alternative approach and developed a modal-view based list picker component. It renders consistently on both platforms and provides an unified API.

Additionally, the component includes built-in support for text search and alphabetical index which makes it ideal for longer lists not suitable for "wheel pickers":

If you want it give a try, a live demo can be seen on Expo and the full source code with complete API documentation is available on Github:

pankod / react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View

React Native Module to select item picker modal.

_{Created by Pankod}

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():

…

View on GitHub