fix app lock and splash screen

apps/mobile/App.js

@@ -54,6 +54,7 @@ const loadDatabase = async () => {
   SplashScreen.hide();
   await db.init();
   let requireIntro = await MMKV.getItem('introCompleted');
+  useSettingStore.getState().setIntroCompleted(requireIntro ? true : false);
   loadDefaultNotes();
   if (!requireIntro) {
     await MMKV.setItem(
@@ -98,13 +99,13 @@ const App = () => {
       try {
         checkOrientation();
         await SettingsService.init();
-        await loadDatabase();
         if (
           SettingsService.get().appLockMode &&
           SettingsService.get().appLockMode !== 'none'
         ) {
           setVerifyUser(true);
         }
+        await loadDatabase();
       } catch (e) {} finally {
         databaseHasLoaded = true;
         loadMainApp();

apps/mobile/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
- // "transform-remove-console"
+  "transform-remove-console"
   ]
 };

apps/mobile/src/components/AppLoader/index.js

@@ -32,13 +32,13 @@ let passwordValue = null;
 let didVerifyUser = false;
 const opacityV = new Animated.Value(1);
 const AppLoader = ({onLoad}) => {
-  const [state,] = useTracked();
+  const [state] = useTracked();
   const colors = state.colors;
   const [loading, setLoading] = useState(true);
   const setNotes = useNoteStore(state => state.setNotes);
   const setFavorites = useFavoriteStore(state => state.setFavorites);
   const _setLoading = useNoteStore(state => state.setLoading);
-  const [user, setUser] = useState();
+  const user = useUserStore(state => state.user);
   const verifyUser = useUserStore(state => state.verifyUser);
   const setVerifyUser = useUserStore(state => state.setVerifyUser);
 
@@ -98,12 +98,6 @@ const AppLoader = ({onLoad}) => {
       } else {
         load();
       }
-    } else {
-      db?.user?.getUser().then(u => {
-        if (u) {
-          setUser(u);
-        }
-      }).catch(() => {});
     }
     if (verifyUser) {
       onUnlockBiometrics();

apps/mobile/src/components/SplashScreen/index.js

@@ -1,19 +1,21 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {Image, View} from 'react-native';
+import {Image, SafeAreaView, View} from 'react-native';
 import Animated, {Easing, timing, useValue} from 'react-native-reanimated';
 import Carousel from 'react-native-snap-carousel';
 import {SvgXml} from 'react-native-svg';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
+  COMMUNITY_SVG,
   NOTE_SVG,
-  SYNC_SVG,
   ORGANIZE_SVG,
   PRIVACY_SVG,
-  COMMUNITY_SVG,
+  SYNC_SVG,
 } from '../../assets/images/assets';
 import {useTracked} from '../../provider';
-import {eSendEvent} from '../../services/EventManager';
+import {useSettingStore} from '../../provider/stores';
+import {DDS} from '../../services/DeviceDetection';
 import {dHeight, dWidth, getElevation} from '../../utils';
-import {eOpenLoginDialog} from '../../utils/Events';
+import {openLinkInBrowser} from '../../utils/functions';
 import {SIZE} from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
 import {sleep} from '../../utils/TimeUtils';
@@ -21,14 +23,6 @@ import {Button} from '../Button';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {DDS} from '../../services/DeviceDetection';
-import {openLinkInBrowser} from '../../utils/functions';
-import {Modal} from 'react-native';
-import {SafeAreaView} from 'react-native';
-import {SvgToPngView} from '../ListPlaceholders';
-import {MMKV} from '../../utils/mmkv';
-
 const features = [
   {
     title: 'Notesnook',
@@ -73,33 +67,30 @@ let currentIndex = 0;
 const SplashScreen = () => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  const [visible, setVisible] = useState(false);
   const carouselRef = useRef();
   const [isNext, setIsNext] = useState(true);
-
+  const isIntroCompleted = useSettingStore(state => state.isIntroCompleted);
+  const setIntroCompleted = useSettingStore(state => state.setIntroCompleted);
   const opacity = useValue(0);
   const translateY = useValue(20);
   const translateY2 = useValue(0);
 
   useEffect(() => {
-    MMKV.getStringAsync('introCompleted').then(async r => {
+    if (!isIntroCompleted) {
       setTimeout(() => {
-        if (!r) {
+        timing(opacity, {
-          setVisible(true);
+          toValue: 1,
-          timing(opacity, {
+          duration: 500,
-            toValue: 1,
+          easing: Easing.in(Easing.ease),
-            duration: 500,
+        }).start();
-            easing: Easing.in(Easing.ease),
+        timing(translateY, {
-          }).start();
+          toValue: 0,
-          timing(translateY, {
+          duration: 500,
-            toValue: 0,
+          easing: Easing.in(Easing.ease),
-            duration: 500,
+        }).start();
-            easing: Easing.in(Easing.ease),
+      }, 15);
-          }).start();
+    }
-        }
+  }, [isIntroCompleted]);
-      }, 1);
-    });
-  }, []);
 
   const hide = async () => {
     timing(translateY2, {
@@ -108,11 +99,11 @@ const SplashScreen = () => {
       easing: Easing.in(Easing.ease),
     }).start();
     await sleep(500);
-    setVisible(false);
+    setIntroCompleted(true);
   };
 
   return (
-    visible && (
+    !isIntroCompleted && (
       <Animated.View
         style={{
           zIndex: 999,

apps/mobile/src/provider/interfaces.ts

@@ -91,6 +91,8 @@ export interface SettingStore extends State {
     setDimensions: (dimensions: Dimensions) => void
     appLoading:boolean
     setAppLoading:(appLoading:boolean) => void
+    isIntroCompleted:boolean
+    setIntroCompleted:(isIntroCompleted:boolean) => void
 }
 
 export interface MenuStore extends State {

apps/mobile/src/provider/stores.ts

@@ -168,12 +168,15 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
   fullscreen: false,
   deviceMode: null,
   dimensions: { width, height },
+  appLoading:true,
+  isIntroCompleted:false,
   setSettings: settings => set({ settings }),
   setFullscreen: fullscreen => set({ fullscreen }),
   setDeviceMode: mode => set({ deviceMode: mode }),
   setDimensions: dimensions => set({ dimensions: dimensions }),
-  appLoading:true,
+  setAppLoading:(appLoading) => set({appLoading}),
-  setAppLoading:(appLoading) => set({appLoading})
+  setIntroCompleted:(isIntroCompleted) => set({isIntroCompleted})
+
 }));
 
 export const useMenuStore = create<MenuStore>((set, get) => ({

apps/mobile/src/views/Editor/EditorSettings.js

@@ -1,29 +1,28 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import {View} from 'react-native';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ActionSheetWrapper from '../../components/ActionSheetComponent/ActionSheetWrapper';
 import BaseDialog from '../../components/Dialog/base-dialog';
 import DialogButtons from '../../components/Dialog/dialog-buttons';
 import DialogContainer from '../../components/Dialog/dialog-container';
 import DialogHeader from '../../components/Dialog/dialog-header';
 import Input from '../../components/Input';
-import {PressableButton} from '../../components/PressableButton';
+import { PressableButton } from '../../components/PressableButton';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
-import {useTracked} from '../../provider';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {SIZE} from '../../utils/SizeUtils';
-import {sleep} from '../../utils/TimeUtils';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Seperator from '../../components/Seperator';
-import SettingsService from '../../services/SettingsService';
+import Paragraph from '../../components/Typography/Paragraph';
+import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import SettingsService from '../../services/SettingsService';
+import { SIZE } from '../../utils/SizeUtils';
+import { sleep } from '../../utils/TimeUtils';
 
 export const EditorSettings = () => {
-  const [state,dispatch] = useTracked();
+  const [state, dispatch] = useTracked();
   const {colors} = state;
-  
+
   const settings = useSettingStore(state => state.settings);
-  
+
   const [visible, setVisible] = useState(false);
   const [savePreset, setSavePreset] = useState(false);
   const actionSheetRef = useRef();
@@ -68,7 +67,6 @@ export const EditorSettings = () => {
         }
         editorSettings[id] = !enabled;
         SettingsService.set('editorSettings', {...editorSettings});
-        
       }}
       customStyle={{
         flexDirection: 'row',