目的

Expo アプリでセレクトボックス（Picker）を設置する
設置したのに表示されない
Pickerが操作できない。等の問題を解決する

記事の意図

ExpoのPickerライブラリを設置する非常に簡単な操作ではあるが、ちょっとわかりにくい初歩的なミスで思うように設置できなかった
同様の問題に当たった人がすぐに解決できるように記事化する
初歩的すぎて記事化を躊躇したが、今後ハマる人（自分も含めて）の時間を節約するため、残すことにした

環境

Expo 4.10.1
使用する Picker @react-native-picker/picker

設置と失敗

導入手順 Pickerの導入方法

ライブラリの読み込みとコンポーネントの設置

import {Picker} from '@react-native-picker/picker';

// ===省略
render() {
 return(
 <Picker
  style={スタイルを設定}
  selectedValue="初期値"
  onValueChange={(itemValue, itemIndex) =>
   console.log("選択で実行")
  }>
  <Picker.Item label="test1" value="test1" />
  <Picker.Item label="test2" value="test2" />
 </Picker>
 )
}

失敗と原因

Pickerが画面に表示されない

事象：Pickerそのものが画面に表示されない
原因：スタイルを指定していない
対策：styleで縦幅、横幅を指定する

picker:{
    height: 100,
    width: SCREEN_WIDTH
  },

Pickerが動かない

事象：Pickerは表示されているが、ドラッグしても反応がない
原因：別のコンポーネントが上に重なっている
たとえば次の画面では、Inputのラベル要素がPickerに干渉してしまい、Pickerの操作ができない状態となっていた

コンポーネント

<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
</View>

対策:
Viewを分けてるなどで画面を整理し
styleでは同じレベルのflexを適切に設定し、重ならないように明記した

コンポーネント

<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

 <View style={styles.inputForm} >
  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
 </View>
</View>

スタイル

  picker:{
    flex:3,
    height: 100,
    width: SCREEN_WIDTH
  },
  inputForm: {
    flex: 1,
    padding: 20,
    width: SCREEN_WIDTH,
    alignItems: 'center',
    backgroundColor: '#fff',
  },

ライブラリが古くないか確認

react-native のPickerは非推奨となっている。

https://reactnative.dev/docs/picker

Pickerを利用するときは @react-native-picker/picker を利用する

https://docs.expo.dev/versions/latest/sdk/picker/