Why will React Native Picker not display on iOS?

Question

I am trying to use the element in React Native. It works fine on Android but is not displaying on iOS.

<Picker selectedValue={'java'} >
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Condense

Answer 1

You need to set a height and a width to your picker element

<Picker selectedValue={'java'} style={{height: 100, width: 100}}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Btw, the picker wont appear like the keyboard could.

Put

Answer 2

To display on iOS I needed to add a <Text> element with a title for the <Picker> and place both inside a <View> element

e.g.

<View>

  <Text>Select Language</Text>

  <Picker selectedValue={'java'} >
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
  </Picker>

</View>

I also noticed adding the alignItems: 'center' style to the element caused it to not display.

Condense

interestingly, alignItems: 'center' was the issue for me, and removing it from the parent view solved my problem of it not showing. Adding a width and a height to the Picker controller is not necessary at all, from my experience. – Cleanup

Answer 3

It's because of the style @react-native-picker/picker support two different style

@platform android => it has the style props @platforn ios => for ios itemStyle

Blok

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Flog