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>

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.

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.