Nativebase: Picker does not work

[henryw4k]

I copied your example exactly from the docs. Every time I try to use picker, it throws this error:
Cannot read property 'props' of undefined

[henryw4k]

[email protected]
[email protected]

[SupriyaKalghatgi]

@henryw4k I tried the same example
And it works fine for me

"native-base": "0.5.7",
"react": "15.3.1",
"react-native": "0.32.0"

[robputer]

I'm experiencing the same issue.

[email protected]
[email protected]

[SupriyaKalghatgi]

@henryw4k @robputer Can you try updating NativeBase to the latest and simulate?

[gor181]

Usually I would get this error when I would set selectedValue to one which is not included in the provided items.

[ptah23]

I'm also getting it when I set selectedValue to one not in the provided items. This is going to be a problem for dynamically created items. The react native Picker renders properly with invalid selectedValue

[gor181]

I think this should have been fixed in most recent release?

https://github.com/GeekyAnts/NativeBase/commit/b03f0e52fa417c586b3d6cd65e2caf7d8dbe0299#diff-96cd24568168ce09474e9802b4401a30R27

This is where it was throwing now it shouldn't be the case.
However it would be a good idea to have a defaultValue when there are no selected items something as Select or similar..

[sankhadeeproy007]

Updated with 0.5.9

[jeremypeters]

I was experiencing the same issue so I updated to the latest version - the picker now appears, but it takes a second or two and I get the following console warning:

Warning: Call stack size exceeded when merging props, falling back to shallow merge.

[mostafiz93]

Using Picker.Item directly can solve the issue. Don't declare const Item = Picker.Item;​, use this:
<Picker.Item label="Wallet" value="key0" />

[tarun29061990]

Facing same issue:
cannot read props of null

<Picker
 note
 mode="dropdown" 
 selectedValue={projectDetails.stage.display_name}
onValueChange={this.onValueChange.bind(this)}
style={{ width: '100%', color : '#5d96ff' }}
>
    {stages.map((value, key)=>{
        <Picker.Item label={value.display_name} value={value} />
    })}
</Picker>

"native-base": "2.8.1"
"react-native": "0.57.1"

[alexiadorneles]

@tarun29061990 So am I, found any solution?

[tarun29061990]

@alexiadorneles Do like this

let stages = that.stages.map((stage, id)=>{
    return <Picker.Item key={id} value={stage} label={stage.display_name} />
});

<Picker
    note
    mode="dropdown" 
    selectedValue={this.state.selectedStage}
    onValueChange={(value, index)=>{this.setState({selectedStage:value})}}
    style={{ width: '100%', color : '#5d96ff' }}
>
    {stages}
</Picker>