mobile: change date-picker library in the app

apps/mobile/app/components/date-picker/index.tsx

@@ -1,91 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import React from "react";
-import { useThemeColors } from "@notesnook/theme";
-import { useRef } from "react";
-import { useWindowDimensions, View } from "react-native";
-import { defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import DatePicker from "react-native-date-picker";
-import dayjs from "dayjs";
-import { strings } from "@notesnook/intl";
-import { Button } from "../ui/button";
-
-export default function DatePickerComponent(props: {
-  onConfirm: (date: Date) => void;
-  onCancel: () => void;
-}) {
-  const { colors, isDark } = useThemeColors();
-  const dateRef = useRef<Date>(dayjs().add(1, "week").toDate());
-
-  const { width } = useWindowDimensions();
-
-  return (
-    <View
-      style={{
-        backgroundColor: colors.primary.background,
-        borderRadius: defaultBorderRadius,
-        padding: DefaultAppStyles.GAP,
-        borderWidth: 0.5,
-        borderColor: colors.primary.border,
-        width: "80%",
-        gap: DefaultAppStyles.GAP_VERTICAL
-      }}
-    >
-      <DatePicker
-        style={{
-          width: width * 0.8 - DefaultAppStyles.GAP * 2
-        }}
-        theme={isDark ? "dark" : "light"}
-        mode="date"
-        minimumDate={dayjs().add(1, "day").toDate()}
-        onCancel={() => {
-          close?.();
-        }}
-        date={dateRef.current}
-        onDateChange={(date) => {
-          dateRef.current = date;
-        }}
-      />
-
-      <Button
-        title={strings.setExpiry()}
-        type="accent"
-        style={{
-          width: "100%"
-        }}
-        onPress={async () => {
-          if (!dateRef.current) return;
-          props.onConfirm(dateRef.current);
-        }}
-      />
-
-      <Button
-        title={strings.cancel()}
-        type="plain-outline"
-        style={{
-          width: "100%"
-        }}
-        onPress={async () => {
-          props.onCancel();
-        }}
-      />
-    </View>
-  );
-}

apps/mobile/app/components/date-time-picker/date-time-picker.tsx

@@ -0,0 +1,200 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { useThemeColors } from "@notesnook/theme";
+import dayjs, { locale } from "dayjs";
+import React, { useMemo } from "react";
+import { I18nManager, ViewStyle } from "react-native";
+import RNDateTimePicker, {
+  DateType,
+  useDefaultStyles
+} from "react-native-ui-datepicker";
+import { FontFamily } from "../../common/design/font";
+import { Radius } from "../../common/design/spacing";
+import { db } from "../../common/database";
+import { useSettingStore } from "../../stores/use-setting-store";
+import AppIcon from "../ui/AppIcon";
+import DeviceInfo from "react-native-device-info";
+
+export type DateTimePickerMode = "date" | "time" | "datetime";
+
+export type DateTimePickerProps = {
+  /**
+   * Which parts of the value can be picked. `date` shows only the calendar,
+   * `time` shows only the time wheel and `datetime` shows both.
+   */
+  mode?: DateTimePickerMode;
+  date: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  /**
+   * Force 24-hour time. Defaults to the user's time format setting.
+   */
+  is24Hour?: boolean;
+  /**
+   * First day of the week (0 = Sunday, 1 = Monday). Defaults to the user's
+   * week format setting.
+   */
+  firstDayOfWeek?: number;
+  style?: ViewStyle;
+};
+
+const toDate = (value: DateType) =>
+  value ? dayjs(value).toDate() : new Date();
+
+/**
+ * Themed date/time picker built on top of `react-native-ui-datepicker`.
+ * Renders inline; use `DateTimePicker.present()` (see index) for the sheet.
+ */
+export default function DateTimePicker({
+  mode = "date",
+  date,
+  onChange,
+  minDate,
+  maxDate,
+  is24Hour,
+  firstDayOfWeek,
+  style
+}: DateTimePickerProps) {
+  const { colors, isDark } = useThemeColors();
+  const defaultStyles = useDefaultStyles(isDark ? "dark" : "light");
+  const weekFormat = useSettingStore((state) => state.weekFormat);
+
+  const use12Hours =
+    (is24Hour ?? db.settings.getTimeFormat() === "24-hour") === false;
+  const firstDay = firstDayOfWeek ?? (weekFormat === "Mon" ? 1 : 0);
+
+  const styles = useMemo(
+    () =>
+      ({
+        ...defaultStyles,
+        today: {
+          borderColor: colors.primary.accent,
+          borderWidth: 1,
+          borderRadius: Radius.S
+        },
+        today_label: {
+          color: colors.primary.accent
+        },
+        selected: {
+          backgroundColor: colors.primary.accent,
+          borderRadius: Radius.S
+        },
+        selected_label: {
+          color: colors.static.white
+        },
+        day_label: {
+          color: colors.primary.paragraph,
+          fontFamily: FontFamily.REGULAR
+        },
+        disabled_label: {
+          color: colors.disabled.paragraph
+        },
+        outside_label: {
+          color: colors.secondary.paragraph
+        },
+        weekday_label: {
+          color: colors.secondary.paragraph,
+          fontFamily: FontFamily.MEDIUM
+        },
+        month_selector_label: {
+          color: colors.primary.heading,
+          fontFamily: FontFamily.SEMI_BOLD
+        },
+        year_selector_label: {
+          color: colors.primary.heading,
+          fontFamily: FontFamily.SEMI_BOLD
+        },
+        time_selector_label: {
+          color: colors.primary.heading,
+          fontFamily: FontFamily.SEMI_BOLD
+        },
+        month_label: {
+          color: colors.primary.paragraph
+        },
+        year_label: {
+          color: colors.primary.paragraph
+        },
+        selected_month: {
+          backgroundColor: colors.primary.accent,
+          borderRadius: Radius.S
+        },
+        selected_month_label: {
+          color: colors.static.white
+        },
+        selected_year: {
+          backgroundColor: colors.primary.accent,
+          borderRadius: Radius.S
+        },
+        selected_year_label: {
+          color: colors.static.white
+        },
+        active_year: {
+          backgroundColor: colors.secondary.background,
+          borderRadius: Radius.S
+        },
+        time_label: {
+          color: colors.primary.heading,
+          fontFamily: FontFamily.SEMI_BOLD
+        },
+        time_selected_indicator: {
+          backgroundColor: colors.secondary.background,
+          borderRadius: Radius.S
+        }
+      }) as ReturnType<typeof useDefaultStyles>,
+    [colors, defaultStyles]
+  );
+
+  return (
+    <RNDateTimePicker
+      mode="single"
+      date={date}
+      timePicker={mode !== "date"}
+      initialView={mode === "time" ? "time" : "day"}
+      hideHeader={mode === "time"}
+      use12Hours={use12Hours}
+      firstDayOfWeek={firstDay}
+      minDate={minDate}
+      maxDate={maxDate}
+      styles={styles}
+      components={{
+        IconPrev: (
+          <AppIcon
+            name="chevron-left"
+            iconFamily="notesnook"
+            size={20}
+            color={colors.primary.icon}
+          />
+        ),
+        IconNext: (
+          <AppIcon
+            name="chevron-right"
+            iconFamily="notesnook"
+            size={20}
+            color={colors.primary.icon}
+          />
+        )
+      }}
+      onChange={(params) => {
+        const changed = (params as { date: DateType }).date;
+        onChange(toDate(changed));
+      }}
+    />
+  );
+}

apps/mobile/app/components/date-time-picker/index.tsx

@@ -0,0 +1,224 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useState } from "react";
+import { View, ViewStyle } from "react-native";
+import { Radius, Spacing } from "../../common/design/spacing";
+import { presentDialog } from "../dialog/functions";
+import { presentSheet } from "../../services/event-manager";
+import AppIcon from "../ui/AppIcon";
+import { Button } from "../ui/button";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import DateTimePicker, {
+  DateTimePickerMode,
+  DateTimePickerProps
+} from "./date-time-picker";
+
+export { default } from "./date-time-picker";
+export type {
+  DateTimePickerMode,
+  DateTimePickerProps
+} from "./date-time-picker";
+
+const DEFAULT_ICONS: Record<DateTimePickerMode, string> = {
+  date: "calendar-dots",
+  time: "clock",
+  datetime: "calendar-dots"
+};
+
+export type PresentDateTimePickerOptions = Pick<
+  DateTimePickerProps,
+  "minDate" | "maxDate" | "is24Hour" | "firstDayOfWeek"
+> & {
+  mode?: DateTimePickerMode;
+  /** Initial value the picker opens on. Defaults to now. */
+  date?: Date;
+  title?: string;
+  description?: string;
+  icon?: string;
+  /** Label for the confirm button. Defaults to `strings.done()`. */
+  confirmText?: string;
+  /** Dialog context to render into (dialog presentation only). */
+  context?: string;
+  onConfirm: (date: Date) => void;
+  onCancel?: () => void;
+};
+
+type Presentation = "dialog" | "sheet";
+
+type DateTimePickerContentProps = PresentDateTimePickerOptions & {
+  presentation: Presentation;
+  close?: (ctx?: string) => void;
+};
+
+/**
+ * The shared picker body used by both the dialog and the sheet: a header,
+ * the themed picker, and Cancel/Confirm actions. Presentation-specific chrome
+ * (the dialog card vs. the sheet surface) is applied by the outer container.
+ */
+function DateTimePickerContent({
+  presentation,
+  mode = "date",
+  date,
+  minDate,
+  maxDate,
+  is24Hour,
+  firstDayOfWeek,
+  title,
+  description,
+  icon,
+  confirmText,
+  onConfirm,
+  onCancel,
+  close
+}: DateTimePickerContentProps) {
+  const { colors } = useThemeColors();
+  const [selected, setSelected] = useState<Date>(date || new Date());
+
+  const containerStyle: ViewStyle =
+    presentation === "dialog"
+      ? {
+          width: "90%",
+          maxWidth: 400,
+          alignSelf: "center",
+          backgroundColor: colors.primary.background,
+          borderRadius: Radius.S,
+          borderWidth: 0.5,
+          borderColor: colors.primary.border,
+          overflow: "hidden"
+        }
+      : {
+          width: "100%"
+        };
+
+  return (
+    <View style={containerStyle}>
+      <View
+        style={{
+          paddingHorizontal: Spacing.LEVEL_3,
+          paddingVertical: Spacing.LEVEL_4,
+          gap: Spacing.LEVEL_3
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: Spacing.LEVEL_1
+          }}
+        >
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: Radius.XS,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: colors.secondary.background
+            }}
+          >
+            <AppIcon
+              name={icon || DEFAULT_ICONS[mode]}
+              iconFamily="notesnook"
+              size={16}
+              color={colors.primary.icon}
+            />
+          </View>
+          <View style={{ flexShrink: 1, gap: Spacing.LEVEL_1 }}>
+            <Heading fontSize="XL" lineHeight="100%">
+              {title ||
+                (mode === "time"
+                  ? strings.selectTimeHeading()
+                  : strings.selectDate())}
+            </Heading>
+            {description ? (
+              <Paragraph fontSize="SM" color={colors.secondary.paragraph}>
+                {description}
+              </Paragraph>
+            ) : null}
+          </View>
+        </View>
+
+        {/* <View style={{ height: 1, backgroundColor: colors.primary.border }} /> */}
+
+        <DateTimePicker
+          mode={mode}
+          date={selected}
+          onChange={setSelected}
+          minDate={minDate}
+          maxDate={maxDate}
+          is24Hour={is24Hour}
+          firstDayOfWeek={firstDayOfWeek}
+        />
+
+        <View style={{ flexDirection: "row", gap: Spacing.LEVEL_2 }}>
+          <Button
+            title={strings.cancel()}
+            type="plain-outline"
+            style={{ flex: 1, width: "auto" }}
+            onPress={() => {
+              close?.();
+              onCancel?.();
+            }}
+          />
+          <Button
+            title={confirmText || strings.done()}
+            type="accent"
+            style={{ flex: 1, width: "auto" }}
+            onPress={() => {
+              close?.();
+              onConfirm(selected);
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Show the themed date/time picker in a dialog. This is the default surface
+ * used across the app. Resolves the picked value through `onConfirm`;
+ * dismissing without confirming calls `onCancel`.
+ */
+export function presentDateTimePicker(options: PresentDateTimePickerOptions) {
+  presentDialog({
+    context: options.context || "global",
+    component: (close) => (
+      <DateTimePickerContent {...options} presentation="dialog" close={close} />
+    )
+  });
+}
+
+/**
+ * Show the same date/time picker in a bottom sheet. Preferred on the
+ * add-reminder screen; elsewhere use {@link presentDateTimePicker}.
+ */
+export function presentDateTimePickerSheet(
+  options: PresentDateTimePickerOptions
+) {
+  presentSheet({
+    context: options.context || "global",
+    component: (_ref, close) => (
+      <DateTimePickerContent {...options} presentation="sheet" close={close} />
+    )
+  });
+}

apps/mobile/app/components/properties/date-meta.tsx

@@ -17,23 +17,40 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState } from "react";
-import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
-import { db } from "../../common/database";
 import { Item, Note } from "@notesnook/core";
-import AppIcon from "../ui/AppIcon";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { db } from "../../common/database";
 import { Radius, Spacing } from "../../common/design/spacing";
+import { presentDateTimePicker } from "../date-time-picker";
+import AppIcon from "../ui/AppIcon";
+import Paragraph from "../ui/typography/paragraph";
 export const DateMeta = ({ item }: { item: Item }) => {
-  const { colors, isDark } = useThemeColors();
-  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const { colors } = useThemeColors();
   const [dateCreated, setDateCreated] = useState(item.dateCreated);
 
+  const editDateCreated = () => {
+    presentDateTimePicker({
+      context: "properties",
+      mode: "datetime",
+      title: strings.changeCreatedDate(),
+      description: strings.changeCreatedDateDesc(),
+      confirmText: strings.change(),
+      date: new Date(dateCreated),
+      maxDate: new Date((item as Note).dateEdited),
+      onConfirm: async (date) => {
+        await db.notes.add({
+          id: item.id,
+          dateCreated: date.getTime()
+        });
+        setDateCreated(date.getTime());
+      }
+    });
+  };
+
   function getDateMeta() {
     const keys = Object.keys(item);
     if (keys.includes("dateEdited"))
@@ -46,8 +63,14 @@ export const DateMeta = ({ item }: { item: Item }) => {
 
   const renderItem = (key: string) =>
     !item[key as keyof Item] ? null : (
-      <View
+      <TouchableOpacity
         key={key}
+        activeOpacity={1}
+        onPress={
+          item.type !== "note" || key !== "dateCreated"
+            ? undefined
+            : editDateCreated
+        }
         style={{
           flexDirection: "row",
           width: "48.5%",
@@ -64,7 +87,7 @@ export const DateMeta = ({ item }: { item: Item }) => {
             gap: Spacing.LEVEL_0
           }}
         >
-          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          <Paragraph fontSize="XS" color={colors.secondary.paragraph}>
             {strings.dateDescFromKey(
               key as
                 | "dateDeleted"
@@ -75,16 +98,9 @@ export const DateMeta = ({ item }: { item: Item }) => {
             )}
           </Paragraph>
           <Paragraph
-            size={AppFontSize.xs}
+            fontSize="XS"
             color={colors.primary.heading}
             fontFamily="MEDIUM"
-            onPress={
-              item.type !== "note"
-                ? undefined
-                : () => {
-                    setIsDatePickerVisible(true);
-                  }
-            }
           >
             {getFormattedDate(
               key === "dateCreated"
@@ -100,42 +116,17 @@ export const DateMeta = ({ item }: { item: Item }) => {
             <AppIcon name="edit-pencil" size={16} iconFamily="notesnook" />
           </>
         ) : null}
-      </View>
+      </TouchableOpacity>
     );
 
   return (
-    <>
-      {item.type === "note" ? (
-        <DateTimePickerModal
-          isVisible={isDatePickerVisible}
-          mode="datetime"
-          onConfirm={async (date: Date) => {
-            await db.notes.add({
-              id: item.id,
-              dateCreated: date.getTime()
-            });
-            setDateCreated(date.getTime());
-            setIsDatePickerVisible(false);
-          }}
-          onCancel={() => {
-            setIsDatePickerVisible(false);
-          }}
-          maximumDate={new Date((item as Note).dateEdited)}
-          isDarkModeEnabled={isDark}
-          themeVariant={isDark ? "dark" : "light"}
-          is24Hour={db.settings.getTimeFormat() === "24-hour"}
-          date={new Date(dateCreated)}
-        />
-      ) : null}
-
-      <View
-        style={{
-          flexDirection: "row",
-          gap: Spacing.LEVEL_2
-        }}
-      >
-        {getDateMeta().map(renderItem)}
-      </View>
-    </>
+    <View
+      style={{
+        flexDirection: "row",
+        gap: Spacing.LEVEL_2
+      }}
+    >
+      {getDateMeta().map(renderItem)}
+    </View>
   );
 };

apps/mobile/app/hooks/use-actions.tsx

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
 import { isFeatureAvailable, useAreFeaturesAvailable } from "@notesnook/common";
+import dayjs from "dayjs";
 import {
   Color,
   createInternalLink,
@@ -32,7 +33,7 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import { DisplayedNotification } from "@notifee/react-native";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { InteractionManager, Platform } from "react-native";
 import Share from "react-native-share";
 import { DatabaseLogger, db } from "../common/database";
@@ -75,7 +76,7 @@ import { convertNoteToText } from "../utils/note-to-text";
 import { NotesnookModule } from "../utils/notesnook-module";
 import { sleep } from "../utils/time";
 
-import DatePickerComponent from "../components/date-picker";
+import { presentDateTimePicker } from "../components/date-time-picker";
 
 export type ActionId =
   | "select"
@@ -1227,26 +1228,26 @@ export const useActions = ({
               return;
             }
 
-            presentDialog({
+            presentDateTimePicker({
               context: "properties",
-              component: (close) => (
-                <DatePickerComponent
-                  onCancel={() => close?.()}
-                  onConfirm={async (date) => {
-                    close?.();
-                    await db.notes.setExpiryDate(date.getTime(), item.id);
-                    Navigation.queueRoutesForUpdate();
-                    eSendEvent(eMenuItemUpdate);
-                    ToastManager.show({
-                      message: strings.expiryDateSet(),
-                      type: "success",
-                      context: "local"
-                    });
+              mode: "date",
+              title: strings.setExpiry(),
+              description: strings.setExpiryDesc(),
+              confirmText: strings.setExpiry(),
+              date: dayjs().add(1, "week").toDate(),
+              minDate: dayjs().add(1, "day").toDate(),
+              onConfirm: async (date) => {
+                await db.notes.setExpiryDate(date.getTime(), item.id);
+                Navigation.queueRoutesForUpdate();
+                eSendEvent(eMenuItemUpdate);
+                ToastManager.show({
+                  message: strings.expiryDateSet(),
+                  type: "success",
+                  context: "local"
+                });
 
-                    setItem((await db.notes.note(item.id)) as Item);
-                  }}
-                />
-              )
+                setItem((await db.notes.note(item.id)) as Item);
+              }
             });
           }
         }

apps/mobile/app/screens/add-reminder/index.tsx

@@ -16,12 +16,12 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Note, Reminder } from "@notesnook/core";
 import {
   getFormattedDate,
   useIsFeatureAvailable,
   usePromise
 } from "@notesnook/common";
+import { Note, Reminder } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -34,10 +34,12 @@ import {
   View
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Spacing, Radius } from "../../common/design/spacing";
 import { db } from "../../common/database";
+import { Radius, Spacing } from "../../common/design/spacing";
+import { presentDateTimePicker } from "../../components/date-time-picker";
 import { Dialog } from "../../components/dialog";
 import { Header } from "../../components/header";
+import PaywallSheet from "../../components/sheets/paywall";
 import AppIcon from "../../components/ui/AppIcon";
 import { Button } from "../../components/ui/button";
 import FormInput, {
@@ -55,7 +57,6 @@ import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import Notifications from "../../services/notifications";
 import SettingsService from "../../services/settings";
-import PaywallSheet from "../../components/sheets/paywall";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote } from "../../utils/events";
@@ -125,8 +126,6 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
   const [reminderNotificationMode, setReminderNotificatioMode] = useState<
     Reminder["priority"]
   >(reminder?.priority || SettingsService.get().reminderNotificationMode);
-  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
-  const [pickerMode, setPickerMode] = useState<"date" | "time">("date");
   const [dateSelected, setDateSelected] = useState(!!reminder);
   const [timeSelected, setTimeSelected] = useState(!!reminder);
   const [frequencyExpanded, setFrequencyExpanded] = useState(true);
@@ -194,20 +193,10 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
     reminderMode === "repeat" &&
     (recurringMode === "week" || recurringMode === "month");
 
-  const openPicker = (mode: "date" | "time") => {
-    setPickerMode(mode);
-    setDatePickerVisibility(true);
-  };
-
-  const hidePicker = () => {
-    setDatePickerVisibility(false);
-  };
-
-  const handleConfirm = (selected: Date) => {
-    hidePicker();
+  const handleConfirm = (mode: "date" | "time", selected: Date) => {
     setDateError(undefined);
     const next = new Date(date);
-    if (pickerMode === "time") {
+    if (mode === "time") {
       next.setHours(selected.getHours(), selected.getMinutes(), 0, 0);
       setTimeSelected(true);
     } else {
@@ -221,6 +210,20 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
     setDate(next);
   };
 
+  const openPicker = (mode: "date" | "time") => {
+    presentDateTimePicker({
+      mode,
+      date,
+      minDate:
+        mode === "date" && reminderMode === "once" ? new Date() : undefined,
+      onConfirm: (selected) => handleConfirm(mode, selected),
+      description:
+        mode === "date"
+          ? strings.selectReminderDate()
+          : strings.selectReminderTime()
+    });
+  };
+
   const selectFrequency = (mode: FrequencyMode) => {
     if (
       mode !== "once" &&
@@ -645,19 +648,6 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
             ) : null}
           </View>
 
-          <DateTimePickerModal
-            isVisible={isDatePickerVisible}
-            mode={pickerMode}
-            minimumDate={reminderMode === "once" ? new Date() : undefined}
-            onConfirm={handleConfirm}
-            onCancel={hidePicker}
-            isDarkModeEnabled={isDark}
-            firstDayOfWeek={weekFormat === "Mon" ? 1 : 0}
-            is24Hour={db.settings.getTimeFormat() === "24-hour"}
-            date={date}
-            themeVariant={isDark ? "dark" : "light"}
-          />
-
           {/* More options */}
           <View style={{ gap: Spacing.LEVEL_3 }}>
             <Pressable

apps/mobile/app/screens/reminders/index.tsx

@@ -33,6 +33,7 @@ import AddReminder from "../add-reminder";
 import { isFeatureAvailable } from "@notesnook/common";
 import { ToastManager } from "../../services/event-manager";
 import PaywallSheet from "../../components/sheets/paywall";
+import { Spacing } from "../../common/design/spacing";
 
 export const Reminders = ({
   navigation,
@@ -68,6 +69,9 @@ export const Reminders = ({
             route: route.name
           });
         }}
+        style={{
+          paddingHorizontal: Spacing.LEVEL_2
+        }}
         id={route.name}
         onPressDefaultRightButton={async () => {
           const reminderFeature = await isFeatureAvailable("activeReminders");

apps/mobile/ios/Podfile.lock

@@ -1946,34 +1946,6 @@ PODS:
     - react-native-config/App (= 1.5.7)
   - react-native-config/App (1.5.7):
     - React-Core
-  - react-native-date-picker (5.0.13):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SocketRocket
-    - Yoga
   - react-native-document-picker (11.0.3):
     - boost
     - DoubleConversion
@@ -3066,34 +3038,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNDateTimePicker (8.4.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SocketRocket
-    - Yoga
   - RNDeviceInfo (14.1.1):
     - React-Core
   - RNExitApp (1.1.0):
@@ -3608,7 +3552,6 @@ DEPENDENCIES:
   - react-native-blob-util (from `../node_modules/react-native-blob-util`)
   - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-config (from `../node_modules/react-native-config`)
-  - react-native-date-picker (from `../node_modules/react-native-date-picker`)
   - "react-native-document-picker (from `../node_modules/@react-native-documents/picker`)"
   - react-native-fast-openpgp (from `../node_modules/react-native-fast-openpgp`)
   - "react-native-fingerprint-scanner (from `../node_modules/@ammarahmed/react-native-fingerprint-scanner`)"
@@ -3670,7 +3613,6 @@ DEPENDENCIES:
   - "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNFileViewer (from `../node_modules/react-native-file-viewer`)
@@ -3808,8 +3750,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-config:
     :path: "../node_modules/react-native-config"
-  react-native-date-picker:
-    :path: "../node_modules/react-native-date-picker"
   react-native-document-picker:
     :path: "../node_modules/@react-native-documents/picker"
   react-native-fast-openpgp:
@@ -3932,8 +3872,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNExitApp:
@@ -4036,7 +3974,6 @@ SPEC CHECKSUMS:
   react-native-blob-util: 7946b7e13acf0da5e849dc2f73fcfebe1d981699
   react-native-cameraroll: bb98380ee21115d5fe1ae0f8b80c86e044613746
   react-native-config: 963b5efabc864cf69412e54b5de49b6a23e4af03
-  react-native-date-picker: 4f4f40f6e65798038bb4b1bff47890c2be69c2e6
   react-native-document-picker: d624d3d9bd9311da87f6f7b64aa44f69927d8543
   react-native-fast-openpgp: 42a99ddfafbd132457cb7964062431fbaf666484
   react-native-fingerprint-scanner: d5e143a361f3f01858e9c45141ddcabc4fd57055
@@ -4098,7 +4035,6 @@ SPEC CHECKSUMS:
   RNCCheckbox: 33b44487ca8008394ce658cc32b26eab04f426ef
   RNCClipboard: 4b58c780f63676367640f23c8e114e9bd0cf86ac
   RNCMaskedView: 5ef8c95cbab95334a32763b72896a7b7d07e6299
-  RNDateTimePicker: 113004837aad399a525cd391ac70b7951219ff2f
   RNDeviceInfo: bcce8752b5043a623fe3c26789679b473f705d3c
   RNExitApp: 890cce29b4e01372c84b3b775f9a63f90d77de19
   RNFileViewer: 4b5d83358214347e4ab2d4ca8d5c1c90d869e251

apps/mobile/package-lock.json

@@ -40,7 +40,6 @@
         "@react-native-camera-roll/camera-roll": "^7.10.2",
         "@react-native-clipboard/clipboard": "^1.16.3",
         "@react-native-community/checkbox": "^0.5.20",
-        "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native-community/netinfo": "^11.4.1",
         "@react-native-community/toolbar-android": "^0.2.1",
         "@react-native-documents/picker": "^11.0.3",
@@ -81,7 +80,6 @@
         "react-native-bootsplash": "6.3.11",
         "react-native-check-version": "^1.3.0",
         "react-native-config": "github:protikbiswas100/react-native-config#fabric-windows-implementation",
-        "react-native-date-picker": "5.0.13",
         "react-native-device-info": "^14.1.1",
         "react-native-drax": "^0.10.2",
         "react-native-exit-app": "github:ammarahm-ed/react-native-exit-app",
@@ -100,7 +98,6 @@
         "react-native-keychain": "4.0.5",
         "react-native-material-menu": "^2.0.0",
         "react-native-mmkv-storage": "^12.0.1",
-        "react-native-modal-datetime-picker": "14.0.0",
         "react-native-nano-icons": "^0.1.8",
         "react-native-navigation-bar-color": "2.0.2",
         "react-native-nitro-cloud-uploader": "^1.0.9",
@@ -123,6 +120,7 @@
         "react-native-swiper-flatlist": "3.2.2",
         "react-native-theme-switch-animation": "^0.6.0",
         "react-native-tooltips": "^1.0.3",
+        "react-native-ui-datepicker": "^3.3.0",
         "react-native-url-polyfill": "^2.0.0",
         "react-native-vector-icons": "10.3.0",
         "react-native-view-shot": "^4.0.3",
@@ -4817,29 +4815,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@react-native-community/datetimepicker": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.4.5.tgz",
-      "integrity": "sha512-vvVOJAHjU8TFBzTUjQzANCL6C3pZSE2zjfutCATk790uz7ASEc2tOBD+EIG4BTelWtP2G9jqvXp2L7XGdhEBRg==",
-      "license": "MIT",
-      "dependencies": {
-        "invariant": "^2.2.4"
-      },
-      "peerDependencies": {
-        "expo": ">=52.0.0",
-        "react": "*",
-        "react-native": "*",
-        "react-native-windows": "*"
-      },
-      "peerDependenciesMeta": {
-        "expo": {
-          "optional": true
-        },
-        "react-native-windows": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@react-native-community/netinfo": {
       "version": "11.4.1",
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-11.4.1.tgz",
@@ -8034,6 +8009,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -11375,6 +11359,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/jalali-plugin-dayjs": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/jalali-plugin-dayjs/-/jalali-plugin-dayjs-1.1.4.tgz",
+      "integrity": "sha512-d62QGMTufGQ1TSov4a85gBU58PA8aL6wVQs9BnC3+d/VA+v4Sq0OqM3o6RoY+/VZjliYJroGIPwlSVf7uLnZ3w==",
+      "license": "MIT"
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -16101,16 +16091,6 @@
         }
       }
     },
-    "node_modules/react-native-date-picker": {
-      "version": "5.0.13",
-      "resolved": "https://registry.npmjs.org/react-native-date-picker/-/react-native-date-picker-5.0.13.tgz",
-      "integrity": "sha512-qCLUODZVsJetO5zuoXjw1D39K527XWqBG8sOfhWdHyPzf13h8RXR1/RSKd1N0fdRDi5GdyizYmB0lPAK12/hbw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">= 17.0.1",
-        "react-native": ">= 0.64.3"
-      }
-    },
     "node_modules/react-native-device-info": {
       "version": "14.1.1",
       "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-14.1.1.tgz",
@@ -16337,19 +16317,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native-modal-datetime-picker": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-14.0.0.tgz",
-      "integrity": "sha512-orI0BMgX9uooSZWYIILmMaZXqi8Ebr0vqsLUFL03zORpv9NvkBlLMQ8dZVdDxWUc1Lbx/N5DJskC16AOypPy8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@react-native-community/datetimepicker": ">=3.0.0",
-        "react-native": ">=0.65.0"
-      }
-    },
     "node_modules/react-native-nano-icons": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/react-native-nano-icons/-/react-native-nano-icons-0.1.8.tgz",
@@ -16852,6 +16819,26 @@
       "integrity": "sha512-f2XEL23FlPMpIq11t6EIYGf1sl1FoWCwQRFIvQB9+6v5Jyod1O61yoKy2lgg91Egz531Szmqac0wTXuxVC9vjw==",
       "license": "Apache License"
     },
+    "node_modules/react-native-ui-datepicker": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-ui-datepicker/-/react-native-ui-datepicker-3.3.0.tgz",
+      "integrity": "sha512-TdiOADwpQQDEtD6RxzPFfu9iZlMrQkmIMlqYNXE9zigyTlG8kstnSLSCS/lJ+fS5/L4LGU/26xp0oVuYMzDzCg==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "dayjs": "^1.11.13",
+        "jalali-plugin-dayjs": "^1.1.4",
+        "lodash": "^4.17.21",
+        "tailwind-merge": "^3.0.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-url-polyfill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",
@@ -18891,6 +18878,16 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",

apps/mobile/package.json

@@ -58,7 +58,6 @@
     "@react-native-camera-roll/camera-roll": "^7.10.2",
     "@react-native-clipboard/clipboard": "^1.16.3",
     "@react-native-community/checkbox": "^0.5.20",
-    "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/toolbar-android": "^0.2.1",
     "@react-native-documents/picker": "^11.0.3",
@@ -99,7 +98,6 @@
     "react-native-bootsplash": "6.3.11",
     "react-native-check-version": "^1.3.0",
     "react-native-config": "github:protikbiswas100/react-native-config#fabric-windows-implementation",
-    "react-native-date-picker": "5.0.13",
     "react-native-device-info": "^14.1.1",
     "react-native-drax": "^0.10.2",
     "react-native-exit-app": "github:ammarahm-ed/react-native-exit-app",
@@ -118,7 +116,6 @@
     "react-native-keychain": "4.0.5",
     "react-native-material-menu": "^2.0.0",
     "react-native-mmkv-storage": "^12.0.1",
-    "react-native-modal-datetime-picker": "14.0.0",
     "react-native-nano-icons": "^0.1.8",
     "react-native-navigation-bar-color": "2.0.2",
     "react-native-nitro-cloud-uploader": "^1.0.9",
@@ -141,6 +138,7 @@
     "react-native-swiper-flatlist": "3.2.2",
     "react-native-theme-switch-animation": "^0.6.0",
     "react-native-tooltips": "^1.0.3",
+    "react-native-ui-datepicker": "^3.3.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "10.3.0",
     "react-native-view-shot": "^4.0.3",

apps/mobile/patches/react-native-ui-datepicker+3.3.0.patch

@@ -0,0 +1,166 @@
+diff --git a/node_modules/react-native-ui-datepicker/lib/commonjs/components/time-picker/wheel-picker/wheel-picker.js b/node_modules/react-native-ui-datepicker/lib/commonjs/components/time-picker/wheel-picker/wheel-picker.js
+index 0140365..abecca4 100644
+--- a/node_modules/react-native-ui-datepicker/lib/commonjs/components/time-picker/wheel-picker/wheel-picker.js
++++ b/node_modules/react-native-ui-datepicker/lib/commonjs/components/time-picker/wheel-picker/wheel-picker.js
+@@ -32,6 +32,7 @@ const WheelPicker = ({
+   flatListProps = {}
+ }) => {
+   const momentumStarted = (0, _react.useRef)(false);
++  const isUserScrolling = (0, _react.useRef)(false);
+   const selectedIndex = options.findIndex(item => item.value === value);
+   const flatListRef = (0, _react.useRef)(null);
+   const [scrollY] = (0, _react.useState)(new _reactNative.Animated.Value(selectedIndex * itemHeight));
+@@ -58,11 +59,21 @@ const WheelPicker = ({
+       onChange(((_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.value) || 0);
+     }
+   };
++  const handleScrollBeginDrag = () => {
++    isUserScrolling.current = true;
++  };
+   const handleMomentumScrollBegin = () => {
+     momentumStarted.current = true;
+   };
+   const handleMomentumScrollEnd = event => {
+     momentumStarted.current = false;
++    // Ignore momentum that wasn't started by a user drag (e.g. the FlatList
++    // settling onto initialScrollIndex on mount, or the scrollToIndex sync
++    // effect) — otherwise it can spuriously reset the value.
++    if (!isUserScrolling.current) {
++      return;
++    }
++    isUserScrolling.current = false;
+     handleScrollEnd(event);
+   };
+   const handleScrollEndDrag = event => {
+@@ -75,6 +86,7 @@ const WheelPicker = ({
+       // If momentum scroll hasn't started within the timeout,
+       // then it was a slow scroll that won't trigger momentum
+       if (!momentumStarted.current && offsetY !== undefined) {
++        isUserScrolling.current = false;
+         // Create a synthetic event with just the data we need
+         const syntheticEvent = {
+           nativeEvent: {
+@@ -130,6 +142,7 @@ const WheelPicker = ({
+     }], {
+       useNativeDriver: true
+     }),
++    onScrollBeginDrag: handleScrollBeginDrag,
+     onScrollEndDrag: handleScrollEndDrag,
+     onMomentumScrollBegin: handleMomentumScrollBegin,
+     onMomentumScrollEnd: handleMomentumScrollEnd,
+diff --git a/node_modules/react-native-ui-datepicker/lib/module/components/time-picker/wheel-picker/wheel-picker.js b/node_modules/react-native-ui-datepicker/lib/module/components/time-picker/wheel-picker/wheel-picker.js
+index 1c11309..8bd4ee8 100644
+--- a/node_modules/react-native-ui-datepicker/lib/module/components/time-picker/wheel-picker/wheel-picker.js
++++ b/node_modules/react-native-ui-datepicker/lib/module/components/time-picker/wheel-picker/wheel-picker.js
+@@ -23,6 +23,7 @@ const WheelPicker = ({
+   flatListProps = {}
+ }) => {
+   const momentumStarted = useRef(false);
++  const isUserScrolling = useRef(false);
+   const selectedIndex = options.findIndex(item => item.value === value);
+   const flatListRef = useRef(null);
+   const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+@@ -49,11 +50,21 @@ const WheelPicker = ({
+       onChange(((_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.value) || 0);
+     }
+   };
++  const handleScrollBeginDrag = () => {
++    isUserScrolling.current = true;
++  };
+   const handleMomentumScrollBegin = () => {
+     momentumStarted.current = true;
+   };
+   const handleMomentumScrollEnd = event => {
+     momentumStarted.current = false;
++    // Ignore momentum that wasn't started by a user drag (e.g. the FlatList
++    // settling onto initialScrollIndex on mount, or the scrollToIndex sync
++    // effect) — otherwise it can spuriously reset the value.
++    if (!isUserScrolling.current) {
++      return;
++    }
++    isUserScrolling.current = false;
+     handleScrollEnd(event);
+   };
+   const handleScrollEndDrag = event => {
+@@ -66,6 +77,7 @@ const WheelPicker = ({
+       // If momentum scroll hasn't started within the timeout,
+       // then it was a slow scroll that won't trigger momentum
+       if (!momentumStarted.current && offsetY !== undefined) {
++        isUserScrolling.current = false;
+         // Create a synthetic event with just the data we need
+         const syntheticEvent = {
+           nativeEvent: {
+@@ -121,6 +133,7 @@ const WheelPicker = ({
+     }], {
+       useNativeDriver: true
+     }),
++    onScrollBeginDrag: handleScrollBeginDrag,
+     onScrollEndDrag: handleScrollEndDrag,
+     onMomentumScrollBegin: handleMomentumScrollBegin,
+     onMomentumScrollEnd: handleMomentumScrollEnd,
+diff --git a/node_modules/react-native-ui-datepicker/src/components/time-picker/wheel-picker/wheel-picker.tsx b/node_modules/react-native-ui-datepicker/src/components/time-picker/wheel-picker/wheel-picker.tsx
+index a694882..a199982 100644
+--- a/node_modules/react-native-ui-datepicker/src/components/time-picker/wheel-picker/wheel-picker.tsx
++++ b/node_modules/react-native-ui-datepicker/src/components/time-picker/wheel-picker/wheel-picker.tsx
+@@ -56,6 +56,13 @@ const WheelPicker: React.FC<Props> = ({
+   flatListProps = {},
+ }) => {
+   const momentumStarted = useRef(false);
++  // Tracks whether the current scroll was initiated by the user dragging.
++  // Programmatic scrolls (initialScrollIndex settle on mount, and the
++  // scrollToIndex sync effect below) never fire onScrollBeginDrag, so this
++  // flag lets us ignore the scroll-end events they emit — those transient
++  // events can report contentOffset.y ≈ 0 and would otherwise snap the value
++  // to 0 (e.g. resetting the time to 00:00 when switching to the time view).
++  const isUserScrolling = useRef(false);
+   const selectedIndex = options.findIndex((item) => item.value === value);
+ 
+   const flatListRef = useRef<FlatList>(null);
+@@ -98,6 +105,10 @@ const WheelPicker: React.FC<Props> = ({
+     }
+   };
+ 
++  const handleScrollBeginDrag = () => {
++    isUserScrolling.current = true;
++  };
++
+   const handleMomentumScrollBegin = () => {
+     momentumStarted.current = true;
+   };
+@@ -106,12 +117,20 @@ const WheelPicker: React.FC<Props> = ({
+     event: NativeSyntheticEvent<NativeScrollEvent>
+   ) => {
+     momentumStarted.current = false;
++    // Ignore momentum that wasn't started by a user drag (e.g. the FlatList
++    // settling onto initialScrollIndex on mount, or the scrollToIndex sync
++    // effect) — otherwise it can spuriously reset the value.
++    if (!isUserScrolling.current) {
++      return;
++    }
++    isUserScrolling.current = false;
+     handleScrollEnd(event);
+   };
+ 
+   const handleScrollEndDrag = (
+     event: NativeSyntheticEvent<NativeScrollEvent>
+   ) => {
++    // A drag-end only ever comes from real user interaction.
+     // Capture the offset value immediately
+     const offsetY = event.nativeEvent.contentOffset?.y;
+ 
+@@ -120,6 +139,7 @@ const WheelPicker: React.FC<Props> = ({
+       // If momentum scroll hasn't started within the timeout,
+       // then it was a slow scroll that won't trigger momentum
+       if (!momentumStarted.current && offsetY !== undefined) {
++        isUserScrolling.current = false;
+         // Create a synthetic event with just the data we need
+         const syntheticEvent = {
+           nativeEvent: {
+@@ -178,6 +198,7 @@ const WheelPicker: React.FC<Props> = ({
+           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+           { useNativeDriver: true }
+         )}
++        onScrollBeginDrag={handleScrollBeginDrag}
+         onScrollEndDrag={handleScrollEndDrag}
+         onMomentumScrollBegin={handleMomentumScrollBegin}
+         onMomentumScrollEnd={handleMomentumScrollEnd}

apps/mobile/react-native.config.js

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 const isGithubRelease = false;
 const config = {
-  commands: require("@callstack/repack/commands/rspack")
+  // commands: require("@callstack/repack/commands/rspack")
 };
 
 if (!config.dependencies) config.dependencies = {};

packages/icons/svgs/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="m14 18l-6-6l6-6l1.4 1.4l-4.6 4.6l4.6 4.6z"/></svg>

packages/intl/locale/en.po

@@ -788,7 +788,7 @@ msgstr "Add shortcut"
 msgid "Add shortcuts for notebooks and tags here."
 msgstr "Add shortcuts for notebooks and tags here."
 
-#: src/strings.ts:3027
+#: src/strings.ts:3029
 msgid "Add some details..."
 msgstr "Add some details..."
 
@@ -849,7 +849,7 @@ msgstr "Advanced settings"
 msgid "After scanning the QR code image, the app will display a code that you can enter below."
 msgstr "After scanning the QR code image, the app will display a code that you can enter below."
 
-#: src/strings.ts:3024
+#: src/strings.ts:3026
 msgid "Alert mode"
 msgstr "Alert mode"
 
@@ -929,7 +929,7 @@ msgstr "All tools in this group will be removed from the toolbar."
 msgid "All your backups are stored in 'Phone Storage/Notesnook/backups/' folder"
 msgstr "All your backups are stored in 'Phone Storage/Notesnook/backups/' folder"
 
-#: src/strings.ts:3022
+#: src/strings.ts:3024
 msgid "All-day reminder"
 msgstr "All-day reminder"
 
@@ -1556,6 +1556,10 @@ msgstr "Change app lock pin"
 msgid "Change backup location"
 msgstr "Change backup location"
 
+#: src/strings.ts:3032
+msgid "Change created date"
+msgstr "Change created date"
+
 #: src/strings.ts:490
 msgid "Change email address"
 msgstr "Change email address"
@@ -1716,6 +1720,14 @@ msgstr "Choose how you want to secure your notes locally."
 msgid "Choose how you want to set up your Inbox PGP keys:"
 msgstr "Choose how you want to set up your Inbox PGP keys:"
 
+#: src/strings.ts:3018
+msgid "Choose the day you want to be reminded."
+msgstr "Choose the day you want to be reminded."
+
+#: src/strings.ts:3019
+msgid "Choose the time you want to be reminded."
+msgstr "Choose the time you want to be reminded."
+
 #: src/strings.ts:2702
 msgid "Choose what day to display as the first day of the week"
 msgstr "Choose what day to display as the first day of the week"
@@ -2192,7 +2204,7 @@ msgstr "Create new key"
 msgid "Create notebook"
 msgstr "Create notebook"
 
-#: src/strings.ts:3028
+#: src/strings.ts:3030
 msgid "Create Reminder"
 msgstr "Create Reminder"
 
@@ -4607,7 +4619,7 @@ msgstr "Monthly"
 msgid "More"
 msgstr "More"
 
-#: src/strings.ts:3021
+#: src/strings.ts:3023
 msgid "More options"
 msgstr "More options"
 
@@ -4977,6 +4989,10 @@ msgstr "Note unpublished"
 msgid "Note version history is local only."
 msgstr "Note version history is local only."
 
+#: src/strings.ts:3031
+msgid "Note will get deleted on the set date."
+msgstr "Note will get deleted on the set date."
+
 #: src/strings.ts:1270
 msgid "NOTE: Creating a backup with attachments can take a while, and also fail completely. The app will try to resume/restart the backup in case of interruptions."
 msgstr "NOTE: Creating a backup with attachments can take a while, and also fail completely. The app will try to resume/restart the backup in case of interruptions."
@@ -6020,7 +6036,7 @@ msgstr "Reload app"
 msgid "Relogin to your account"
 msgstr "Relogin to your account"
 
-#: src/strings.ts:3023
+#: src/strings.ts:3025
 msgid "Remains active throughout the day."
 msgstr "Remains active throughout the day."
 
@@ -6629,7 +6645,11 @@ msgstr "Select date"
 msgid "Select date & time"
 msgstr "Select date & time"
 
-#: src/strings.ts:3019
+#: src/strings.ts:3034
+msgid "Select date and time to change the created date"
+msgstr "Select date and time to change the created date"
+
+#: src/strings.ts:3021
 msgid "Select Dates"
 msgstr "Select Dates"
 
@@ -6705,11 +6725,11 @@ msgstr "Select the languages the spell checker should check in."
 msgid "Select the release track for Notesnook."
 msgstr "Select the release track for Notesnook."
 
-#: src/strings.ts:3018
+#: src/strings.ts:3020
 msgid "Select time"
 msgstr "Select time"
 
-#: src/strings.ts:3020
+#: src/strings.ts:3022
 msgid "Select Time"
 msgstr "Select Time"
 
@@ -6947,7 +6967,7 @@ msgstr "Share to cloud"
 msgid "Share ZIP"
 msgstr "Share ZIP"
 
-#: src/strings.ts:3025
+#: src/strings.ts:3027
 msgid "Short Detail"
 msgstr "Short Detail"
 
@@ -8348,7 +8368,7 @@ msgstr "What happens to my data if I switch plans?"
 msgid "What is your refund policy?"
 msgstr "What is your refund policy?"
 
-#: src/strings.ts:3026
+#: src/strings.ts:3028
 msgid "What needs to be done?"
 msgstr "What needs to be done?"
 

packages/intl/locale/pseudo-LOCALE.po

@@ -786,9 +786,9 @@ msgstr ""
 
 #: src/strings.ts:761
 msgid "Add shortcuts for notebooks and tags here."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3027
+#: src/strings.ts:3029
 msgid "Add some details..."
 msgstr ""
 
@@ -847,9 +847,9 @@ msgstr ""
 
 #: src/strings.ts:1777
 msgid "After scanning the QR code image, the app will display a code that you can enter below."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3024
+#: src/strings.ts:3026
 msgid "Alert mode"
 msgstr ""
 
@@ -927,9 +927,9 @@ msgstr ""
 
 #: src/strings.ts:1392
 msgid "All your backups are stored in 'Phone Storage/Notesnook/backups/' folder"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3022
+#: src/strings.ts:3024
 msgid "All-day reminder"
 msgstr ""
 
@@ -1556,6 +1556,10 @@ msgstr ""
 msgid "Change backup location"
 msgstr ""
 
+#: src/strings.ts:3032
+msgid "Change created date"
+msgstr ""
+
 #: src/strings.ts:490
 msgid "Change email address"
 msgstr ""
@@ -1716,6 +1720,14 @@ msgstr ""
 msgid "Choose how you want to set up your Inbox PGP keys:"
 msgstr ""
 
+#: src/strings.ts:3018
+msgid "Choose the day you want to be reminded."
+msgstr ""
+
+#: src/strings.ts:3019
+msgid "Choose the time you want to be reminded."
+msgstr ""
+
 #: src/strings.ts:2702
 msgid "Choose what day to display as the first day of the week"
 msgstr ""
@@ -2179,9 +2191,9 @@ msgstr ""
 
 #: src/strings.ts:1562
 msgid "Create notebook"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3028
+#: src/strings.ts:3030
 msgid "Create Reminder"
 msgstr ""
 
@@ -4585,9 +4597,9 @@ msgstr ""
 
 #: src/strings.ts:2375
 msgid "More"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3021
+#: src/strings.ts:3023
 msgid "More options"
 msgstr ""
 
@@ -4957,6 +4969,10 @@ msgstr ""
 msgid "Note version history is local only."
 msgstr ""
 
+#: src/strings.ts:3031
+msgid "Note will get deleted on the set date."
+msgstr ""
+
 #: src/strings.ts:1270
 msgid "NOTE: Creating a backup with attachments can take a while, and also fail completely. The app will try to resume/restart the backup in case of interruptions."
 msgstr ""
@@ -5992,9 +6008,9 @@ msgstr "<<<<<<< HEAD<<<<<<< HEAD<<<<<<< HEAD"
 
 #: src/strings.ts:1879
 msgid "Relogin to your account"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3023
+#: src/strings.ts:3025
 msgid "Remains active throughout the day."
 msgstr ""
 
@@ -6601,9 +6617,13 @@ msgstr ""
 
 #: src/strings.ts:3017
 msgid "Select date & time"
+msgstr "<<<<<<< HEAD"
+
+#: src/strings.ts:3034
+msgid "Select date and time to change the created date"
 msgstr ""
 
-#: src/strings.ts:3019
+#: src/strings.ts:3021
 msgid "Select Dates"
 msgstr ""
 
@@ -6677,13 +6697,13 @@ msgstr ""
 
 #: src/strings.ts:2520
 msgid "Select the release track for Notesnook."
-msgstr "<<<<<<< HEAD"
+msgstr "<<<<<<< HEAD<<<<<<< HEAD"
 
-#: src/strings.ts:3018
+#: src/strings.ts:3020
 msgid "Select time"
 msgstr ""
 
-#: src/strings.ts:3020
+#: src/strings.ts:3022
 msgid "Select Time"
 msgstr ""
 
@@ -6911,9 +6931,9 @@ msgstr "<<<<<<< HEAD<<<<<<< HEAD"
 
 #: src/strings.ts:2981
 msgid "Share ZIP"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3025
+#: src/strings.ts:3027
 msgid "Short Detail"
 msgstr ""
 
@@ -8296,9 +8316,9 @@ msgstr ""
 
 #: src/strings.ts:2581
 msgid "What is your refund policy?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
-#: src/strings.ts:3026
+#: src/strings.ts:3028
 msgid "What needs to be done?"
 msgstr ""
 

packages/intl/src/strings.ts

@@ -3015,6 +3015,8 @@ Continue without attachments?`,
     t`The reminder will occur on the selected day.`,
   reminderSelecetDateHelp: () => t`Adjusts to last day in shorter months`,
   selectDateAndTime: () => t`Select date & time`,
+  selectReminderDate: () => t`Choose the day you want to be reminded.`,
+  selectReminderTime: () => t`Choose the time you want to be reminded.`,
   selectTimeHeading: () => t`Select time`,
   selectDatesPlaceholder: () => t`Select Dates`,
   selectTimePlaceholder: () => t`Select Time`,
@@ -3025,5 +3027,9 @@ Continue without attachments?`,
   reminderShortDetail: () => t`Short Detail`,
   reminderTitlePlaceholder: () => t`What needs to be done?`,
   reminderDetailsPlaceholder: () => t`Add some details...`,
-  createReminder: () => t`Create Reminder`
+  createReminder: () => t`Create Reminder`,
+  setExpiryDesc: () => t`Note will get deleted on the set date.`,
+  changeCreatedDate: () => t`Change created date`,
+  changeCreatedDateDesc: () =>
+    t`Select date and time to change the created date`
 };