Mixing hard coded and looped children causes error

[dave-irvine]

Hi,

Just stumbled across this issue where I want to provide children to the Picker by map()'ing an array to Picker.Items

const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

<Picker
  selectedValue={this.state.letterA}
  onValueChange={this.onValueChange}
  mode='dialog'
>
  <Picker.Item label="Please select" value='none' />
  {
    alphabet.map((letter) => {
      return (
        <Picker.Item label={letter} value={letter} />
      );
    })
  }
</Picker>

This is causing an error here: https://github.com/danielweinmann/react-native-picker-dropdown/blob/master/Picker.js#L34 due to the 2nd element in the children array being an array of the 26 Picker.Item elements.

If I remove the hard coded Picker.Item as follows, everything is fine, I'm just missing my default value Picker.Item

<Picker
  selectedValue={this.state.letterA}
  onValueChange={this.onValueChange}
  mode='dialog'
>
  {
    alphabet.map((letter) => {
      return (
        <Picker.Item label={letter} value={letter} />
      );
    })
  }
</Picker>

I can work around this by adding my default value to my alphabet array, but obviously that isn't a great solution.

Or I can do:

{
  [<Picker.Item label="Please select" value='none' />].concat(
  alphabet.map((letter) => {
    return (
      <Picker.Item label={letter} value={letter} />
    );
  }))
}

but that seems like even more of a hack.

Any suggestions?