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
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
…
Top comments (0)