Reputation: 495

react native picker is not showing in android

I am trying to add picker in react native android but it does not showing in android. I map my location date to picker item but i did'nt see picker in screen.

<Picker selectedValue={this.state.location}>
  <Picker.Item label="Location 1" value="1" /> 
  <Picker.Item label="Location 2" value="2" />
  <Picker.Item label="Location 3" value="3" />
</Picker>

Upvotes: 14

Answers (6)

Chris Geirman

Reputation: 9684

You need to set your onValueChange method

<Picker
    style={{width: 100}} 
    selectedValue={this.state.location}
    onValueChange={(loc) => this.setState({location: loc})}>
  <Picker.Item label="Location 1" value="1" /> 
  <Picker.Item label="Location 2" value="2" />
  <Picker.Item label="Location 3" value="3" />
</Picker>

Upvotes: 19

Disapamok

Reputation: 1475

This is just a common thing, but this may help someone. I was using the JSON object key loop, but in react native we should use mapping.

*Was using another JSON file to get my array.

import Cities from '../my-project-path/Cities.json';

The way I tried looping (Not working)

let Locations = Object.keys(Cities).forEach(function (key){
    return <Picker.Item key={key} value={key} label={key} />
});

Then I used map (Worked for me)

let Locations = Object.keys(Cities).map(function (key) {
    return <Picker.Item key={key} value={key} label={key} />
});

My component

<Picker selectedValue={this.state.District}>
    {Districts}
</Picker>

Upvotes: 0

Dulanga Heshan

Reputation: 1425

picker doesn't appear on screen if it doesn't have style with height,weight or flex property

<Picker

  style={{flex:1}} >
  <Picker.Item label="Location 1" value="1" /> 
  <Picker.Item label="Location 2" value="2" />
  <Picker.Item label="Location 3" value="3" />

</Picker>

Upvotes: 8