react-native - Picker - undefined is not an object (evaluating 'this.props.children[position].props)

Question

I am encountering a weird behaviour when using Picker.

I use a Picker as follows :

<Picker
  mode="dropdown"
  style={styles.pickerField}
  selectedValue={this.state.dayAndTime}
  onValueChange={(text) => this.setState({ dayAndTime: text })}
>
  <Picker.Item label="Le 5/07 à 15H" value="0" key="0" />
</Picker>

When the screen displaying this picker is loaded, I got an error screen saying (cf. screenshot below) : undefined is not an object (evaluating 'this.props.children[position].props)

From what I gathered, my problem come from line 106 of Libraries/Components/Picker/PickerAndroid.android.js, it seems that having a property "onValueChange" triggers it. I removed it, and error didn't happen.

I use react-native 0.31.0, I use an android api 23 virtual device with genymotion.

Is there something something I am doing wrong ?

Answer 1

The above solutions might be the one that might solve your query. One thing I would put light on is , correct way to import:

import {Picker} from '@react-native-community/picker';

Rather than

import Picker from '@react-native-community/picker';

Answer 2

There must be at least 2 items to pick from, for example: <Picker.Item label="Le 5/07 à 15H" value="0" key="0" /> <Picker.Item label="Le 5/07 à 15H" value="1" key="1" />

Also for better syntax you can try: onValueChange={(dayAndTime) => this.setState({ dayAndTime })}