refactor(#18): replace react-native-modal-datetime-picker by minimal …

…own code

package.json

@@ -51,7 +51,6 @@
     "react-native-chart-kit": "^6.12.0",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-paper": "^5.12.1",
     "react-native-reanimated": "~3.6.0",
     "react-native-safe-area-context": "4.8.2",

src/common/components/DateTimePickerModal.tsx

@@ -0,0 +1,35 @@
+import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import React, { FC, useCallback } from "react";
+import { View } from "react-native";
+import RncDateTimePicker from "@react-native-community/datetimepicker";
+
+type Props = {
+  onConfirm: (date: Date) => void;
+  onCancel: () => void;
+  visible: boolean;
+  date: Date;
+  mode: "time" | "date";
+};
+
+export const DateTimePickerModal: FC<Props> = ({
+  visible,
+  onCancel,
+  onConfirm,
+  date,
+  mode,
+}) => {
+  const onChange = useCallback(
+    (event: DateTimePickerEvent, date?: Date) => {
+      if (event.type === "dismissed") {
+        onCancel();
+      }
+      if (event.type === "set" && date) {
+        onConfirm(date);
+      }
+    },
+    [onConfirm, onCancel]
+  );
+  if (visible)
+    return <RncDateTimePicker onChange={onChange} mode={mode} value={date} />;
+  return null;
+};

src/common/index.ts

@@ -0,0 +1 @@
+export { DateTimePickerModal } from "./components/DateTimePickerModal";

src/settings/BelatedDailiesTimePicker.tsx

@@ -1,11 +1,11 @@
 import moment from "moment";
 import React, { FC, useState } from "react";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { connect, ConnectedProps } from "react-redux";
 import { useTranslation } from "../localization/useTranslations";
 import { RootState } from "../store";
 import { setBelatedDailiesUntilNextDayAtHour } from "./settings.slice";
 import SettingsButtonRow from "./SettingsButtonRow";
+import { DateTimePickerModal } from "../common";
 
 const mapState = (state: RootState) => ({
   time: state.settings.belatedDailiesUntilNextDayAt,
@@ -46,7 +46,7 @@ const BelatedDailiesTimePicker: FC<PropsFromRedux> = ({
         onPress={() => showTimePicker(true)}
       />
       <DateTimePickerModal
-        isVisible={isDatePickerVisible}
+        visible={isDatePickerVisible}
         mode="time"
         onConfirm={handleConfirm}
         onCancel={() => showTimePicker(false)}

src/settings/NotificationTimePicker.tsx

@@ -1,6 +1,5 @@
 import moment from "moment";
 import React, { FC, useState } from "react";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { connect, ConnectedProps } from "react-redux";
 import { useTranslation } from "../localization/useTranslations";
 import {
@@ -10,6 +9,7 @@ import {
 import { RootState } from "../store";
 import { setNotificationTime } from "./settings.slice";
 import SettingsButtonRow from "./SettingsButtonRow";
+import { DateTimePickerModal } from "../common";
 
 const mapState = (state: RootState) => ({
   notificationSettings: state.settings.notifications,
@@ -57,7 +57,7 @@ const NotificationTimePicker: FC<PropsFromRedux> = ({
         onPress={() => showTimePicker(true)}
       />
       <DateTimePickerModal
-        isVisible={isDatePickerVisible}
+        visible={isDatePickerVisible}
         mode="time"
         onConfirm={handleConfirm}
         onCancel={() => showTimePicker(false)}

yarn.lock

@@ -7857,13 +7857,6 @@ react-native-gesture-handler@~2.14.0:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-react-native-modal-datetime-picker@^17.1.0:
-  version "17.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-17.1.0.tgz#74291bf92b830be285752f437841f52885c90e0b"
-  integrity sha512-jfTwfaCLtBffYbQ+pOGFLM+J5HmUh3vb9rT0JrrQPjxzecdc8pNYreB1c96+mVuq8bDCvaCdIeuEsslTqLJL0Q==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-native-paper@^5.12.1:
   version "5.12.1"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.12.1.tgz#0c3211f78b4d29a110aa168e6541cfb0a2c6a071"