DEV Community

Civan Özseyhan
Civan Özseyhan

Posted on • Edited on

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:

GitHub logo 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.

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


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

Explore with Expo Snack

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)