react native picker is not showing in android

user_4124714 0
Viewed 16791

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>

react-native android
6 Answers

Are you giving it width and height? That was my problem

user_11952530

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>
user_92164230

Worked for me too by assigning a width to the Picker specifically.

user_95923000

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>
user_39943040
Related