React Native で Pickerのitemをmap()で簡潔に実装する方法

やりたかったこと

React Native の Picker の item をmap()で簡潔に実装したい

間違った例

export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number}
            value={index}
          />
         );
      })}
    </Picker>
  )
}

上記のコードで実行した結果、以下のエラーが出た

undefined is not an object (evaluating 'child.props.value')

解決方法

色々迷走した末...
<Picker.Item>のlabelにtoString()を指定するだけでよかった。

export default PickerSample = () => {
  const [number, setNumber] = useState(0);
  const numbers = [0, 1, 2, 3, 4, 5];  // <Picker.Item> に表示させたい値の配列

  return (
    <Picker
      style={styles.picker}
      itemStyle={styles.pickerItem}
      selectedValue={number}
      onValueChange={(itemValue) => setNumber(itemValue)}
    >
      {numbers.map((number, index) => {
        return (
          <Picker.Item
            key={index}
            label={number.toString()}  // ここに追加
            value={index}
          />
         );
      })}
    </Picker>
  )
}

完成物

問題なく動きました