mobile: fix dialog show above app lock

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

@@ -46,6 +46,7 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
+import BaseDialog from "../dialog/base-dialog";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -130,7 +131,12 @@ export const SessionExpired = () => {
 
   return (
     visible && (
-      <Modal
+      <BaseDialog
+        transparent={false}
+        background={colors.primary.background}
+        bounce={false}
+        animated={false}
+        centered={false}
         onShow={async () => {
           await sleep(300);
           passwordInputRef.current?.focus();
@@ -231,7 +237,7 @@ export const SessionExpired = () => {
         </View>
         <Toast context="local" />
         <Dialog context="session_expiry" />
-      </Modal>
+      </BaseDialog>
     )
   );
 };

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

@@ -17,7 +17,7 @@ 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 } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   KeyboardAvoidingView,
   Modal,
@@ -31,6 +31,9 @@ import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
 import { ScopedThemeProvider } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
+import { useUserStore } from "../../stores/use-user-store";
+import { useAppState } from "../../hooks/use-app-state";
 
 const BaseDialog = ({
   visible,
@@ -51,6 +54,9 @@ const BaseDialog = ({
   avoidKeyboardResize = false
 }) => {
   const floating = useIsFloatingKeyboard();
+  const appState = useAppState();
+  const lockEvents = useRef(false);
+  const [internalVisible, setIntervalVisible] = useState(true);
 
   useEffect(() => {
     return () => {
@@ -58,14 +64,33 @@ const BaseDialog = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (SettingsService.get().appLockMode === "background") {
+      if (appState === "background") {
+        setIntervalVisible(false);
+        if (useUserStore.getState().appLocked) {
+          lockEvents.current = true;
+          const unsub = useUserStore.subscribe((state) => {
+            if (!state.appLocked) {
+              setIntervalVisible(true);
+              unsub();
+              setTimeout(() => {
+                lockEvents.current = false;
+              });
+            }
+          });
+        }
+      }
+    }
+  }, [appState]);
+
   const Wrapper = useSafeArea ? SafeAreaView : View;
 
   return (
     <ScopedThemeProvider value="dialog">
       <Modal
-        visible={visible}
+        visible={visible && internalVisible}
         transparent={true}
-        animated
         statusBarTranslucent={statusBarTranslucent}
         supportedOrientations={[
           "portrait",
@@ -75,6 +100,7 @@ const BaseDialog = ({
           "landscape-right"
         ]}
         onShow={() => {
+          if (lockEvents.current) return;
           if (onShow) {
             onShow();
             useSettingStore.getState().setSheetKeyboardHandler(false);
@@ -82,6 +108,7 @@ const BaseDialog = ({
         }}
         animationType={animation}
         onRequestClose={() => {
+          if (lockEvents.current) return;
           if (!closeOnTouch) return null;
           useSettingStore.getState().setSheetKeyboardHandler(true);
           onRequestClose && onRequestClose();
@@ -133,8 +160,7 @@ const styles = StyleSheet.create({
   backdrop: {
     width: "100%",
     height: "100%",
-    justifyContent: "center",
-    alignItems: "center"
+    justifyContent: "center"
   },
   overlayButton: {
     width: "100%",

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

@@ -467,44 +467,40 @@ export class VaultDialog extends Component {
   }
 
   async _enrollFingerprint(password) {
-    try {
-      this.setState(
-        {
-          loading: true
-        },
-        async () => {
-          try {
-            await db.vault.unlock(password);
-            await BiometricService.storeCredentials(password);
-            this.setState({
-              loading: false
-            });
-            eSendEvent("vaultUpdated");
-            ToastEvent.show({
-              heading: "Biometric unlocking enabled!",
-              message: "Now you can unlock notes in vault with biometrics.",
-              type: "success",
-              context: "global"
-            });
-            this.close();
-          } catch (e) {
-            ToastEvent.show({
-              heading: "Incorrect password",
-              message:
-                "Please enter the correct vault password to enable biometrics.",
-              type: "error",
-              context: "local"
-            });
-            this.setState({
-              loading: false
-            });
-            return;
-          }
+    this.setState(
+      {
+        loading: true
+      },
+      async () => {
+        try {
+          await db.vault.unlock(password);
+          await BiometricService.storeCredentials(password);
+          this.setState({
+            loading: false
+          });
+          eSendEvent("vaultUpdated");
+          ToastEvent.show({
+            heading: "Biometric unlocking enabled!",
+            message: "Now you can unlock notes in vault with biometrics.",
+            type: "success",
+            context: "global"
+          });
+          this.close();
+        } catch (e) {
+          this.close();
+          ToastEvent.show({
+            heading: "Incorrect password",
+            message:
+              "Please enter the correct vault password to enable biometrics.",
+            type: "error",
+            context: "local"
+          });
+          this.setState({
+            loading: false
+          });
         }
-      );
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
+      }
+    );
   }
 
   async _createVault() {

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

@@ -245,13 +245,16 @@ const MergeConflicts = () => {
   };
 
   return !visible ? null : (
-    <Modal
+    <BaseDialog
       statusBarTranslucent
       transparent={false}
       animationType="slide"
+      animated={false}
+      bounce={false}
       onRequestClose={() => {
         close();
       }}
+      background={colors?.primary.background}
       supportedOrientations={[
         "portrait",
         "portrait-upside-down",
@@ -363,7 +366,7 @@ const MergeConflicts = () => {
           </Animated.View>
         </View>
       </SafeAreaView>
-    </Modal>
+    </BaseDialog>
   );
 };
 

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

@@ -17,15 +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 from "react";
+import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef } from "react";
 import { Platform, View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../../stores/use-setting-store";
-import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
 import { PremiumToast } from "../../premium/premium-toast";
 import { Toast } from "../../toast";
-import { BouncingView } from "../transitions/bouncing-view";
+import { useAppState } from "../../../hooks/use-app-state";
+import SettingsService from "../../../services/settings";
+import { useUserStore } from "../../../stores/use-user-store";
 
 const SheetWrapper = ({
   children,
@@ -41,6 +43,7 @@ const SheetWrapper = ({
   enableGesturesInScrollView = false,
   bottomPadding = true
 }) => {
+  const localRef = useRef(null);
   const { colors } = useThemeColors("sheet");
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const sheetKeyboardHandler = useSettingStore(
@@ -50,6 +53,8 @@ const SheetWrapper = ({
   const smallTablet = deviceMode === "smallTablet";
   const dimensions = useSettingStore((state) => state.dimensions);
   const insets = useGlobalSafeAreaInsets();
+  const appState = useAppState();
+  const lockEvents = useRef(false);
   let width = dimensions.width > 600 ? 600 : 500;
 
   const style = React.useMemo(() => {
@@ -68,19 +73,40 @@ const SheetWrapper = ({
   }, [colors.primary.background, largeTablet, smallTablet, width]);
 
   const _onOpen = () => {
+    if (lockEvents.current) return;
     onOpen && onOpen();
   };
 
   const _onClose = async () => {
+    if (lockEvents.current) return;
     if (onClose) {
       onClose();
     }
   };
 
+  useEffect(() => {
+    if (SettingsService.get().appLockMode === "background") {
+      if (appState === "background") {
+        const ref = fwdRef || localRef;
+        ref?.current?.hide();
+        if (useUserStore.getState().appLocked) {
+          lockEvents.current = true;
+          const unsub = useUserStore.subscribe((state) => {
+            if (!state.appLocked) {
+              ref?.current?.show();
+              unsub();
+              lockEvents.current = false;
+            }
+          });
+        }
+      }
+    }
+  }, [appState, fwdRef]);
+
   return (
     <ScopedThemeProvider value="sheet">
       <ActionSheet
-        ref={fwdRef}
+        ref={fwdRef || localRef}
         testIDs={{
           backdrop: "sheet-backdrop"
         }}

apps/mobile/scripts/optimize-fonts.mjs

@@ -65,7 +65,10 @@ const EXTRA_ICON_NAMES = [
   "check-circle-outline",
   "chevron-up",
   "chevron-down",
-  "calendar"
+  "calendar",
+  "qrcode",
+  "text",
+  "cloud"
 ];
 
 const __filename = fileURLToPath(import.meta.url);