(mobile): fix build errors

.eslintignore

@@ -6,6 +6,7 @@ dist
 
 # mobile
 apps/mobile/native/
+apps/mobile/__tests__/
 
 # web
 apps/web/public/an.js

.eslintrc.js

@@ -67,7 +67,9 @@ module.exports = {
       },
       rules: {
         // TODO: remove this gradually
-        "@typescript-eslint/ban-ts-comment": "off"
+        "@typescript-eslint/ban-ts-comment": "off",
+        "react/react-in-jsx-scope": 2,
+        "react/jsx-uses-react": 2
       }
     }
   ]

apps/mobile/.gitignore

@@ -4,6 +4,8 @@ artifacts/
 #
 .DS_Store
 
+native/android/app/src/main/assets/
+
 *Issues.md
 build_cache/
 #

apps/mobile/app/app.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { withErrorBoundry } from "./components/exception-handler";

apps/mobile/app/common/database/index.js

@@ -12,7 +12,6 @@ import Storage, { KV } from "./storage";
 const LoggerStorage = new MMKVLoader()
   .withInstanceID("notesnook_logs")
   .initialize();
-console.log(LoggerStorage);
 initalize(new KV(LoggerStorage));
 export const DatabaseLogger = dbLogger;
 

apps/mobile/app/common/filesystem/download.js

@@ -1,15 +1,16 @@
+import NetInfo from "@react-native-community/netinfo";
+import hosts from "@streetwriters/notesnook-core/utils/constants";
+import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
 import Sodium from "react-native-sodium";
 import RNFetchBlob from "rn-fetch-blob";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { presentSheet, ToastEvent } from "../../services/event-manager";
+import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, fileCheck } from "./utils";
-import hosts from "@streetwriters/notesnook-core/utils/constants";
-import NetInfo from "@react-native-community/netinfo";
 
 export async function downloadFile(filename, data, cancelToken) {
   if (!data) return false;

apps/mobile/app/components/announcements/announcement.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { FlatList, View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useMessageStore } from "../../stores/use-message-store";

apps/mobile/app/components/announcements/body.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 

apps/mobile/app/components/announcements/cta.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from "../../services/event-manager";

apps/mobile/app/components/announcements/description.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";

apps/mobile/app/components/announcements/functions.js

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import React, { Fragment } from "react";
 import { View } from "react-native";
 import { allowedPlatforms } from "../../stores/use-message-store";
 import { ProFeatures } from "../dialogs/result/pro-features";

apps/mobile/app/components/announcements/index.js

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FlatList, View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useMessageStore } from "../../stores/use-message-store";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
+import { useMessageStore } from "../../stores/use-message-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import {
   eCloseAnnouncementDialog,
   eOpenAnnouncementDialog

apps/mobile/app/components/announcements/list.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";

apps/mobile/app/components/announcements/photo.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Image } from "react-native";
 import { getStyle } from "./functions";
 

apps/mobile/app/components/announcements/subheading.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";

apps/mobile/app/components/announcements/title.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
 import { SIZE } from "../../utils/size";

apps/mobile/app/components/attachments/actions.js

@@ -1,7 +1,10 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
+import { db } from "../../common/database";
+import filesystem from "../../common/filesystem";
+import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
 import {
   eSendEvent,
@@ -12,13 +15,10 @@ import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { formatBytes } from "../../utils";
-import { db } from "../../common/database";
 import {
   eCloseAttachmentDialog,
   eCloseProgressDialog
 } from "../../utils/events";
-import filesystem from "../../common/filesystem";
-import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";

apps/mobile/app/components/attachments/attachment-item.js

@@ -1,10 +1,11 @@
+import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../common/database";
+import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { formatBytes } from "../../utils";
-import { db } from "../../common/database";
-import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";

apps/mobile/app/components/attachments/index.js

@@ -1,18 +1,18 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../common/database";
+import filesystem from "../../common/filesystem";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { db } from "../../common/database";
 import {
   eCloseAttachmentDialog,
   eOpenAttachmentsDialog
 } from "../../utils/events";
-import filesystem from "../../common/filesystem";
 import { SIZE } from "../../utils/size";
 import DialogHeader from "../dialog/dialog-header";
 import { Toast } from "../toast";

apps/mobile/app/components/auth/auth-modal.js

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { Platform, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
@@ -13,8 +15,6 @@ import { IconButton } from "../ui/icon-button";
 import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform, View } from "react-native";
 
 export const AuthMode = {
   login: 0,

apps/mobile/app/components/auth/change-password.js

@@ -1,15 +1,15 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { View } from "react-native";
-import { useUserStore } from "../../stores/use-user-store";
+import { db } from "../../common/database";
 import {
   eSendEvent,
   presentSheet,
   ToastEvent
 } from "../../services/event-manager";
-import { db } from "../../common/database";
+import { useUserStore } from "../../stores/use-user-store";
 import { eCloseProgressDialog } from "../../utils/events";
-import { Button } from "../ui/button";
 import DialogHeader from "../dialog/dialog-header";
+import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";

apps/mobile/app/components/auth/forgot-password.js

@@ -1,11 +1,11 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
+import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { db } from "../../common/database";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";

apps/mobile/app/components/auth/index.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { Toast } from "../toast";

apps/mobile/app/components/auth/login.js

@@ -1,14 +1,15 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
+import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, ToastEvent } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
-import { useUserStore } from "../../stores/use-user-store";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { db } from "../../common/database";
+import { useUserStore } from "../../stores/use-user-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
@@ -20,10 +21,9 @@ import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { SVG } from "./background";
+import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import TwoFactorVerification from "./two-factor";
-import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
-import { hideAuth } from "./common";
 export const Login = ({ changeMode }) => {
   const colors = useThemeStore((state) => state.colors);
   const email = useRef();

apps/mobile/app/components/auth/session-expired.js

@@ -1,7 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Modal, View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
+import { db } from "../../common/database";
 import BiometricService from "../../services/biometrics";
 import {
   eSendEvent,
@@ -11,22 +10,23 @@ import {
 } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
+import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
-import { db } from "../../common/database";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { IconButton } from "../ui/icon-button";
-import { Button } from "../ui/button";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
-import Input from "../ui/input";
-import { Toast } from "../toast";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import SettingsService from "../../services/settings";
-import TwoFactorVerification from "./two-factor";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
+import { Toast } from "../toast";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import Input from "../ui/input";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import TwoFactorVerification from "./two-factor";
 
 function getEmail(email) {
   if (!email) return null;

apps/mobile/app/components/auth/signup.js

@@ -1,14 +1,14 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Dimensions, View } from "react-native";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
+import umami from "../../common/analytics";
+import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
-import umami from "../../common/analytics";
-import { db } from "../../common/database";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";

apps/mobile/app/components/auth/two-factor.js

@@ -1,9 +1,14 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
-import { eSendEvent, presentSheet } from "../../services/event-manager";
+import { db } from "../../common/database/index";
+import useTimer from "../../hooks/use-timer";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastEvent
+} from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { eCloseProgressDialog } from "../../utils/events";
-import useTimer from "../../hooks/use-timer";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -12,8 +17,6 @@ import { PressableButton } from "../ui/pressable";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { db } from "../../common/database/index";
-import { ToastEvent } from "../../services/event-manager";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   const colors = useThemeStore((state) => state.colors);

apps/mobile/app/components/container/container-header.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 
 export const ContainerHeader = ({ children }) => {
   const colors = useThemeStore((state) => state.colors);

apps/mobile/app/components/container/floating-button.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Keyboard, Platform, View } from "react-native";
 import Animated, {
   Easing,

apps/mobile/app/components/container/index.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { KeyboardAvoidingView, Platform, SafeAreaView } from "react-native";
-import { useSettingStore } from "../../stores/use-setting-store";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { Header } from "../header";
 import SelectionHeader from "../selection-header";
 export const Container = ({ children }) => {

apps/mobile/app/components/delay-layout/default-placeholder.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeStore } from "../../stores/use-theme-store";

apps/mobile/app/components/delay-layout/index.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { ViewProps } from "react-native";
 import Animated, { FadeOutUp } from "react-native-reanimated";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 

apps/mobile/app/components/delay-layout/settings-placeholder.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 

apps/mobile/app/components/dialog/base-dialog.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import {
   KeyboardAvoidingView,
   Modal,
@@ -8,8 +8,8 @@ import {
   TouchableOpacity,
   View
 } from "react-native";
-import { useSettingStore } from "../../stores/use-setting-store";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
 
 const BaseDialog = ({

apps/mobile/app/components/dialog/dialog-buttons.js

@@ -1,10 +1,11 @@
+import React from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { notesnook } from "../../../e2e/test.ids";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { notesnook } from "../../../e2e/test.ids";
 
 const DialogButtons = ({
   onPressPositive,

apps/mobile/app/components/dialog/dialog-container.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { DDS } from "../../services/device-detection";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
 
 const DialogContainer = ({ width, height, ...restProps }) => {

apps/mobile/app/components/dialog/dialog-header.tsx

@@ -1,5 +1,5 @@
-import { Text } from "react-native";
-import { View } from "react-native";
+import React from "react";
+import { Text, View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";

apps/mobile/app/components/dialog/index.js

@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
+import { Toast } from "../toast";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
-import { Toast } from "../toast";
 import BaseDialog from "./base-dialog";
 import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";

apps/mobile/app/components/dialogs/jump-to-section/index.js

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { useMessageStore } from "../../../stores/use-message-store";
 import { DDS } from "../../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
+import { useMessageStore } from "../../../stores/use-message-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { getElevation } from "../../../utils";
 import {
   eCloseJumpToDialog,

apps/mobile/app/components/dialogs/result/index.js

@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
 import { DDS } from "../../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { getElevation } from "../../../utils";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
-import { Button } from "../../ui/button";
 import BaseDialog from "../../dialog/base-dialog";
+import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";

apps/mobile/app/components/dialogs/result/pro-features.js

@@ -1,7 +1,8 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
 import { eSendEvent } from "../../../services/event-manager";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import {
   eCloseProgressDialog,
   eCloseResultDialog,

apps/mobile/app/components/dialogs/vault/index.js

@@ -1,8 +1,9 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { Component, createRef } from "react";
+import React, { Component, createRef } from "react";
 import { InteractionManager, View } from "react-native";
 import Share from "react-native-share";
 import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
@@ -15,7 +16,6 @@ import {
 import Navigation from "../../../services/navigation";
 import SearchService from "../../../services/search";
 import { getElevation, toTXT } from "../../../utils";
-import { db } from "../../../common/database";
 import {
   eClearEditor,
   eCloseActionSheet,

apps/mobile/app/components/header/left-menus.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { notesnook } from "../../../e2e/test.ids";
 import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";

apps/mobile/app/components/header/right-menus.js

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";

apps/mobile/app/components/header/title.js

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Platform, View } from "react-native";
+import { db } from "../../common/database";
 import Notebook from "../../screens/notebook";
 import {
   eSubscribeEvent,
@@ -7,7 +8,6 @@ import {
 } from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { db } from "../../common/database";
 import { eScrollEvent } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";

apps/mobile/app/components/image-preview/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
 import {

apps/mobile/app/components/intro/index.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import {
   Dimensions,
   Image,
@@ -8,14 +8,14 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import umami from "../../common/analytics";
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { DDS } from "../../services/device-detection";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
-import umami from "../../common/analytics";
 import { tabBarRef } from "../../utils/global-refs";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { SvgView } from "../ui/svg";

apps/mobile/app/components/intro/welcome.js

@@ -1,11 +1,12 @@
+import React from "react";
 import Animated, { FadeInDown } from "react-native-reanimated";
+import umami from "../../common/analytics";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import SettingsService from "../../services/settings";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
-import umami from "../../common/analytics";
 import { eOpenLoginDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { AuthMode } from "../auth";

apps/mobile/app/components/list-items/footer/index.js

@@ -1,5 +1,5 @@
 import { View } from "react-native";
-
+import React from "react";
 export const Footer = () => {
   return <View style={{ height: 150 }} />;
 };

apps/mobile/app/components/list-items/headers/notebook-header.js

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import React from "react";
 import { View } from "react-native";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { useMenuStore } from "../../../stores/use-menu-store";

apps/mobile/app/components/list-items/notebook/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";

apps/mobile/app/components/list-items/selection-wrapper/action-strip.js

@@ -1,16 +1,16 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import Animated, { SlideInUp, SlideOutDown } from "react-native-reanimated";
+import { db } from "../../../common/database";
 import { openVault, ToastEvent } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useTrashStore } from "../../../stores/use-trash-store";
 import { useMenuStore } from "../../../stores/use-menu-store";
 import { useNotebookStore } from "../../../stores/use-notebook-store";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
+import { useTrashStore } from "../../../stores/use-trash-store";
 import { dWidth, getElevation, toTXT } from "../../../utils";
-import { db } from "../../../common/database";
 import { deleteItems } from "../../../utils/functions";
 import { presentDialog } from "../../dialog/functions";
 import { Button } from "../../ui/button";

apps/mobile/app/components/list-items/selection-wrapper/back-fill.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
 import { useEditorStore } from "../../../stores/use-editor-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { hexToRGBA } from "../../../utils/color-scheme/utils";
 
 export const Filler = ({ item }) => {

apps/mobile/app/components/list-items/selection-wrapper/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent

apps/mobile/app/components/list-items/selection-wrapper/selection.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useSelectionStore } from "../../../stores/use-selection-store";

apps/mobile/app/components/list/card.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useMessageStore } from "../../stores/use-message-store";

apps/mobile/app/components/merge-conflicts/index.js

@@ -1,8 +1,9 @@
 import KeepAwake from "@sayem314/react-native-keep-awake";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Modal, SafeAreaView, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { db } from "../../common/database";
 import Editor from "../../screens/editor";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { DDS } from "../../services/device-detection";
@@ -15,7 +16,6 @@ import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { dHeight } from "../../utils";
-import { db } from "../../common/database";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { timeConverter } from "../../utils/time";

apps/mobile/app/components/note-history/index.js

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { presentSheet } from "../../services/event-manager";
 import { db } from "../../common/database";
+import { presentSheet } from "../../services/event-manager";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
 import { timeConverter, timeSince } from "../../utils/time";

apps/mobile/app/components/note-history/preview.js

@@ -1,4 +1,6 @@
+import React from "react";
 import { View } from "react-native";
+import { db } from "../../common/database";
 import Editor from "../../screens/editor";
 import EditorOverlay from "../../screens/editor/loading";
 import { editorController } from "../../screens/editor/tiptap/utils";
@@ -6,7 +8,6 @@ import { eSendEvent, ToastEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useEditorStore } from "../../stores/use-editor-store";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { db } from "../../common/database";
 import { eCloseProgressDialog, eOnLoadNote } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";

apps/mobile/app/components/premium/compact-features.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { ScrollView } from "react-native";
 import { FeatureBlock } from "./feature";
 

apps/mobile/app/components/premium/component.js

@@ -1,12 +1,14 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ActivityIndicator, ScrollView, View } from "react-native";
 import { LAUNCH_ROCKET } from "../../assets/images/assets";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
+import umami from "../../common/analytics";
+import { db } from "../../common/database";
+import { usePricing } from "../../hooks/use-pricing";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { getElevation } from "../../utils";
-import { db } from "../../common/database";
 import {
   eClosePremiumDialog,
   eCloseProgressDialog,
@@ -14,21 +16,19 @@ import {
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import umami from "../../common/analytics";
-import { IconButton } from "../ui/icon-button";
 import { AuthMode } from "../auth";
-import { Button } from "../ui/button";
 import SheetProvider from "../sheet-provider";
-import { SvgView } from "../ui/svg";
-import Seperator from "../ui/seperator";
 import { Toast } from "../toast";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import Seperator from "../ui/seperator";
+import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { features } from "./features";
 import { Group } from "./group";
 import { PricingPlans } from "./pricing-plans";
-import { usePricing } from "../../hooks/use-pricing";
 
 export const Component = ({ close, promo }) => {
   const colors = useThemeStore((state) => state.colors);

apps/mobile/app/components/premium/expiring.js

@@ -1,12 +1,13 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { usePricing } from "../../hooks/use-pricing";
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
+import { useThemeStore } from "../../stores/use-theme-store";
 import {
   eOpenPremiumDialog,
   eOpenResultDialog,
@@ -14,15 +15,14 @@ import {
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { Button } from "../ui/button";
 import BaseDialog from "../dialog/base-dialog";
 import DialogContainer from "../dialog/dialog-container";
+import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { CompactFeatures } from "./compact-features";
 import { Offer } from "./offer";
-import { usePricing } from "../../hooks/use-pricing";
 
 export const Expiring = () => {
   const colors = useThemeStore((state) => state.colors);

apps/mobile/app/components/premium/feature.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Text, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeStore } from "../../stores/use-theme-store";

apps/mobile/app/components/premium/group.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { ScrollView, View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";

apps/mobile/app/components/premium/offer.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Text } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";

apps/mobile/app/components/premium/premium-toast.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
 import { editorState } from "../../screens/editor/tiptap/utils";

apps/mobile/app/components/premium/pricing-item.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";

apps/mobile/app/components/premium/pricing-plans.js

@@ -1,15 +1,17 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ActivityIndicator, Platform, Text, View } from "react-native";
 import * as RNIap from "react-native-iap";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
+import umami from "../../common/analytics";
+import { db } from "../../common/database";
+import { usePricing } from "../../hooks/use-pricing";
 import {
   eSendEvent,
   presentSheet,
   ToastEvent
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
-import { db } from "../../common/database";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { useUserStore } from "../../stores/use-user-store";
 import {
   eClosePremiumDialog,
   eCloseProgressDialog,
@@ -19,16 +21,14 @@ import {
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import umami from "../../common/analytics";
-import { Button } from "../ui/button";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
+import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
-import { usePricing } from "../../hooks/use-pricing";
 
 const promoCyclesMonthly = {
   1: "first month",

apps/mobile/app/components/premium/pro-tag.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeStore } from "../../stores/use-theme-store";

apps/mobile/app/components/properties/color-tags.js

@@ -1,19 +1,18 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useMenuStore } from "../../stores/use-menu-store";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
+import { useMenuStore } from "../../stores/use-menu-store";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { dWidth } from "../../utils";
 import { COLORS_NOTE } from "../../utils/color-scheme";
-import { db } from "../../common/database";
 import { refreshNotesPage } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
-
 export const ColorTags = ({ item }) => {
   const [note, setNote] = useState(item);
   const setColorNotes = useMenuStore((state) => state.setColorNotes);

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

@@ -1,9 +1,9 @@
+import React from "react";
 import { View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { timeConverter } from "../../utils/time";
 import Paragraph from "../ui/typography/paragraph";
-
 export const DateMeta = ({ item }) => {
   const colors = useThemeStore((state) => state.colors);
 

apps/mobile/app/components/properties/dev-mode.js

@@ -1,11 +1,11 @@
 import Clipboard from "@react-native-clipboard/clipboard";
+import React from "react";
 import { View } from "react-native";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { ToastEvent } from "../../services/event-manager";
 import { db } from "../../common/database";
+import { ToastEvent } from "../../services/event-manager";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
-
 export const DevMode = ({ item }) => {
   const devMode = useSettingStore((state) => state.settings.devMode);
 

apps/mobile/app/components/properties/index.js

@@ -1,8 +1,12 @@
+import React from "react";
 import { Platform, View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { ScrollView } from "react-native-gesture-handler";
+import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { presentSheet } from "../../services/event-manager";
-import { db } from "../../common/database";
+import SearchService from "../../services/search";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { COLORS_NOTE } from "../../utils/color-scheme";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -14,10 +18,6 @@ import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { Tags } from "./tags";
 import { Topics } from "./topics";
-import SearchService from "../../services/search";
-import { COLORS_NOTE } from "../../utils/color-scheme";
-import { ScrollView } from "react-native-gesture-handler";
-
 export const Properties = ({
   close = () => {},
   item,

apps/mobile/app/components/properties/items.js

@@ -1,15 +1,15 @@
+import React from "react";
 import { View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { useActions } from "../../hooks/use-actions";
 import { DDS } from "../../services/device-detection";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButton } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
-import { useActions } from "../../hooks/use-actions";
-
 export const Items = ({ item, buttons, close }) => {
   const colors = useThemeStore((state) => state.colors);
   const dimensions = useSettingStore((state) => state.dimensions);

apps/mobile/app/components/properties/notebooks.js

@@ -1,14 +1,14 @@
+import React from "react";
 import { ScrollView, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { db } from "../../common/database";
+import Notebook from "../../screens/notebook";
+import { TopicNotes } from "../../screens/notes/topic-notes";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
-import { TopicNotes } from "../../screens/notes/topic-notes";
-import Notebook from "../../screens/notebook";
-
 export default function Notebooks({ note, close }) {
   const colors = useThemeStore((state) => state.colors);
 

apps/mobile/app/components/properties/synced.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeStore } from "../../stores/use-theme-store";
@@ -8,7 +9,6 @@ import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-
 export const Synced = ({ item, close }) => {
   const colors = useThemeStore((state) => state.colors);
   const user = useUserStore((state) => state.user);

apps/mobile/app/components/properties/tags.js

@@ -1,13 +1,13 @@
+import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { eSendEvent } from "../../services/event-manager";
 import { db } from "../../common/database";
+import { TaggedNotes } from "../../screens/notes/tagged";
+import { eSendEvent } from "../../services/event-manager";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eOpenTagsDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
-import { TaggedNotes } from "../../screens/notes/tagged";
-
 export const Tags = ({ item, close }) => {
   const colors = useThemeStore((state) => state.colors);
 

apps/mobile/app/components/properties/topics.js

@@ -1,8 +1,8 @@
+import React from "react";
 import { View } from "react-native";
 import { TopicNotes } from "../../screens/notes/topic-notes";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
-
 export const Topics = ({ item, close }) => {
   const open = (topic) => {
     close();

apps/mobile/app/components/sheet-provider/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { editorState } from "../../screens/editor/tiptap/utils";
@@ -14,7 +14,6 @@ import { Button } from "../ui/button";
 import SheetWrapper from "../ui/sheet";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-
 const SheetProvider = ({ context = "global" }) => {
   const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);

apps/mobile/app/components/sheets/add-to/index.js

@@ -1,7 +1,8 @@
-import { createRef, useEffect, useState } from "react";
+import React, { createRef, useEffect, useState } from "react";
 import { Keyboard, TouchableOpacity, View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
@@ -9,11 +10,10 @@ import {
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import SearchService from "../../../services/search";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useNotebookStore } from "../../../stores/use-notebook-store";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { getTotalNotes } from "../../../utils";
-import { db } from "../../../common/database";
 import { eOpenMoveNoteDialog } from "../../../utils/events";
 import layoutmanager from "../../../utils/layout-manager";
 import { SIZE } from "../../../utils/size";
@@ -27,7 +27,6 @@ import { PressableButton } from "../../ui/pressable";
 import SheetWrapper from "../../ui/sheet";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-
 let newNotebookTitle = null;
 const notebookInput = createRef();
 const actionSheetRef = createRef();

apps/mobile/app/components/sheets/export-notes/index.js

@@ -1,28 +1,27 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import Share from "react-native-share";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { ToastEvent } from "../../../services/event-manager";
-import Exporter from "../../../services/exporter";
-import { getElevation } from "../../../utils";
-import { ph, pv, SIZE } from "../../../utils/size";
-import { sleep } from "../../../utils/time";
-import SheetWrapper from "../../ui/sheet";
-import { Button } from "../../ui/button";
-import DialogHeader from "../../dialog/dialog-header";
-import { PressableButton } from "../../ui/pressable";
-import Seperator from "../../ui/seperator";
-import Heading from "../../ui/typography/heading";
-import Paragraph from "../../ui/typography/paragraph";
 import {
   eSubscribeEvent,
-  eUnSubscribeEvent
+  eUnSubscribeEvent,
+  ToastEvent
 } from "../../../services/event-manager";
-import { eOpenExportDialog, eCloseExportDialog } from "../../../utils/events";
-
+import Exporter from "../../../services/exporter";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { getElevation } from "../../../utils";
+import { eCloseExportDialog, eOpenExportDialog } from "../../../utils/events";
+import { ph, pv, SIZE } from "../../../utils/size";
+import { sleep } from "../../../utils/time";
+import DialogHeader from "../../dialog/dialog-header";
+import { Button } from "../../ui/button";
+import { PressableButton } from "../../ui/pressable";
+import Seperator from "../../ui/seperator";
+import SheetWrapper from "../../ui/sheet";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
 const ExportNotesSheet = () => {
   const colors = useThemeStore((state) => state.colors);
 

apps/mobile/app/components/sheets/export-notes/share.js

@@ -1,9 +1,9 @@
+import React from "react";
 import { View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import { ToastEvent } from "../../../services/event-manager";
 import { SIZE } from "../../../utils/size";
 import { Button } from "../../ui/button";
-
 export const ShareComponent = ({ uri, name, padding }) => {
   return (
     <View

apps/mobile/app/components/sheets/github/issue.js

@@ -1,22 +1,21 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Linking, Platform, Text, TextInput, View } from "react-native";
-import { APP_VERSION } from "../../../version";
+import { db } from "../../../common/database";
 import { eSendEvent, ToastEvent } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { useUserStore } from "../../../stores/use-user-store";
-import { db } from "../../../common/database";
 import { eCloseProgressDialog } from "../../../utils/events";
 import { openLinkInBrowser } from "../../../utils/functions";
 import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
+import { APP_VERSION } from "../../../version";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
-
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const colors = useThemeStore((state) => state.colors);
   const body = useRef(defaultBody);

apps/mobile/app/components/sheets/manage-tags/index.js

@@ -1,15 +1,15 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ScrollView, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { useTagStore } from "../../../stores/use-tag-store";
+import { db } from "../../../common/database";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
   ToastEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import { db } from "../../../common/database";
+import { useTagStore } from "../../../stores/use-tag-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { eCloseTagsDialog, eOpenTagsDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";

apps/mobile/app/components/sheets/migrate/index.tsx

@@ -1,22 +1,19 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
+import { db } from "../../../common/database";
 import BackupService from "../../../services/backup";
 import { eSendEvent, ToastEvent } from "../../../services/event-manager";
 import { useThemeStore } from "../../../stores/use-theme-store";
-import { db } from "../../../common/database";
-import {
-  eCloseProgressDialog
-} from "../../../utils/events";
+import { eCloseProgressDialog } from "../../../utils/events";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
+import { presentDialog } from "../../dialog/functions";
 import { Button } from "../../ui/button";
 import { Notice } from "../../ui/notice";
 import Seperator from "../../ui/seperator";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
-import { presentDialog } from "../../dialog/functions";
-
 export default function Migrate() {
   const colors = useThemeStore((state) => state.colors);
   const [loading, setLoading] = useState(false);

apps/mobile/app/components/sheets/move-notes/movenote.tsx

@@ -1,29 +1,28 @@
-import { RefObject, useState } from "react";
+import { NotebookType, NoteType, TopicType } from "app/utils/types";
+import React, { RefObject, useState } from "react";
 import { Platform, View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { FlatList } from "react-native-gesture-handler";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { db } from "../../../common/database";
 import {
   eSendEvent,
   presentSheet,
   ToastEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import { db } from "../../../common/database";
+import SearchService from "../../../services/search";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { eCloseProgressDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
-import { IconButton } from "../../ui/icon-button";
-import { Button } from "../../ui/button";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
 import { PressableButton } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SearchService from "../../../services/search";
-import { NotebookType, NoteType, TopicType } from "app/utils/types";
-
 export const MoveNotes = ({
   notebook,
   selectedTopic,

apps/mobile/app/components/sheets/new-feature/index.tsx

@@ -10,6 +10,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { features } from "../../../features";
+import React from "react";
 export type FeatureType = {
   title: string;
   body: string;

apps/mobile/app/components/sheets/progress/index.tsx

@@ -1,14 +1,13 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
+import useSyncProgress from "../../../hooks/use-sync-progress";
 import { presentSheet } from "../../../services/event-manager";
 import { useThemeStore } from "../../../stores/use-theme-store";
-import useSyncProgress from "../../../hooks/use-sync-progress";
 import { SIZE } from "../../../utils/size";
 import Seperator from "../../ui/seperator";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-
 export const Progress = () => {
   const colors = useThemeStore((state) => state.colors);
   const { progress } = useSyncProgress();

apps/mobile/app/components/sheets/publish-note/index.js

@@ -1,16 +1,16 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { useAttachmentStore } from "../../../stores/use-attachment-store";
+import { db } from "../../../common/database";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
   ToastEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import { db } from "../../../common/database";
+import { useAttachmentStore } from "../../../stores/use-attachment-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import {
   eClosePublishNoteDialog,
   eOpenPublishNoteDialog

apps/mobile/app/components/sheets/rate-app/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Linking, View } from "react-native";
 import {
   eSubscribeEvent,
@@ -14,7 +14,6 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-
 const RateAppSheet = () => {
   const [visible, setVisible] = useState(false);
   const actionSheetRef = useRef();

apps/mobile/app/components/sheets/restore-data/index.js

@@ -1,17 +1,18 @@
-import { createRef, useEffect, useState } from "react";
+import React, { createRef, useEffect, useState } from "react";
 import { ActivityIndicator, Platform, View } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { FlatList } from "react-native-gesture-handler";
 import * as ScopedStorage from "react-native-scoped-storage";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { initialize } from "../../../stores";
+import { db } from "../../../common/database";
+import storage from "../../../common/database/storage";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
   ToastEvent
 } from "../../../services/event-manager";
-import { db } from "../../../common/database";
-import storage from "../../../common/database/storage";
+import SettingsService from "../../../services/settings";
+import { initialize } from "../../../stores";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { eCloseRestoreDialog, eOpenRestoreDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import { sleep, timeConverter } from "../../../utils/time";
@@ -23,8 +24,6 @@ import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import Paragraph from "../../ui/typography/paragraph";
-import SettingsService from "../../../services/settings";
-
 const actionSheetRef = createRef();
 let RNFetchBlob;
 const RestoreDataSheet = () => {

apps/mobile/app/components/sheets/sort/index.js

@@ -1,17 +1,16 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
+import { db } from "../../../common/database";
 import { eSendEvent } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { GROUP, SORT } from "../../../utils/constants";
-import { db } from "../../../common/database";
 import { refreshNotesPage } from "../../../utils/events";
 import layoutmanager from "../../../utils/layout-manager";
 import { SIZE } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
-
 const Sort = ({ type, screen }) => {
   const colors = useThemeStore((state) => state.colors);
   const [groupOptions, setGroupOptions] = useState(

apps/mobile/app/components/side-menu/user-status.js

@@ -1,19 +1,19 @@
+import React from "react";
 import { ActivityIndicator, Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
+import useSyncProgress from "../../hooks/use-sync-progress";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { eOpenLoginDialog } from "../../utils/events";
+import { tabBarRef } from "../../utils/global-refs";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
+import { TimeSince } from "../ui/time-since";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { TimeSince } from "../ui/time-since";
-import useSyncProgress from "../../hooks/use-sync-progress";
-import { tabBarRef } from "../../utils/global-refs";
-
 export const UserStatus = () => {
   const colors = useThemeStore((state) => state.colors);
   const user = useUserStore((state) => state.user);

apps/mobile/app/components/tabs/index.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   forwardRef,
   RefObject,
   useEffect,
@@ -17,8 +17,8 @@ import Animated, {
   WithSpringConfig,
   withTiming
 } from "react-native-reanimated";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { eSendEvent } from "../../services/event-manager";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
 
 interface TabProps extends ViewProps {

apps/mobile/app/components/tip/index.tsx

@@ -1,14 +1,14 @@
+import React from "react";
 import { Image, TextStyle, View, ViewStyle } from "react-native";
+import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { TTip } from "../../services/tip-manager";
 import { ThemeStore, useThemeStore } from "../../stores/use-theme-store";
-import { MMKV } from "../../common/database/mmkv";
 import { eCloseProgressDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
-
 export const Tip = ({
   tip,
   style,

apps/mobile/app/components/toast/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Keyboard, View } from "react-native";
 import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

apps/mobile/app/components/ui/animated-button.tsx/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ActivityIndicator } from "react-native";
 import Animated, {
   FadeIn,
@@ -14,7 +15,6 @@ import { ButtonProps } from "../button";
 import { PressableButton } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
-
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 export const AnimatedButton = ({
@@ -111,7 +111,7 @@ export const AnimatedButton = ({
 
         {!title ? null : (
           <Component
-            layout={Layout}
+            layout={Layout.springify()}
             animated={true}
             color={textColor}
             size={fontSize}

apps/mobile/app/components/ui/button/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ActivityIndicator, ColorValue, TextStyle } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeStore } from "../../../stores/use-theme-store";
@@ -7,7 +8,6 @@ import { SIZE } from "../../../utils/size";
 import { PressableButton, PressableButtonProps } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
-
 export interface ButtonProps extends PressableButtonProps {
   height?: number;
   icon?: string;

apps/mobile/app/components/ui/icon-button/index.tsx

@@ -1,14 +1,12 @@
+import React from "react";
 import { ColorValue, GestureResponderEvent, ViewStyle } from "react-native";
-import Animated, {
-  Layout
-} from "react-native-reanimated";
+import Animated, { Layout } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { showTooltip, TOOLTIP_POSITIONS } from "../../../utils";
 import { hexToRGBA, RGB_Linear_Shade } from "../../../utils/color-scheme/utils";
 import { SIZE } from "../../../utils/size";
 import { PressableButton, PressableButtonProps } from "../pressable";
-
 interface IconButtonProps extends PressableButtonProps {
   name: string;
   color?: ColorValue;