This project has been deprecated, move tohttps://github.com/beefe/react-native-picker

react-native-picker-android

Warn

Documentation

Props

Methods

Usage

Step 1 - install

npm install react-native-picker-android --save

Step 2 - import and use in project

'use strict';importReact,{View,Text,Platform,PickerIOS}from'react-native';importPickerAndroidfrom'react-native-picker-android';letPicker=Platform.OS==='ios' ?PickerIOS :PickerAndroid;letPickerItem=Picker.Item;letCAR_MAKES_AND_MODELS={amc:{name:'AMC',models:['AMX','Concord','Eagle','Gremlin','Matador','Pacer'],},alfa:{name:'Alfa-Romeo',models:['159','4C','Alfasud','Brera','GTV6','Giulia','MiTo','Spider'],},aston:{name:'Aston Martin',models:['DB5','DB9','DBS','Rapide','Vanquish','Vantage'],},audi:{name:'Audi',models:['90','4000','5000','A3','A4','A5','A6','A7','A8','Q5','Q7'],},austin:{name:'Austin',models:['America','Maestro','Maxi','Mini','Montego','Princess'],},borgward:{name:'Borgward',models:['Hansa','Isabella','P100'],},buick:{name:'Buick',models:['Electra','LaCrosse','LeSabre','Park Avenue','Regal','Roadmaster','Skylark'],},cadillac:{name:'Cadillac',models:['Catera','Cimarron','Eldorado','Fleetwood','Sedan de Ville'],},chevrolet:{name:'Chevrolet',models:['Astro','Aveo','Bel Air','Captiva','Cavalier','Chevelle','Corvair','Corvette','Cruze','Nova','SS','Vega','Volt'],},};exportdefaultclassSomeSceneextendsReact.Component{constructor(props,context){super(props,context);this.state={carMake:'cadillac',modelIndex:3,}}render(){letmake=CAR_MAKES_AND_MODELS[this.state.carMake];letselectionString=make.name+' '+make.models[this.state.modelIndex];return(<View><Text>Please choose a make for your car:</Text><PickerselectedValue={this.state.carMake}onValueChange={(carMake)=>this.setState({carMake,modelIndex:0})}>{Object.keys(CAR_MAKES_AND_MODELS).map((carMake)=>(<PickerItemkey={carMake}value={carMake}label={CAR_MAKES_AND_MODELS[carMake].name}/>))}</Picker><Text>Please choose a model of{make.name}:</Text><PickerselectedValue={this.state.modelIndex}key={this.state.carMake}onValueChange={(modelIndex)=>this.setState({modelIndex})}>{CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName,modelIndex)=>(<PickerItemkey={this.state.carMake+'_'+modelIndex}value={modelIndex}label={modelName}/>))}</Picker><Text>You selected:{selectionString}</Text></View>);}};