React-native: [Picker][0.20.0+][iOS] disappears when parent View has alignItems: center or flexDirection: row

[rclai]

const DeadPicker = () => (
  <View style={{
    // Remove this style to see the Picker show up
    alignItems: 'center',
  }}
    <Picker>
      {['item1', 'item2', 'item3'].map((item) => (
        <Picker.Item key={item} label={item} value={item} />
      ))}
    </Picker>
  </View>
);

RN 0.20.0.
Mac.
iOS 9.2 iPod model MGG82LL/A.

This also happens when any grandparent View has alignItems: center.

[vitorbaptista]

Had the same issue with React-Native 0.21.0 running on Android emulator with SDK 23.0.2.

[tomauty]

+1

[lu-ko]

+1

[iugo]

+1

[JeandeCampredon]

+1

[mangogogos]

+1 Thank you for finding the cause of this

[rclai]

Hey guys, I created a post on Product Pains for this issue, you can upvote it here: https://productpains.com/post/react-native/picker-disappears-when-parent-views-have-alignitems-center

[grabbou]

I think the problem is similar to this issue https://github.com/facebook/react-native/issues/7226#issuecomment-214622303 - maybe it's something to do with how native components react to that property?

[rclai]

I also found out that if the (or any) parent view has flexDirection: row it will also disappear. However, this one has a workaround. If you wrap your Picker inside a View with flex: 1, the Picker stays. Example:

<View style={{
  flexDirection: 'row',
}}>
  <View style={{
    flex: 1,
  }}>
    <Picker>
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
    </Picker>
  </View>
  <View style={{
    flex: 1,
  }}>
    <Picker>
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
    </Picker>
  </View>
</View>

[rclai]

Actually, as a result of the above tinkering, I also found a workaround for the original issue:

const AlivePicker = () => (
  <View style={{
    flex: 1, // This flex is optional, but probably desired
    alignItems: 'center',
    flexDirection: 'row',
  }}>
    <View style={{
      flex: 1,
    }}>
      <Picker>
        {['item1', 'item2', 'item3'].map((item) => (
          <Picker.Item key={item} label={item} value={item} />
        ))}
      </Picker>
    </View>
  </View>
);

Use alignItems: 'center' with flexDirection: 'row' makes it not disappear.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/picker0200ios-disappears-when-parent-view-has-alignitems-center-or-flexdirection-row

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[rclai]

There's already a product pains post: https://productpains.com/post/react-native/picker-disappears-when-parent-views-have-alignitems-center

[Anima-t3d]

I have this issue with android. Running react-native 0.42.0 I only got it fixed in 1a and 1b by setting flex:1 in the element style, setting flex: 1 on the element with flexDirection: 'row' does not fix it (see 1c and 1b).

<View style={{flexDirection: 'row'}}>
    <Text>1a</Text>
    <View style={{flex: 1}}>
        <Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
            <Picker.Item key={option.key} label={option.label} value={option.key} /> )}
        </Picker>
    </View>
    <Text>1b</Text>
    <Picker style={{flex: 1}} iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
        <Picker.Item key={option.key} label={option.label} value={option.key} /> )}
    </Picker>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
    <Text>1c</Text>
    <View>
        <Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
            <Picker.Item key={option.key} label={option.label} value={option.key} /> )}
        </Picker>
    </View>
    <Text>1d</Text>
    <Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
        <Picker.Item key={option.key} label={option.label} value={option.key} /> )}
    </Picker>
</View>

Any updates on this?

[Laurensdc]

Still a problem.

[rawap]

Giving the picker or a child view a flex: 1 didn't work for me. The solution was to give the picker a width.

<View style={{alignItems: "center"}}>
  <Picker style={{width:"80%"}} mode="dropdown">
    <Picker.Item />
  </Picker>
</View>

[trickeyd]

+1 - "react-native": "^0.47.0"

Kinda have it working now but boy is it hacky!