NativeBase: Picker : undefined is not an object :child.props.value

We found the solution… the bug is quite incredible really.

We are using ImmutableJS for our redux state. this.props.values is an immutable list. When you go and look at the source code of Picker.ios.js, you see that it is using lodash’s find function. Apparently, they can’t handle an immutable list even though it works throughout the rest of React Native.

The (ugly) solution is thus: { this.props.values.toArray().map( value => (<Picker.Item key={value} label={value} value={value} />) ) }

Recently I’ve faced the same issue, This might be a less ugly solution This is hapenning because of this

<Picker.Item label="Item 0" value="0" /> /// **<- Issue is here due to this hard coded Item** 
{this.props.ItemList.map((member,key)=>{<Picker.Item label={member.props} value{member.value} />
})

render() {
  return (
    <Picker mode='dropdown' selectedValue={selectedValue} onValueChange={onValueChange} >
      { make_list(['pass','your','desire','list']) }
    </Picker>
  )}
function make_list(list){
        d = list.map((data,i) => {
            return (
                <Picker.Item label={data} value={i}/>
            )
        })
       // i did this because no need in ios :P 
        if(Platform.OS === 'android'){
            d.unshift(<Picker.Item label="Select" />)
        }
        return d;
      //and that's how you are ready to go, because this issue isn't fixed yet (checked on 28-Dec-2017)
 }

I guess that will happen in the following cases:

A) rendering just one Ref: https://github.com/GeekyAnts/NativeBase/issues/921

  <Picker ...>
    <Picker.Item ... />
  </Picker>

B) rendering one and an array of items

  <Picker ...>
    <Picker.Item ... />
    {
      this.props.ItemList.map((member, key) => <Picker.Item ... />)
    }
  </Picker>

C) not returning element in callback

<Picker ...>
  {
    this.props.ItemList.map((member, key) => {
      // either use return statements or does not use brackets
      // one more thing, use key attribute if rendering from an array
      <Picker.Item key={key} ... />
    })
  }
</Picker>

Same issue with 2.13.4, only on iOS in my case, Android works fine.

We are running into the same problem here, while simply using map:

<Picker
        iosHeader={ this.props.selectionText ? this.props.selectionText : "Select" }
        mode="dropdown"
        selectedValue={this.state.selected}
        onValueChange={this.onValueChange.bind(this)}
      >
        { this.props.values.map( value => (<Picker.Item key={value} label={value} value={value} />) ) }
</Picker>

Anyone found a solution yet?

Why is this closed I’m still facing the same issue here

@ap050492 the map function misses return statement.

Change this

 {this.state.categoryData.map((member, key) => {
            <Item label={member.value} value={member.value} />
        })
      }

to

{this.state.categoryData.map((member, key) => 
            <Item label={member.value} value={member.value} key={key}/>
        )
      }

or

{this.state.categoryData.map((member, key) => {
           return <Item label={member.value} value={member.value} key={key}/>
        })
      }

Fixed with 2.7.1

@shivrajkumar This does appear to be a NativeBase bug - this type of example from @horiuchie works fine for us in React Native on Android but breaks in NativeBase:

B) rendering one and an array of items

  <Picker ...>
    <Picker.Item ... />
    {
      this.props.ItemList.map((member, key) => <Picker.Item ... />)
    }
  </Picker>