feat(app): implement a common datetime picker for the user input (#73)

* feat(app): add react-native-modal-datetime-picker component package

* feat(app): implement date-time input using button as a base

apps/expo/package.json

@@ -21,6 +21,7 @@
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^18.0.1",
     "@hookform/resolvers": "^3.0.0",
+    "@react-native-community/datetimepicker": "6.7.3",
     "@react-native-community/netinfo": "9.3.7",
     "@react-native-masked-view/masked-view": "0.2.8",
     "@react-navigation/drawer": "^6.6.2",
@@ -44,6 +45,7 @@
     "react-hook-form": "^7.43.9",
     "react-native": "0.71.4",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-modal-datetime-picker": "^15.0.1",
     "react-native-numeric-input": "^1.9.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",

apps/expo/src/components/DateTimeInput.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Text, View } from "react-native";
+import DateTimePickerModal, {
+  type ReactNativeModalDateTimePickerProps,
+} from "react-native-modal-datetime-picker";
+import { Button, type IButtonProps } from "native-base";
+import { Controller, type Control } from "react-hook-form";
+
+import { DateFormatter } from "../utils/dates";
+
+const DateTimeInput = (props: {
+  control: Control<any>;
+  name: string;
+  label: string;
+  dateTimePickerProps?: ReactNativeModalDateTimePickerProps;
+  buttonProps?: IButtonProps;
+}) => {
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+
+  const { control, name, label, buttonProps, dateTimePickerProps } = props;
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({
+        field: { onChange, onBlur, value },
+        fieldState: { error },
+      }) => (
+        <View>
+          <Text style={{ paddingBottom: 6, fontSize: 15, fontWeight: "400" }}>
+            {label}
+          </Text>
+          <Button
+            {...buttonProps}
+            variant="outline"
+            size="md"
+            justifyContent="flex-start"
+            _text={{
+              ...buttonProps?._text,
+              color: "black",
+            }}
+            onPress={() => {
+              setDatePickerVisibility(true);
+            }}
+          >
+            {value instanceof Date
+              ? DateFormatter.dateTimePickerView(value)
+              : "no-value-yet"}
+          </Button>
+          {error && <Text style={{ color: "red" }}>{error.message}</Text>}
+          <DateTimePickerModal
+            {...dateTimePickerProps}
+            isVisible={isDatePickerVisible}
+            mode="datetime"
+            date={value instanceof Date ? value : undefined}
+            onConfirm={(date) => {
+              setDatePickerVisibility(false);
+              onChange({ target: { value: date, name } });
+            }}
+            onCancel={() => {
+              setDatePickerVisibility(false);
+            }}
+          />
+        </View>
+      )}
+    />
+  );
+};
+
+export default DateTimeInput;

apps/expo/src/utils/dates.ts

@@ -4,4 +4,7 @@ export const DateFormatter = {
   rentalListView: (date: Date) => {
     return format(date, "dd/MM/yyyy HH:mm a");
   },
+  dateTimePickerView: (date: Date) => {
+    return format(date, "dd/MM/yyyy HH:mm a");
+  },
 };