【React Native】DatePickerを実装できるライブラリ「react-native-modal-datetime-picker」

昨日も DatePicker のライブラリを紹介しましたが、前回のものよりも使い勝手の良いライブラリを見つけたので改めてご紹介。
ライブラリ名は react-native-modal-datetime-picker で、ちなみにこちらのライブラリには、内部的には @react-native-community/datetimepicker を使用していますとのことです。

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

GitHub – mmazzarolo/react-native-modal-datetime-picker: A React-Native datetime-picker for Android and iOS
https://github.com/mmazzarolo/react-native-modal-datetime-picker

上記の GitHub のページに載っている GIF 画像を見ていただければわかると思うのですが、特に iOS の UI が、@react-native-community/datetimepicker で実装できるものよりも、操作がしやすく、見た目も良いです。
自分でカスタマイズをしたいなら @react-native-community/datetimepicker の方がお勧めですが、特にこだわりがないのであれば、react-native-modal-datetime-picker の方が個人的には良いと思います。

さて実装方法ですが、まずライブラリをインストールします。

npm install react-native-modal-datetime-picker @react-native-community/datetimepicker --save

この時、@react-native-community/datetimepicker も一緒にインストールしてください。
既にインストールされている場合は、react-native-modal-datetime-picker のみでOKです。

インストールが完了したらプロジェクトに実装していきます。
まず、ライブラリのインポートを下記のようにして行います。

import DateTimePickerModal from "react-native-modal-datetime-picker";

DatePicker の値が確定されたときに呼び出される関数を下記のように定義します。

changeBirthday(selectedDate) {
  this.setState({
    birthday: selectedDate,
    isShowDatePicker: !this.state.isShowDatePicker,
  });
}

なお、例によって DatePicker を使って変更される値を格納する birthday と、DatePicker を表示するかどうかを管理する isShowDatePicker は、state で管理するようにしています。

で、render の return() には下記を追加します。

<Text>{this.state.birthday}</Text>
<Button
  icon={<FontAwesome name="calendar" size={16} />}
  onPress={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })} />
<DateTimePickerModal
  isVisible={this.state.isShowDatePicker}
  mode="date"
  date={this.state.birthday}
  onConfirm={this.changeBirthday}
  onCancel={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })}
  headerTextIOS='生年月日を選択'
  confirmTextIOS='OK'
  locale="ja-JA" />

追加するのは以上です。
なお、iOS の場合、DatePicker のヘッダーに表示されるテキストや決定ボタンのラベルを変更できたり、表示形式を locale で変更できたりします。

@react-native-community/datetimepicker を使った場合は、更に style で表示位置や背景色などを細かく指定できたり、文字色なんかも指定できますので、細かいカスタマイズがしたい場合には、こちらのライブラリはもしかしたら不向きかもしれません。
個人的には react-native-modal-datetime-picker で実装できる UI で十分だったので、ありがたくこのライブラリを使用させていただこうと思います。

以上、React Native で DatePicker を実装できるライブラリ「react-native-modal-datetime-picker」のご紹介でした。
ご参考になれば幸いです。