【備忘録】react-native-modal-datetime-picker導入手順

はじめに

今回の記事は完全俺得な、備忘録になっています。
公式

導入しようと思ったきっかけ

日付の入力欄を作ろうとすると結構面倒なことが増える
　・型チェック
　　→文字列と日付型以外はNG
　・うるう年の確認
　　→ただめんどくさい
　etc...
そうゆう入力チェックとかめんどくせえなって思っていい感じのライブラリないかなと思ったらあった
それでいて使いやすい。最高
共有します。

導入コマンド

expoを使わない場合

# npmをご利用の方
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

# yarnをご利用の方
$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

expoを使う場合

expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

利用例

App.js

import React, { useState } from "react";
import { Button, View, StyleSheet } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const App = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = date => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View style={styles.container}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  }
})
export default App;

公式に乗っているサンプルを少しだけいじっただけです。はい。
このサンプルでいうことがあるとしたらmode="date"と設定されていますが、もちろんいろんなタイプがあります。
'time'と'datetime'あるそうです。
要は時間も設定できるやつもあるよってことです。試してみてください。
またIOSのみですが、isDarkModeEnabledを使うことでダークモードにも対応。

他にもいろいろ属性あるので試してみてください。
何か良さげな使い方見つけたら更新しますのでチェックしててください！
それでは！