refactor and use require

apps/mobile/App.js

@@ -34,7 +34,9 @@ const App = () => {
               ? 'smallTablet'
               : 'mobile',
           });
+          SplashScreen.hide();
         });
+      
         await db.init();
       } catch (e) {
         console.log(e);
@@ -56,9 +58,10 @@ const App = () => {
   }, []);
 
   const loadMainApp = () => {
-    SplashScreen.hide();
+   
     dispatch({type: Actions.ALL});
     eSendEvent(eOpenSideMenu);
+
     SettingsService.setAppLoaded();
     db.notes.init().then(() => {
       dispatch({type: Actions.NOTES});

apps/mobile/NotesnookShare.js

@@ -1,4 +1,3 @@
-import {getLinkPreview} from 'link-preview-js';
 import React, {Component, createRef} from 'react';
 import {
   ActivityIndicator,
@@ -11,14 +10,16 @@ import {
   View,
 } from 'react-native';
 import {ScrollView, TextInput} from 'react-native-gesture-handler';
-import ShareExtension from 'rn-extensions-share';
-import validator from 'validator';
+
 import {COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT} from './src/utils/Colors';
 import {db} from './src/utils/DB';
 import {SIZE} from './src/utils/SizeUtils';
 import Storage from './src/utils/storage';
 import {sleep} from './src/utils/TimeUtils';
 
+let validator;
+let linkPreview;
+let ShareExtension;
 export default class NotesnookShare extends Component {
   constructor(props, context) {
     super(props, context);
@@ -41,6 +42,9 @@ export default class NotesnookShare extends Component {
 
   async componentDidMount() {
     try {
+      ShareExtension = require("rn-extensions-share").default
+      validator = require("validator").default
+      linkPreview = require("link-preview-js")
       const data = await ShareExtension.data();
       let text;
       let item = data[0];
@@ -48,9 +52,8 @@ export default class NotesnookShare extends Component {
         text = item.value;
       }
       if (validator.isURL(text)) {
-        getLinkPreview(text)
+        linkPreview.getLinkPreview(text)
           .then((r) => {
-            console.log(r);
             if (r?.siteName) {
               this.setState({
                 title: r.siteName,

apps/mobile/index.js

@@ -1,13 +1,14 @@
-import 'react-native-gesture-handler'
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
 import React from 'react';
-import {Provider} from './src/provider';
-import NotesnookShare from './NotesnookShare';
+import {AppRegistry} from 'react-native';
+import {name as appName} from './app.json';
 
+let Provider;
+let App;
+let NotesnookShare;
 
 const AppProvider = () => {
+  Provider = require('./src/provider').Provider
+  App = require("./App").default
   return (
     <Provider>
       <App />
@@ -16,4 +17,7 @@ const AppProvider = () => {
 };
 
 AppRegistry.registerComponent(appName, () => AppProvider);
-AppRegistry.registerComponent('NotesnookShare', () => NotesnookShare)
+AppRegistry.registerComponent('NotesnookShare', () => {
+  NotesnookShare = require("./NotesnookShare").default
+  return NotesnookShare;
+})

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

@@ -12,7 +12,7 @@ export const Container = ({children, root}) => {
       <SafeAreaView
         style={{
           height: '100%',
-          backgroundColor:colors.bg
+          backgroundColor:colors.bg,
         }}>
         <SelectionHeader />
         <ContainerTopSection root={root} />

apps/mobile/src/components/DialogManager/Recievers.js

@@ -63,5 +63,6 @@ export const HideAddTopicEvent = notebook => {
 };
 
 export const updateEvent = data => {
+  
   eSendEvent(eDispatchAction, data);
 };

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

@@ -9,6 +9,8 @@ import {
   TRASH_SVG,
   SETTINGS_SVG,
   SEARCH_SVG,
+  LOGIN_SVG,
+  LOGO_SVG,
 } from '../../assets/images/assets';
 import {useTracked} from '../../provider';
 export const Placeholder = ({type, w, h, color}) => {
@@ -32,6 +34,10 @@ export const Placeholder = ({type, w, h, color}) => {
         return SETTINGS_SVG(colors.accent);
       case 'search':
         return SEARCH_SVG(colors.accent);
+      case 'login':
+        return LOGIN_SVG(colors.accent);
+      case 'signup':
+        return LOGO_SVG;
     }
   };
 

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

@@ -1,35 +1,35 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Modal, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, {useEffect, useRef, useState} from 'react';
+import {ActivityIndicator, Modal, TouchableOpacity, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Button } from '../../components/Button';
+import {Button} from '../../components/Button';
 import Seperator from '../../components/Seperator';
-import { Toast } from '../../components/Toast';
-import { Actions } from '../../provider/Actions';
-import { useTracked } from '../../provider/index';
-import { DDS } from '../../services/DeviceDetection';
+import {Toast} from '../../components/Toast';
+import {Actions} from '../../provider/Actions';
+import {useTracked} from '../../provider/index';
+import {DDS} from '../../services/DeviceDetection';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
-  ToastEvent
+  ToastEvent,
 } from '../../services/EventManager';
-import { clearMessage, setEmailVerifyMessage } from '../../services/Message';
+import {clearMessage, setEmailVerifyMessage} from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
-import { getElevation } from '../../utils';
-import { db } from '../../utils/DB';
+import {getElevation} from '../../utils';
+import {db} from '../../utils/DB';
 import {
   eOpenLoginDialog,
   eOpenRecoveryKeyDialog,
-  refreshNotesPage
+  refreshNotesPage,
 } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
+import {MMKV} from '../../utils/mmkv';
+import {SIZE} from '../../utils/SizeUtils';
+import {sleep} from '../../utils/TimeUtils';
+import {ActionIcon} from '../ActionIcon';
 import BaseDialog from '../Dialog/base-dialog';
 import Input from '../Input';
-import { Header } from '../SimpleList/header';
+import {Header} from '../SimpleList/header';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -194,7 +194,7 @@ const LoginDialog = () => {
         close();
         setEmailVerifyMessage(dispatch);
         await sleep(500);
-        console.log('showing verify email dialog')
+        console.log('showing verify email dialog');
         PremiumService.showVerifyEmailDialog();
       } else {
         ToastEvent.show(e.message, 'error', 'local');
@@ -457,7 +457,7 @@ const LoginDialog = () => {
 
           <Header
             color="transparent"
-            type="settings"
+            type="login"
             shouldShow
             title={current.headerButton}
             messageCard={false}

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

@@ -36,6 +36,7 @@ const MoveNoteDialog = () => {
   const [, dispatch] = useTracked();
   const [visible, setVisible] = useState(false);
   const [note, setNote] = useState(null);
+  
   function open(note) {
     setNote(note);
     setVisible(true);

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

@@ -2,7 +2,7 @@ import React, {createRef} from 'react';
 import {Clipboard, View} from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import RNFetchBlob from 'rn-fetch-blob';
+
 import {LOGO_BASE64} from '../../assets/images/assets';
 import {
   eSendEvent,
@@ -23,6 +23,9 @@ import Seperator from '../Seperator';
 import {Toast} from '../Toast';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
+
+let RNFetchBlob;
+
 class RecoveryKeyDialog extends React.Component {
   constructor(props) {
     super(props);
@@ -84,6 +87,7 @@ class RecoveryKeyDialog extends React.Component {
   }
 
   saveQRCODE = async () => {
+ 
     if ((await Storage.requestPermission()) === false) {
       ToastEvent.show('Storage access not granted!', 'error', 'local');
       return;
@@ -91,7 +95,7 @@ class RecoveryKeyDialog extends React.Component {
 
     this.svg.current?.toDataURL(async (data) => {
       let path = await Storage.checkAndCreateDir('/');
-
+      RNFetchBlob = require("rn-fetch-blob"); 
       let fileName = 'nn_' + this.user.email + '_recovery_key_qrcode.png';
       RNFetchBlob.fs.writeFile(path + fileName, data, 'base64').then((res) => {
         RNFetchBlob.fs
@@ -113,13 +117,14 @@ class RecoveryKeyDialog extends React.Component {
   };
 
   saveToTextFile = async () => {
+
     if ((await Storage.requestPermission()) === false) {
       ToastEvent.show('Storage access not granted!', 'error', 'local');
       return;
     }
     let path = await Storage.checkAndCreateDir('/');
     let fileName = 'nn_' + this.user.email + '_recovery_key.txt';
-
+    RNFetchBlob = require("rn-fetch-blob");
     RNFetchBlob.fs
       .writeFile(path + fileName, this.state.key, 'utf8')
       .then((r) => {

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

@@ -2,7 +2,6 @@ import React, {createRef, useEffect, useState} from 'react';
 import {ActivityIndicator, Platform, ScrollView, View} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {FlatList} from 'react-native-gesture-handler';
-import RNFetchBlob from 'rn-fetch-blob';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {
@@ -23,7 +22,7 @@ import {Toast} from '../Toast';
 import Paragraph from '../Typography/Paragraph';
 
 const actionSheetRef = createRef();
-
+let RNFetchBlob
 const RestoreDialog = () => {
   const [visible, setVisible] = useState(false);
   const [restoring, setRestoring] = useState(false);
@@ -125,6 +124,7 @@ const RestoreDataComponent = ({close, setRestoring, restoring}) => {
         return;
       }
     }
+    RNFetchBlob = require("rn-fetch-blob");
     try {
       let path = await storage.checkAndCreateDir('/backups/');
       let files = await RNFetchBlob.fs.lstat(path);

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

@@ -1,18 +1,17 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {Image} from 'react-native';
-import {View} from 'react-native';
-import Animated, {Easing, timing, useValue} from 'react-native-reanimated';
+import React, { useEffect, useRef, useState } from 'react';
+import { Image, 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 {NOTE_SVG, LOGO_SVG, SYNC_SVG} from '../../assets/images/assets';
-import {useTracked} from '../../provider';
-import {eSendEvent} from '../../services/EventManager';
-import {dHeight, dWidth, getElevation} from '../../utils';
-import {eOpenLoginDialog} from '../../utils/Events';
-import {SIZE} from '../../utils/SizeUtils';
+import { SvgXml } from 'react-native-svg';
+import { NOTE_SVG, SYNC_SVG } from '../../assets/images/assets';
+import { useTracked } from '../../provider';
+import { eSendEvent } from '../../services/EventManager';
+import { dHeight, dWidth, getElevation } from '../../utils';
+import { eOpenLoginDialog } from '../../utils/Events';
+import { SIZE } from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
-import {sleep} from '../../utils/TimeUtils';
-import {Button} from '../Button';
+import { sleep } from '../../utils/TimeUtils';
+import { Button } from '../Button';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -28,7 +27,7 @@ const SplashScreen = () => {
   const features = [
     {
       title: 'Notesnook',
-      description: 'A safe place to write and get organized.',
+      description: 'A safe place to write and stay organized.',
       icon: require('../../assets/images/notesnook-logo-png.png'),
       type: 'image',
     },
@@ -45,9 +44,13 @@ const SplashScreen = () => {
   ];
 
   useEffect(() => {
-    Storage.read('introCompleted').then((r) => {
-      if (!r) {
+
+    return;
+    Storage.read('introCompleted').then(async (r) => {
       setVisible(true);
+      await sleep(500);
+      requestAnimationFrame(() => {
+        if (!r) {
           timing(opacity, {
             toValue: 1,
             duration: 500,
@@ -60,6 +63,7 @@ const SplashScreen = () => {
           }).start();
         }
       });
+    });
   }, []);
 
   const hide = async () => {
@@ -77,6 +81,7 @@ const SplashScreen = () => {
       <Animated.View
         style={{
           zIndex: 999,
+          ...getElevation(10),
           width: '100%',
           height: '100%',
           position: 'absolute',

apps/mobile/src/navigation/NavigatorStack.js

@@ -29,6 +29,7 @@ const forFade = ({current}) => ({
 });
 
 const forSlide = ({current, next, inverted, layouts: {screen}}) => {
+
   const progress = Animated.add(
     current.progress.interpolate({
       inputRange: [0, 1],

apps/mobile/src/services/Backup.js

@@ -1,15 +1,16 @@
 const {MMKV} = require('../utils/MMKV');
-import RNFetchBlob from 'rn-fetch-blob';
+
 import storage from '../utils/storage';
 import {db} from '../utils/DB';
 import {eSendEvent, ToastEvent} from './EventManager';
 import SettingsService from './SettingsService';
 import {eCloseProgressDialog, eOpenProgressDialog} from '../utils/Events';
 import {sleep} from '../utils/TimeUtils';
+import Share from 'react-native-share';
 
 const MS_DAY = 86400000;
 const MS_WEEK = MS_DAY * 7;
-
+let RNFetchBlob;
 async function run() {
   if (Platform.OS === 'android') {
     let granted = await storage.requestPermission();
@@ -18,6 +19,7 @@ async function run() {
       return;
     }
   }
+  RNFetchBlob = require('rn-fetch-blob');
   eSendEvent(eOpenProgressDialog, {
     title: 'Backing up your data',
     paragraph:

apps/mobile/src/services/Exporter.js

@@ -1,10 +1,11 @@
 import {Platform} from 'react-native';
 import {db} from '../utils/DB';
-import RNFetchBlob from 'rn-fetch-blob';
 import {ToastEvent} from './EventManager';
 import RNHTMLtoPDF from 'react-native-html-to-pdf-lite';
 import Storage from '../utils/storage';
 
+let RNFetchBlob;
+
 async function saveToPDF(note) {
   let androidSavePath = '/Notesnook/exported/PDF';
   if (Platform.OS === 'android') {
@@ -43,6 +44,7 @@ async function saveToMarkdown(note) {
       return null;
     }
   }
+  RNFetchBlob = require("rn-fetch-blob");
   let markdown = await db.notes.note(note.id).export('md');
 
   path = path + note.title + '.md';
@@ -64,6 +66,7 @@ async function saveToText(note) {
       return null;
     }
   }
+  RNFetchBlob = require("rn-fetch-blob");
   let text = await db.notes.note(note.id).export('txt');
   path = path + note.title + '.txt';
   await RNFetchBlob.fs.writeFile(path, text, 'utf8');
@@ -84,6 +87,7 @@ async function saveToHTML(note) {
       return null;
     }
   }
+  RNFetchBlob = require("rn-fetch-blob");
   let html = await db.notes.note(note.id).export('html');
   path = path + note.title + '.html';
   await RNFetchBlob.fs.writeFile(path, html, 'utf8');

apps/mobile/src/services/PremiumService.js

@@ -30,12 +30,12 @@ async function setPremiumStatus() {
 }
 
 function get() {
-  return (
+  return true /*  (
     premiumStatus === 1 ||
     premiumStatus === 2 ||
     premiumStatus === 5 ||
     premiumStatus === 6
-  );
+  ); */
 }
 
 async function verify(callback, error) {
@@ -102,7 +102,7 @@ const onUserStatusCheck = async (type) => {
     }
   }
 
-  return {type, result: status};
+  return {type, result: true};
 };
 
 const showVerifyEmailDialog = () => {

apps/mobile/src/utils/Storage.js

@@ -1,13 +1,12 @@
-import 'react-native-get-random-values';
-import {generateSecureRandom} from 'react-native-securerandom';
-import Sodium from 'react-native-sodium';
-import RNFetchBlob from 'rn-fetch-blob';
-import {PERMISSIONS, requestMultiple, RESULTS} from 'react-native-permissions';
-import {MMKV} from './mmkv';
 import {Platform} from 'react-native';
-import {ANDROID_PATH, IOS_PATH} from '.';
-import * as Keychain from 'react-native-keychain';
+import 'react-native-get-random-values';
+import {PERMISSIONS, requestMultiple, RESULTS} from 'react-native-permissions';
+import {generateSecureRandom} from 'react-native-securerandom';
+import {MMKV} from './mmkv';
 
+let Sodium;
+let Keychain;
+let RNFetchBlob;
 async function read(key, isArray = false) {
   let data = await MMKV.getItem(key);
   if (!data) return null;
@@ -53,44 +52,60 @@ async function clear() {
 }
 
 function encrypt(password, data) {
+  if (!Sodium) {
+    Sodium = require('react-native-sodium');
+  }
+
   return Sodium.encrypt(password, data).then((result) => result);
 }
 
 function decrypt(password, data) {
+  if (!Sodium) {
+    Sodium = require('react-native-sodium')
+  }
   return Sodium.decrypt(password, data).then((result) => result);
 }
 
-let CRYPT_CONFIG = Platform.select({
+let CRYPT_CONFIG = (kc) =>
+  Platform.select({
     ios: {
-    accessible: Keychain.ACCESSIBLE.AFTER_FIRST_UNLOCK,
+      accessible: kc.ACCESSIBLE.AFTER_FIRST_UNLOCK,
     },
     android: {
-    authenticationType:
-      Keychain.AUTHENTICATION_TYPE.DEVICE_PASSCODE_OR_BIOMETRICS,
-    accessControl: Keychain.ACCESS_CONTROL.DEVICE_PASSCODE,
-    rules: Keychain.SECURITY_RULES.AUTOMATIC_UPGRADE,
+      authenticationType: kc.AUTHENTICATION_TYPE.DEVICE_PASSCODE_OR_BIOMETRICS,
+      accessControl: kc.ACCESS_CONTROL.DEVICE_PASSCODE,
+      rules: kc.SECURITY_RULES.AUTOMATIC_UPGRADE,
       authenticationPrompt: {
         cancel: null,
       },
     },
-});
+  });
 
 async function deriveCryptoKey(name, data) {
+  if (!Keychain) {
+    Keychain = require('react-native-keychain');
+  }
+
+  if (!Sodium) {
+    Sodium = require('react-native-sodium');
+  }
+
   try {
     let credentials = await Sodium.deriveKey(data.password, data.salt);
     await Keychain.setInternetCredentials(
       'notesnook',
       name,
       credentials.key,
-      CRYPT_CONFIG,
+      CRYPT_CONFIG(Keychain),
     );
     return credentials.key;
-  } catch (e) {
-
-  }
+  } catch (e) {}
 }
 
 async function getCryptoKey(name) {
+  if (!Keychain) {
+    Keychain = require('react-native-keychain');
+  }
   try {
     if (await Keychain.hasInternetCredentials('notesnook')) {
       let credentials = await Keychain.getInternetCredentials(
@@ -101,18 +116,18 @@ async function getCryptoKey(name) {
     } else {
       return null;
     }
-  } catch (e) {
-
-  }
+  } catch (e) {}
 }
 
 async function removeCryptoKey(name) {
+  if (!Keychain) {
+    Keychain = require('react-native-keychain');
+  }
+
   try {
     let result = await Keychain.resetInternetCredentials('notesnook');
     return result;
-  } catch (e) {
-
-  }
+  } catch (e) {}
 }
 
 async function getAllKeys() {
@@ -138,7 +153,15 @@ async function requestPermission() {
   return granted;
 }
 async function checkAndCreateDir(path) {
-  let dir = Platform.OS === 'ios' ? IOS_PATH + path : ANDROID_PATH + path;
+  if (!RNFetchBlob) {
+    RNFetchBlob = require('rn-fetch-blob');
+  }
+
+  let dir =
+    Platform.OS === 'ios'
+      ? RNFetchBlob.fs.dirs.DocumentDir + path
+      : RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/' + path;
+
   try {
     let exists = await RNFetchBlob.fs.exists(dir);
     let isDir = await RNFetchBlob.fs.isDir(dir);
@@ -146,15 +169,17 @@ async function checkAndCreateDir(path) {
       await RNFetchBlob.fs.mkdir(dir);
     }
   } catch (e) {
-    
     await RNFetchBlob.fs.mkdir(dir);
   } finally {
   }
   return dir;
 }
 
-async function hash(password,email) {
-  return await Sodium.hashPassword(password,email)
+async function hash(password, email) {
+  if (!Sodium) {
+    Sodium = require('react-native-sodium');
+  }
+  return await Sodium.hashPassword(password, email);
 }
 
 export default {
@@ -172,5 +197,5 @@ export default {
   deriveCryptoKey,
   getCryptoKey,
   removeCryptoKey,
-  hash
+  hash,
 };

apps/mobile/src/utils/index.js

@@ -3,7 +3,6 @@ import {eSendEvent} from '../services/EventManager';
 import {updateEvent} from '../components/DialogManager/recievers';
 import {Actions} from '../provider/Actions';
 import {MMKV} from './mmkv';
-import RNFetchBlob from 'rn-fetch-blob';
 import {defaultState} from '../provider/DefaultState';
 import {createRef} from 'react';
 import {dummyRef} from '../components/DummyText';
@@ -23,9 +22,6 @@ export async function setSetting(settings, name, value) {
 export const scrollRef = createRef();
 export const AndroidModule = NativeModules.NNativeModule;
 
-export const dirs = RNFetchBlob.fs.dirs;
-export const ANDROID_PATH = dirs.SDCardDir + '/Notesnook/';
-export const IOS_PATH = dirs.DocumentDir;
 
 export const getElevation = (elevation) => {
   return {

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

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {KeyboardAvoidingView, Platform, SafeAreaView, View} from 'react-native';
 import {PanGestureHandler, State} from 'react-native-gesture-handler';
 import Animated, {Easing} from 'react-native-reanimated';
@@ -11,13 +11,13 @@ import {eSendEvent} from '../../services/EventManager';
 import {eOnLoadNote} from '../../utils/Events';
 import {editorRef} from '../../utils/Refs';
 import EditorOverlay from './EditorOverlay';
-import Editor from './index';
 let prevVal = 0;
 let finalValue = 80;
 let anim2 = new Animated.Value(0);
 const op1 = new Animated.Value(1);
 const op2 = new Animated.Value(0);
 const op3 = new Animated.Value(0);
+
 const onHandlerStateChange = (evt) => {
   if (evt.nativeEvent.state === State.END) {
     if (evt.nativeEvent.translationY >= finalValue) {
@@ -84,11 +84,23 @@ const AnimatedKeyboardView = Animated.createAnimatedComponent(
   KeyboardAvoidingView,
 );
 
+let Editor;
+
 export const EditorWrapper = ({dimensions}) => {
   const [state] = useTracked();
-  const {colors} = state;
+  const {colors, loading} = state;
+  const [loaded, setLoaded] = useState(false);
   const insets = useSafeAreaInsets();
 
+  useEffect(() => {
+    if (!loading) {
+      if (!Editor) {
+        Editor = require('./index').default;
+      }
+      setLoaded(true);
+    }
+  }, [loading]);
+
   return (
     <View
       ref={editorRef}
@@ -173,8 +185,7 @@ export const EditorWrapper = ({dimensions}) => {
               </Animated.Text>
             </View>
 
-            <Editor />
-
+            {!loaded || loading ? null : <Editor />}
             <EditorOverlay />
           </AnimatedKeyboardView>
         </PanGestureHandler>

apps/mobile/src/views/Editor/tiny/toolbar/commands.js

@@ -1,6 +1,7 @@
 import DocumentPicker from 'react-native-document-picker';
-import RNFetchBlob from 'rn-fetch-blob';
+
 import {formatSelection} from './constants';
+let RNFetchBlob;
 
 export const execCommands = {
   bold: `tinymce.activeEditor.execCommand('Bold');`,
@@ -52,6 +53,8 @@ export const execCommands = {
     DocumentPicker.pick({
       type: [DocumentPicker.types.images],
     }).then((r) => {
+
+      RNFetchBlob = require("rn-fetch-blob");
       RNFetchBlob.fs.readFile(r.uri, 'base64').then((read) => {
         let b64 = `data:${r.type};base64, ` + read;
         formatSelection(`
@@ -70,7 +73,6 @@ export const execCommands = {
     });
   },
   video: `tinymce.activeEditor.execCommand('mceMedia')`,
-  code: `tinymce.activeEditor.execCommand('mceCode')`,
-  /* 
-,*/
+  code: `tinymce.activeEditor.execCommand('CodeBlock')`,
+
 };

apps/mobile/src/views/Home/index.js

@@ -80,7 +80,7 @@ export const Home = ({route, navigation}) => {
       placeholder: 'Type a keyword to search in notes',
       data: db?.notes?.all,
       type: 'notes',
-      title:'Notes'
+      title: 'Notes',
     });
   };
 

apps/mobile/src/views/Settings/index.js

@@ -1,4 +1,5 @@
 import React, {createRef, useCallback, useEffect, useState} from 'react';
+import {Image} from 'react-native';
 import {
   Appearance,
   InteractionManager,
@@ -178,7 +179,7 @@ export const Settings = ({navigation}) => {
             'Follow the development process',
             'Give suggestions and report issues.',
             'Get early access to new features',
-            'Meet other people using Notesnook',
+            'Meet other people that use Notesnook',
           ],
           noProgress: true,
           icon: 'discord',
@@ -226,8 +227,6 @@ export const Settings = ({navigation}) => {
         )}
         <SettingsUserSection />
         <SettingsAppearanceSection />
-
-        <>
         <SettingsPrivacyAndSecurity />
         <SettingsBackupAndRestore />
 
@@ -243,7 +242,6 @@ export const Settings = ({navigation}) => {
         ))}
 
         <AccoutLogoutSection />
-        </>
 
         <View
           style={{