Home » Android » react native picker is not showing in android

react native picker is not showing in android

Posted by: admin May 14, 2020 Leave a comment

Questions:

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>
How to&Answers:

You need to set your onValueChange method

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

Answer:

For me, it was a “alignItems: ‘center’,” on the parent view component.

I would comment out all/each style of your styles.container

Answer:

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

Answer:

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>

Answer:

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

Answer:

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>