mobile: do not use top level safeareaprovider.

This has been causing some strange behaviour where ui
would flicker and jump and the padding on top would
increase. It's something related to react-navigation and
react-native-safe-area-context.

apps/mobile/app/app.js

@@ -21,6 +21,7 @@ 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";
+import GlobalSafeAreaProvider from "./components/globalsafearea";
 import Launcher from "./components/launcher";
 import { useAppEvents } from "./hooks/use-app-events";
 import { ApplicationHolder } from "./navigation";
@@ -28,6 +29,7 @@ import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
 import { useUserStore } from "./stores/use-user-store";
+import { View } from "react-native";
 
 SettingsService.init();
 SettingsService.checkOrientation();
@@ -48,16 +50,37 @@ const App = () => {
     }, 100);
   }, []);
   return (
-    <GestureHandlerRootView
+    <View
       style={{
-        flex: 1
+        height: "100%",
+        width: "100%"
       }}
     >
-      <SafeAreaProvider>
+      <View
+        style={{
+          position: "absolute",
+          height: "1%",
+          width: "1%",
+          left: -999,
+          right: -999
+        }}
+        pointerEvents="none"
+      >
+        <SafeAreaProvider>
+          <GlobalSafeAreaProvider />
+        </SafeAreaProvider>
+      </View>
+
+      <GestureHandlerRootView
+        style={{
+          height: "100%",
+          width: "100%"
+        }}
+      >
         <ApplicationHolder />
         <Launcher />
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+      </GestureHandlerRootView>
+    </View>
   );
 };
 

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
@@ -47,7 +47,7 @@ const AuthModal = () => {
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
 
   useEffect(() => {
     eSubscribeEvent(eOpenLoginDialog, open);

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

@@ -0,0 +1,33 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 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 { useEffect } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSettingStore } from "../../stores/use-setting-store";
+
+const GlobalSafeAreaProvider = () => {
+  const insets = useSafeAreaInsets();
+  useEffect(() => {
+    useSettingStore.getState().setInsets(insets);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [insets.top, insets.bottom, insets.left, insets.right]);
+
+  return null;
+};
+
+export default GlobalSafeAreaProvider;

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

@@ -17,9 +17,9 @@ 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, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { SearchBar } from "../../screens/search/search-bar";
 import {
   eSubscribeEvent,
@@ -32,11 +32,10 @@ import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
-import { useCallback } from "react";
 
 const _Header = () => {
   const colors = useThemeStore((state) => state.colors);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const [hide, setHide] = useState(true);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const currentScreen = useNavigationStore(

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

@@ -25,9 +25,9 @@ import {
   useWindowDimensions,
   View
 } 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 useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { DDS } from "../../services/device-detection";
 import SettingsService from "../../services/settings";
@@ -57,7 +57,7 @@ const Intro = ({ navigation }) => {
     (state) => state.settings.telemetry
   );
   const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   useNavigationFocus(navigation, {
     onFocus: () => {
       tabBarRef.current.lock();

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

@@ -19,18 +19,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { ActivityIndicator, useWindowDimensions, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { notesnook } from "../../../e2e/test.ids";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useTip } from "../../services/tip-manager";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { COLORS_NOTE } from "../../utils/color-scheme";
 import { SIZE } from "../../utils/size";
+import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
-import { Tip } from "../tip";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { notesnook } from "../../../e2e/test.ids";
 
 export const Empty = React.memo(
   function Empty({
@@ -41,7 +41,7 @@ export const Empty = React.memo(
     screen
   }) {
     const colors = useThemeStore((state) => state.colors);
-    const insets = useSafeAreaInsets();
+    const insets = useGlobalSafeAreaInsets();
     const { height } = useWindowDimensions();
     const introCompleted = useSettingStore(
       (state) => state.settings.introCompleted

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

@@ -21,8 +21,8 @@ import KeepAwake from "@sayem314/react-native-keep-awake";
 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 useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import Editor from "../../screens/editor";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { DDS } from "../../services/device-detection";
@@ -53,7 +53,7 @@ const MergeConflicts = () => {
   const [keep, setKeep] = useState(null);
   const [copy, setCopy] = useState(null);
   const [dialogVisible, setDialogVisible] = useState(false);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const content = useRef(null);
   const isKeepingConflicted = !keep?.conflicted;
   const isKeeping = !!keep;

apps/mobile/app/components/selection-header/index.js

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback, useEffect } from "react";
 import { BackHandler, Platform, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { db } from "../../common/database";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { eSendEvent, ToastEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
@@ -45,7 +45,7 @@ export const SelectionHeader = React.memo(() => {
   const clearSelection = useSelectionStore((state) => state.clearSelection);
   const currentScreen = useNavigationStore((state) => state.currentScreen);
   const screen = currentScreen.name;
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
 
   useEffect(() => {
     if (selectionMode) {

apps/mobile/app/components/side-menu/index.js

@@ -19,15 +19,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback } from "react";
 import { FlatList, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { notesnook } from "../../../e2e/test.ids";
+import umami from "../../common/analytics";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
-import { useUserStore } from "../../stores/use-user-store";
-import { useSettingStore } from "../../stores/use-setting-store";
+import Navigation from "../../services/navigation";
 import { useNoteStore } from "../../stores/use-notes-store";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
-import umami from "../../common/analytics";
+import { useUserStore } from "../../stores/use-user-store";
 import { toggleDarkMode } from "../../utils/color-scheme/utils";
 import { MenuItemsList, SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
@@ -35,13 +36,12 @@ import { ColorSection } from "./color-section";
 import { MenuItem } from "./menu-item";
 import { TagsSection } from "./pinned-section";
 import { UserStatus } from "./user-status";
-import Navigation from "../../services/navigation";
 
 export const SideMenu = React.memo(
   function SideMenu() {
     const colors = useThemeStore((state) => state.colors);
     const deviceMode = useSettingStore((state) => state.deviceMode);
-    const insets = useSafeAreaInsets();
+    const insets = useGlobalSafeAreaInsets();
     const subscriptionType = useUserStore(
       (state) => state.user?.subscription?.type
     );
@@ -50,7 +50,6 @@ export const SideMenu = React.memo(
       (state) => state.settings.introCompleted
     );
     const noTextMode = false;
-
     const BottomItemsList = [
       {
         name: colors.night ? "Day" : "Night",

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

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useSyncProgress from "../../hooks/use-sync-progress";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
@@ -38,7 +38,7 @@ export const UserStatus = () => {
   const user = useUserStore((state) => state.user);
   const syncing = useUserStore((state) => state.syncing);
   const lastSynced = useUserStore((state) => state.lastSynced);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const { progress } = useSyncProgress();
   return (
     <View

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

@@ -17,12 +17,12 @@ 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, { useEffect, useRef, useState } from "react";
+import React, { useCallback, 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";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
@@ -35,13 +35,12 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { useCallback } from "react";
 let toastMessages = [];
 export const Toast = ({ context = "global" }) => {
   const colors = useThemeStore((state) => state.colors);
   const [keyboard, setKeyboard] = useState(false);
   const [data, setData] = useState({});
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const hideTimeout = useRef();
   const [visible, setVisible] = useState(false);
 

apps/mobile/app/components/ui/sheet/index.js

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Platform, View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { PremiumToast } from "../../premium/premium-toast";
@@ -48,8 +48,7 @@ const SheetWrapper = ({
   const smallTablet = deviceMode === "smallTablet";
   const dimensions = useSettingStore((state) => state.dimensions);
   const pitchBlack = useSettingStore((state) => state.settings.pitchBlack);
-
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
 
   let width = dimensions.width > 600 ? 600 : 500;
 

apps/mobile/app/hooks/use-global-safe-area-insets.ts

@@ -0,0 +1,26 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 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 { useSettingStore } from "../stores/use-setting-store";
+
+const useGlobalSafeAreaInsets = () => {
+  const insets = useSettingStore((state) => state.insets);
+  return insets;
+};
+
+export default useGlobalSafeAreaInsets;

apps/mobile/app/navigation/index.js

@@ -41,7 +41,8 @@ const _ApplicationHolder = () => {
         <>
           <SafeAreaView
             style={{
-              flex: 1,
+              width: "100%",
+              height: "100%",
               backgroundColor: colors.bg
             }}
           >

apps/mobile/app/navigation/navigation-stack.js

@@ -22,6 +22,8 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
 import Container from "../components/container";
 import Intro from "../components/intro";
+import useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
+import { hideAllTooltips } from "../hooks/use-tooltip";
 import Favorites from "../screens/favorites";
 import Home from "../screens/home";
 import Notebook from "../screens/notebook";
@@ -39,12 +41,10 @@ import { eSendEvent } from "../services/event-manager";
 import SettingsService from "../services/settings";
 import useNavigationStore from "../stores/use-navigation-store";
 import { useSelectionStore } from "../stores/use-selection-store";
+import { useSettingStore } from "../stores/use-setting-store";
 import { useThemeStore } from "../stores/use-theme-store";
 import { history } from "../utils";
 import { rootNavigatorRef } from "../utils/global-refs";
-import { hideAllTooltips } from "../hooks/use-tooltip";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useSettingStore } from "../stores/use-setting-store";
 const NativeStack = createNativeStackNavigator();
 const IntroStack = createNativeStackNavigator();
 
@@ -84,7 +84,7 @@ const _Tabs = () => {
     (state) => state.settings.introCompleted
   );
   const height = useSettingStore((state) => state.dimensions.height);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const screenHeight = height - (50 + insets.top + insets.bottom);
   React.useEffect(() => {
     setTimeout(() => {

apps/mobile/app/navigation/tabs-holder.js

@@ -21,8 +21,8 @@ import {
   activateKeepAwake,
   deactivateKeepAwake
 } from "@sayem314/react-native-keep-awake";
-import React, { useEffect, useRef, useState } from "react";
-import { Platform, View, StatusBar } from "react-native";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Platform, StatusBar, View } from "react-native";
 import {
   addSpecificOrientationListener,
   getInitialOrientation,
@@ -34,10 +34,13 @@ import Animated, {
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { notesnook } from "../../e2e/test.ids";
+import { db } from "../common/database";
 import { SideMenu } from "../components/side-menu";
 import { FluidTabs } from "../components/tabs";
+import useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
+import { hideAllTooltips } from "../hooks/use-tooltip";
 import { editorController, editorState } from "../screens/editor/tiptap/utils";
 import { EditorWrapper } from "../screens/editor/wrapper";
 import { DDS } from "../services/device-detection";
@@ -50,7 +53,6 @@ import { useEditorStore } from "../stores/use-editor-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useThemeStore } from "../stores/use-theme-store";
 import { setWidthHeight } from "../utils";
-import { db } from "../common/database";
 import {
   eClearEditor,
   eCloseFullscreenEditor,
@@ -58,9 +60,7 @@ import {
   eOpenFullscreenEditor
 } from "../utils/events";
 import { editorRef, tabBarRef } from "../utils/global-refs";
-import { hideAllTooltips } from "../hooks/use-tooltip";
 import { NavigationStack } from "./navigation-stack";
-import { useCallback } from "react";
 
 const _TabsHolder = () => {
   const colors = useThemeStore((state) => state.colors);
@@ -71,7 +71,7 @@ const _TabsHolder = () => {
   const setDeviceModeState = useSettingStore((state) => state.setDeviceMode);
   const dimensions = useSettingStore((state) => state.dimensions);
   const setDimensions = useSettingStore((state) => state.setDimensions);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const animatedOpacity = useSharedValue(0);
   const animatedTranslateY = useSharedValue(-9999);
   const overlayRef = useRef();
@@ -340,7 +340,8 @@ const _TabsHolder = () => {
       onLayout={_onLayout}
       testID={notesnook.ids.default.root}
       style={{
-        flex: 1,
+        height: "100%",
+        width: "100%",
         backgroundColor: colors.bg,
         paddingBottom: Platform.OS === "android" ? insets?.bottom : 0,
         marginRight:
@@ -413,6 +414,7 @@ const _TabsHolder = () => {
 
             <NavigationStack />
           </View>
+
           <EditorWrapper key="3" width={widths} dimensions={dimensions} />
         </FluidTabs>
       ) : null}

apps/mobile/app/screens/editor/loading.js

@@ -17,17 +17,17 @@ 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, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "../../components/ui/button";
 import { IconButton } from "../../components/ui/icon-button";
 import Paragraph from "../../components/ui/typography/paragraph";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -37,13 +37,12 @@ import { useThemeStore } from "../../stores/use-theme-store";
 import { eClearEditor, eOnLoadNote } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { editorState } from "./tiptap/utils";
-import { useCallback } from "react";
 const EditorOverlay = ({ editorId = "", editor }) => {
   const colors = useThemeStore((state) => state.colors);
   const [error, setError] = useState(false);
   const opacity = useSharedValue(1);
   const translateValue = useSharedValue(6000);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const isDefaultEditor = editorId === "";
   const timers = useRef({
     loading: 0,

apps/mobile/app/screens/editor/progress.js

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ProgressBarComponent } from "../../components/ui/svg/lazy";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
@@ -30,7 +30,7 @@ export const ProgressBar = () => {
   const [prog, setProg] = useState(0);
   const [visible, setVisible] = useState(false);
   const timer = useRef();
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const [width, setWidth] = useState(false);
 
   useEffect(() => {

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -18,8 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import WebView from "react-native-webview";
+import { db } from "../../../common/database";
+import { MMKV } from "../../../common/database/mmkv";
+import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets";
 import { DDS } from "../../../services/device-detection";
 import {
   eSendEvent,
@@ -31,8 +33,6 @@ import { TipManager } from "../../../services/tip-manager";
 import { useEditorStore } from "../../../stores/use-editor-store";
 import { useTagStore } from "../../../stores/use-tag-store";
 import { ThemeStore, useThemeStore } from "../../../stores/use-theme-store";
-import { db } from "../../../common/database";
-import { MMKV } from "../../../common/database/mmkv";
 import { eOnLoadNote } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 import { timeConverter } from "../../../utils/time";
@@ -66,7 +66,7 @@ export const useEditor = (
   const state = useRef<Partial<EditorState>>(defaultState);
   const placeholderTip = useRef(TipManager.placeholderTip());
   const tags = useTagStore((state) => state.tags);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const isDefaultEditor = editorId === "";
   const saveCount = useRef(0);
 

apps/mobile/app/screens/editor/wrapper.js

@@ -25,9 +25,9 @@ import {
   TextInput,
   View
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Editor from ".";
 import { PremiumToast } from "../../components/premium/premium-toast";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import useKeyboard from "../../hooks/use-keyboard";
 import { DDS } from "../../services/device-detection";
@@ -41,7 +41,7 @@ export const EditorWrapper = ({ width }) => {
   const colors = useThemeStore((state) => state.colors);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const loading = useNoteStore((state) => state.loading);
-  const insets = useSafeAreaInsets();
+  const insets = useGlobalSafeAreaInsets();
   const floating = useIsFloatingKeyboard();
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted

apps/mobile/app/screens/settings/editor/configure-toolbar.tsx

@@ -147,115 +147,3 @@ const styles = StyleSheet.create({
     width: "100%"
   }
 });
-
-// import React, { useEffect, useState } from 'react';
-// import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-// import DraggableFlatList, {
-//   RenderItemParams,
-//   ScaleDecorator
-// } from 'react-native-draggable-flatlist';
-// import { useThemeStore } from '../../stores/use-theme-store';
-// import {
-//   FlattenedToolbarItemType,
-//   getFlattenedToolbarDefinition,
-//   getToolbarDefinition,
-//   moveGroup,
-//   moveSubGroup,
-//   moveTool,
-//   toolbarDefinition
-// } from './toolbar-definition';
-// /**
-//  *
-//  * Flatten toolbar definition array with headers for each group.
-//  * Add them to list
-//  * Each list item gets it's data from tools
-//  * reorder items.
-//  * Save reordered data to database/storage.
-//  */
-
-// const flattened = getFlattenedToolbarDefinition(toolbarDefinition);
-// export function ConfigureToolbar() {
-//   const [data, setData] = useState(flattened);
-//   const colors = useThemeStore(state => state.colors);
-
-//   useEffect(() => {
-//     console.log(getToolbarDefinition(data));
-//   }, [data]);
-
-//   const onDragEnd = React.useCallback(
-//     ({ data: _data, from, to }) => {
-//       console.log(from, to);
-//       let prevDraggedItem = data[from];
-//       let nextDraggedItem = _data[to];
-
-//       switch (prevDraggedItem.type) {
-//         case 'group':
-//           _data = moveGroup(data, _data, to, from, prevDraggedItem, nextDraggedItem);
-//           break;
-//         case 'subgroup':
-//           _data = moveSubGroup(data, _data, to, from, prevDraggedItem, nextDraggedItem);
-//           break;
-//         case 'tool':
-//           _data = moveTool(data, _data, to, from, prevDraggedItem, nextDraggedItem);
-//           break;
-//       }
-
-//       setData(_data);
-//     },
-//     [data]
-//   );
-
-//   const renderItem = React.useCallback(
-//     ({ item, drag, isActive }: RenderItemParams<FlattenedToolbarItemType>) => {
-//       return (
-//         <ScaleDecorator>
-//           <TouchableOpacity
-//             onLongPress={drag}
-//             disabled={isActive}
-//             style={[
-//               styles.rowItem,
-//               {
-//                 backgroundColor: isActive ? colors.nav : colors.transGray,
-//                 borderWidth: 1,
-//                 borderColor: item.type === 'group' ? colors.accent : colors.nav
-//               }
-//             ]}
-//           >
-//             <Text style={styles.text}>
-//               {item.title} - {item.groupId}
-//             </Text>
-//           </TouchableOpacity>
-//         </ScaleDecorator>
-//       );
-//     },
-//     []
-//   );
-
-//   return (
-//     <DraggableFlatList
-//       data={data}
-//       onDragEnd={onDragEnd}
-//       style={{
-//         paddingHorizontal: 12
-//       }}
-//       keyExtractor={item => item.id}
-//       renderItem={renderItem}
-//     />
-//   );
-// }
-
-// const styles = StyleSheet.create({
-//   rowItem: {
-//     height: 50,
-//     width: '100%',
-//     justifyContent: 'center',
-//     marginBottom: 10,
-//     borderRadius: 10,
-//     paddingHorizontal: 12
-//   },
-//   text: {
-//     color: 'black',
-//     fontSize: 16,
-//     textAlign: 'left'
-//   }
-// });

apps/mobile/app/stores/use-setting-store.ts

@@ -22,6 +22,7 @@ import Config from "react-native-config";
 import { FileType } from "react-native-scoped-storage";
 import create, { State } from "zustand";
 import { ACCENT } from "../utils/color-scheme";
+import { initialWindowMetrics } from "react-native-safe-area-context";
 
 export type Settings = {
   showToolbarOnTop?: boolean;
@@ -69,6 +70,13 @@ type DimensionsType = {
   height: number;
 };
 
+type Insets = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
 export interface SettingStore extends State {
   settings: Settings;
   fullscreen: boolean;
@@ -84,6 +92,8 @@ export interface SettingStore extends State {
   sheetKeyboardHandler: boolean;
   requestBiometrics: boolean;
   setRequestBiometrics: (requestBiometrics: boolean) => void;
+  insets: Insets;
+  setInsets: (insets: Insets) => void;
 }
 
 const { width, height } = Dimensions.get("window");
@@ -139,5 +149,9 @@ export const useSettingStore = create<SettingStore>((set) => ({
   setSheetKeyboardHandler: (sheetKeyboardHandler) =>
     set({ sheetKeyboardHandler }),
   requestBiometrics: false,
-  setRequestBiometrics: (requestBiometrics) => set({ requestBiometrics })
+  setRequestBiometrics: (requestBiometrics) => set({ requestBiometrics }),
+  setInsets: (insets) => set({ insets }),
+  insets: initialWindowMetrics?.insets
+    ? initialWindowMetrics.insets
+    : { top: 0, right: 0, left: 0, bottom: 0 }
 }));