0

I have come across this error when I used Picker component as follows,

<Picker 
   style={{ flex: 1 }}>
   selectedValue={this.props.shift}
   onValueChange={value => this.props.employeeFormAction({ 
                                             prop:'shift', value })}
>   
        <Picker.Item label='Monday' value='Monday' />
        <Picker.Item label='Tuesday' value='Tuesday' />
        <Picker.Item label='Wednesday' value='Wednesday' />
        <Picker.Item label='Thursday' value='Thursday' />
        <Picker.Item label='Friday' value='Friday' />
        <Picker.Item label='Saturday' value='Saturday' />
        <Picker.Item label='Sunday' value='Sunday' />
</Picker>

I have tired this solution from same community

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

But it didn't work for me. Could any body suggest solution for this issue.

ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60

2 Answers2

1

Try to not hardcode the values. This way is cleaner:

// inside your component (supposing is not a functional component)
_renderShifts = () => {
  const shifts = ['Monday', 'Tuesday', 'Wednesday','Thursday',
                'Friday','Saturday', 'Sunday'];

  return shifts.map((shift) => {
    <Picker.Item key={"shift_"+i} label={shift} value={shift} />
  });
}


// now your picker should render this way
_renderPicker = () => {
  <Picker 
    style={{ flex: 1 }}>
    selectedValue={this.props.shift}
    onValueChange={value => this.props.employeeFormAction({prop:'shift', value })}
  >   
    {this._renderShifts()}
  </Picker>
}
EnriqueDev
  • 1,207
  • 2
  • 12
  • 25
  • I am still facing the same error, eventhough I have removed hardcoded values. Could you suggest any alternative? – ThinkAndCode Oct 05 '17 at 05:30
  • Could you suggest any alternative as I am still facing issue. – ThinkAndCode Oct 09 '17 at 09:24
  • are you using redux to manage the changes, can you try and console.log if this.props.shift is not undefined? Btw, are you giving it flex 1 for some particular reason? – EnriqueDev Oct 09 '17 at 09:41
  • The problem was with react-native version. it's not working in 0.48, but working fine in 0.49. one more thing is Picker is not being displayed with out 'flex: 1' or 'flexDirection: row or column'. In such a case I am unable to place the label for the picker. Could you help me here? – ThinkAndCode Oct 10 '17 at 09:17
  • just for the record, if it works fine on RN 0.49 why don't just use RN 0.49? And have you considered that to use flex you need to define a height in the parent component? Maybe the problem is not the picker but the surrounding code. – EnriqueDev Oct 10 '17 at 10:09
0

This error is also returned when the Picker is imported without the corresponding object destructuring.

Incorrect

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

Correct

import { Picker } from '@react-native-community/picker'
DariusLau
  • 1,043
  • 10
  • 9