# react-native-wheel-picker [![npm version](http://img.shields.io/npm/v/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm") [![npm version](http://img.shields.io/npm/dm/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm") ## Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this. The android component is based on https://github.com/AigeStudio/WheelPicker which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker. ![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo.gif) ![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo_android.gif) ## How to use Run command For apps using RN 0.32 or higher, please run ``` npm i react-native-wheel-picker --save ``` For apps using RN 0.31 or less, please run ``` npm install --save --save-exact react-native-wheel-picker@1.0.1 ``` Add in settings.gradle ``` include ':react-native-wheel-picker' project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android') ``` Add in app/build.gradle ``` compile project(':react-native-wheel-picker') ``` Modify MainApplication ``` import com.zyu.ReactNativeWheelPickerPackage; ...... protected List getPackages() { return Arrays.asList( new MainReactPackage(), new ReactNativeWheelPickerPackage() ); } ``` ## Example code ``` import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, } from 'react-native'; import Picker from 'react-native-wheel-picker' var PickerItem = Picker.Item; export default class App extends Component<{}> { constructor(props) { super(props); this.state = { selectedItem : 2, itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮'] }; } onPickerSelect (index) { this.setState({ selectedItem: index, }) } onAddItem = () => { var name = '司马懿' if (this.state.itemList.indexOf(name) == -1) { this.state.itemList.push(name) } this.setState({ selectedItem: this.state.itemList.indexOf(name), }) } render () { return ( Welcome to React Native! this.onPickerSelect(index)}> {this.state.itemList.map((value, i) => ( ))} 你最喜欢的是：{this.state.itemList[this.state.selectedItem]} 怎么没有司马懿？ ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1962dd', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: '#ffffff', }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); ```

	Stars	Issues	Version	Updated	Created
react-native-datepicker	2,120	286	1.7.2	6 years ago	8 years ago
react-native-modal-picker			0.0.16	8 years ago	8 years ago
react-native-wheel-picker			1.2.0	6 years ago	8 years ago

react-native-datepicker vs react-native-modal-picker vs react-native-wheel-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past