【React Native】DatePickerを実装できるライブラリ「@react-native-community/datetimepicker」

今回は、React Native で日付データの入力を行う方法についてです。
React Native にも DatePickerAndroid と DatePickerIOS はあったようでしたが、非推奨となっていましたので、代わりに推奨されていた「@react-native-community/datetimepicker」で DatePicker を実装しました。

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

GitHub – react-native-datetimepicker/datetimepicker: React Native date & time picker component for iOS, Android and Windows
https://github.com/react-native-datetimepicker/datetimepicker

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

npm install @react-native-community/datetimepicker --save

インストールが完了したら、下記のサンプルコードを参考にプロジェクトに追加します。
まず、ライブラリのインポートと、Datepicker の値が変わったときに呼び出される関数を定義します。

import DateTimePicker from '@react-native-community/datetimepicker';

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

なお、日付データは state の birthday で管理するようにしています。

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

<Text>{this.state.birthday}</Text>
<Button
  icon={<FontAwesome name="calendar" size={16} />}
  onPress={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })} />
{ this.state.isShowDatePicker ?
  <DateTimePicker
    mode="date"
    display="calendar"
    value={this.state.birthday}
    locale="ja-JA"
    onChange={this.changeBirthday} /> : null }

上記のように指定すると、Android の場合はカレンダーが表示され、iOS の場合はスピナーが表示されます。
なお、<DateTimePicker /> をただ追加するだけだと、スピナーもしくはカレンダーが表示されっぱなしになるはずなので、その辺りは上記を参考に、ボタン等をタップしたタイミングで表示/非表示を切り替える処理を追加してください。
処理としては以上です！

実装は簡単だったので、日付データを扱う際はこちらの導入をおすすめします。

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