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 ?

score 6 · Answer 1 · answered Dec 26 '20 at 18:44

6

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';

answered Dec 26 '20 at 18:44

Adit Alware

69
1
1

Thanks for this contribution. I resolved my problem just by putting Picker in { }. I had this : ```import Picker from '@react-native-picker/picker'; ``` After seeing your comment , i changed my code to this : ```import {Picker} from '@react-native-picker/picker'; ``` – Ekane 3 Aug 12 '21 at 09:01
I'm not sure why this is but sometimes only the latter works as with `import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';` – 6rchid Sep 14 '21 at 01:31
Now it should be `import {Picker} from "@react-native-picker/picker";` – lmasneri May 13 '22 at 14:22

score 4 · Answer 2 · answered Aug 19 '16 at 11:12

4

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

answered Aug 19 '16 at 11:12

Wojtek Szafraniec

541
3
7

Thanks, I had only one item because I haven't been told about what should go in this picker. I would not have guessed that was the cause in a million years. – vincenth Aug 19 '16 at 13:26
This is exactly the problem. I wish the error was a lot more descriptive than that. Geez. Thanks for pointing it out. – Joshua Pinter Mar 10 '17 at 18:20
can you help me with a similar problem [here](http://stackoverflow.com/questions/43364833/react-native-picker-selected-value-gives-undefined-is-not-an-object-error) – Siddarth G Apr 12 '17 at 08:57

SUMAN DAS SARKAR · Accepted Answer · 2021-08-02T19:31:43.250

 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.

score 1 · Answer 4 · answered Dec 18 '17 at 11:08

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: []
};

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

4 Answers4

Linked