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

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

Answer 3

import {Picker} from '#react-native-picker/picker';
<Picker
dropdownIconColor={colors.bColor}
selectedValue={formik.values.state}
onValueChange={value => changeValue('state', value)}>
<Picker.Item label={'Select State'} value="" />
{states ? states.map((item, index) => {
return (
<Picker.Item
key={index}
label={item.StateName}
value={item.StateName}
/>
);
}):null}
</Picker>
----------
If you return null when you don't have a array to render, It will solve the issue. But you need to provide that
"<Picker.Item label={'Select State'} value="" />" for blank selected value.

Answer 4

I had a similar issue but it was using an Item component + an array. And to fix it, I added an empty array as the default value to my dataSource prop Like that:
<Picker style={styles.picker} mode="dropdown" { ...props }>
<Picker.Item label="--- Select ---" value="" />
{
props.dataSource.map(({ label, value }) => (
<Picker.Item key={value} label={label} value={value} />
))
}
</Picker>
PickerWithLabel.defaultProps = {
dataSource: []
};