【React Native】Selectメニューを実装するためのライブラリ「react-native-picker-select」

「react-native-picker-select」ライブラリを使ってアプリに Select メニューを実装したのでその手順についてまとめ。
Props の指定方法にちょっとクセがある感じはしたのですが、見た目をかなり細かく指定できたり、選択肢の指定方法が簡単だったのでお勧めです。
ちなみに、実行した端末は iOS です。

GitHub のページはこちらから。

GitHub – lawnstarter/react-native-picker-select: 🔽 A Picker component for React Native which emulates the nativeinterfaces for iOS and Android
https://github.com/lawnstarter/react-native-picker-select

ライブラリのインストールは下記のコマンドで行います。

npm install react-native-picker-select --save
npm install @react-native-community/picker --save
npx pod-install

上記が終わったら、プロジェクトの任意の場所に追加していきます。
サンプルコードは下記の通りです。

import { StyleSheet } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import Ionicons from 'react-native-vector-icons/Ionicons';

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
    padding: 5,
    paddingRight: 20,
  },
  iconContainer: {
    top: 6,
    right: 25,
  },
});

render() の return 内には下記のように記述しました。
なお、選択された値の情報は state の select で管理しています。
また、Select メニューの右端に、下向きの三角形アイコン「▼」を追加しているので、react-native-vector-icons も一緒にインポートしています。

<RNPickerSelect
  placeholder={{ label: '選択してください', value: '' }}
  onValueChange={(value) => this.setState({ select: value })}
  style={pickerSelectStyles}
  items={[
    { label: 'Football', value: 'football' },
    { label: 'Baseball', value: 'baseball' },
    { label: 'Hockey', value: 'hockey' },
  ]}
  Icon={() => <Ionicons name="chevron-down" size={15} color="gray" />} />

追加するのは以上です。

なお、実装には下記のサイトも参考にさせていただきました。

ReactNativeでDropdownメニューを模索する – Qiita
https://qiita.com/zaburo/items/7e2d2f0f6b9317a7789e

個人的に、placeholder に Object で指定しなければいけない点と、style の指定方法がちょっとわかりにくかったです。
placeholder は TextInput 等だと文字列で指定しているので、うっかりその感覚で文字列で指定してしまって動かなかったりしました。
また、style の指定方法は、React Native のコンポーネントだと、例えば style={pickerSelectStyles.inputIOS} のように指定するので、最初はどうやってしてしていいか分からず、参考サイトのコードをまるっとコピペしました。
ですが、慣れてしまえば他のコンポーネントとほぼ同じ感覚でレイアウト調整ができるので、そこまで困ることはありませんでした。

以上、React Native で Select メニューを実装するためのライブラリ「react-native-picker-select」のご紹介でした。
ご参考になれば幸いです。