【React Native】セレクトメニューをダイアログで表示できる「react-native-modal-selector」ライブラリで実装する

以前、「react-native-picker-select」ライブラリでネイティブのセレクトメニューを実装する方法について紹介しましたが、利用者の方から見た目がちょっと…というご意見をいただいたので、別のライブラリを導入しました。
なんでも、選択肢のダイアログが下の方に表示されるのに違和感があるとのことでした。

導入したライブラリがこちら。

GitHub – peacechen/react-native-modal-selector: A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
https://github.com/peacechen/react-native-modal-selector

ご要望にぴったりの、画面中央にダイアログで表示されるセレクトメニューが実装できます。

使い方は、まず下記コマンドでライブラリをインストールします。

npm install react-native-modal-selector --save

で、サンプルコードはこちら。

import { StyleSheet } from 'react-native';
import ModalSelector from 'react-native-modal-selector'

const styles = StyleSheet.create({
  overlayStyle: {
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  optionContainerStyle: {
    paddingHorizontal: 0,
    backgroundColor: '#FFF',
    borderRadius: 10,
  },
  optionStyle: {
    paddingVertical: 15,
    borderBottomWidth: 0.3,
  },
  optionTextStyle: {
    color: '#000',
    fontSize: 17,
  },
  cancelStyle: {
    paddingVertical: 15,
    backgroundColor: '#FFF',
    borderRadius: 10,
  },
  cancelTextStyle: {
    color: 'rgb(0,118,255)',
    fontSize: 18,
    fontWeight: 'bold'
  },
  sectionTextStyle: {
    color: '#666',
    fontSize: 19,
  },
  sectionStyle: {
    borderBottomWidth: 0.5,
  }
});

<ModalSelector
  data={data}
  animationType='fade'
  ref={ref => selector = ref}
  onChange={option => { this.setState({ selectValue: option.key }); }}
  cancelText='キャンセル'
  overlayStyle={styles.overlayStyle}
  backdropPressToClose={true}
  optionContainerStyle={styles.optionContainerStyle}
  optionStyle={styles.optionStyle}
  optionTextStyle={styles.optionTextStyle}
  cancelStyle={styles.cancelStyle}
  cancelTextStyle={styles.cancelTextStyle}
  sectionTextStyle={styles.sectionTextStyle}
  sectionStyle={styles.sectionStyle} />

で、この時の注意点ですが、data に指定するデータは下記のような形式である必要があります。

[
  { key: '値1', label: 'ラベル1' },
  { key: '値2', label: 'ラベル2' },
  ......,　　
]

react-native-picker-select ライブラリでは、items に指定する値は下記のような形式だったので、そのまま使うとエラーになります。

[
  { label: 'ラベル1', value: '値1' },
  { label: 'ラベル2', value: '値2' },
  ......,
]

それ以外は、特に気をつける点はないはず。

ただ、文字色や背景色など、見た目をかなり変えました。
個人的な好みですが、キャンセルボタンの文字色を青、選択肢の文字色は黒にしたり、ダイアログの背景が半透明だったので、不透明度を 1 にしたりしました。
あとは、余白を調整し、デフォルトよりも広めに取るようにしました。
また、表示時のアニメーションも、デフォルトだと下から上にスライドするように表示されますが、これだとダイアログの黒背景も一緒にスライドするので凄く違和感があり、フェードインに変更しました。
これらのスタイルは、上のサンプルコードにまるっと載せてあるので、お好みに合えばお使いください。

以上、React Native　でセレクトメニューをダイアログで表示できるライブラリ「react-native-modal-selector」のご紹介でした。
ご参考になれば幸いです。