Merge branch 'develop' into tiptap-editor

2025-12-23 23:19:40 +01:00 · 2022-05-20 12:40:14 +05:00
parent e253fc5934 acc32d9825
commit 252e1b6850
278 changed files with 14374 additions and 7929 deletions
--- a/apps/mobile/.detoxrc.json
+++ b/apps/mobile/.detoxrc.json
@@ -11,20 +11,19 @@
      }
    },
    "android.emu.debug": {
-        "binaryPath": "android/app/build/outputs/apk/debug/app-arm64-v8a-debug.apk",
-        "build":
-        "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
-        "type": "android.emulator",
-        "name": "emu"
-      },
+      "binaryPath": "android/app/build/outputs/apk/debug/app-arm64-v8a-debug.apk",
+      "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
+      "type": "android.emulator",
+      "name": "emu"
+    },
    "android.dev.debug": {
      "binaryPath": "android/app/build/outputs/apk/debug/app-arm64-v8a-debug.apk",
      "testBinaryPath": "android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk",
      "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
      "type": "android.attached",
      "device": {
-        "adbName": "192.168.10.2:5555",
-        "adbNameAlt":"LMG710ULM3d3678f0"
+        "adbName": "LMG710ULM3d3678f0",
+        "adbNameAlt": "LMG710ULM3d3678f0"
      }
    },
    "android.dev.release": {
--- a/apps/mobile/.flowconfig
+++ b/apps/mobile/.flowconfig
@@ -15,6 +15,8 @@ node_modules/warning/.*
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js

+.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*

@@ -70,4 +72,4 @@ untyped-import
 untyped-type-import

 [version]
-^0.162.0
+^0.170.0
--- a/apps/mobile/.gitignore
+++ b/apps/mobile/.gitignore
@@ -57,8 +57,9 @@ buck-out/
 # Bundle artifact
 *.jsbundle

-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/


 # Other
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -1,37 +1,42 @@
 import React, { useEffect } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Launcher from './src/components/launcher';
 import { ApplicationHolder } from './src/navigation';
 import Notifications from './src/services/notifications';
 import SettingsService from './src/services/settings';
 import { TipManager } from './src/services/tip-manager';
-import { useUserStore } from './src/stores/stores';
+import { useUserStore } from './src/stores/use-user-store';
 import { useAppEvents } from './src/utils/hooks/use-app-events';

+SettingsService.init();
 SettingsService.checkOrientation();
 const App = () => {
  useAppEvents();
-
  useEffect(() => {
-    (async () => {
-      try {
-        await SettingsService.init();
-        let appLockMode = SettingsService.get().appLockMode;
-        if (appLockMode && appLockMode !== 'none') {
-          useUserStore.getState().setVerifyUser(true);
-        }
-        await TipManager.init();
-        Notifications.get();
-        await SettingsService.onFirstLaunch();
-      } catch (e) {}
-    })();
+    let { appLockMode } = SettingsService.get();
+    if (appLockMode && appLockMode !== 'none') {
+      useUserStore.getState().setVerifyUser(true);
+    }
+    setTimeout(() => {
+      console.log('run later');
+      SettingsService.onFirstLaunch();
+      Notifications.get();
+      TipManager.init();
+    }, 100);
  }, []);

  return (
-    <SafeAreaProvider>
-      <ApplicationHolder />
-      <Launcher />
-    </SafeAreaProvider>
+    <GestureHandlerRootView
+      style={{
+        flex: 1
+      }}
+    >
+      <SafeAreaProvider>
+        <ApplicationHolder />
+        <Launcher />
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
  );
 };

--- a/apps/mobile/Gemfile.lock
+++ b/apps/mobile/Gemfile.lock
@@ -3,7 +3,7 @@ GEM
  specs:
    CFPropertyList (3.0.5)
      rexml
-    activesupport (6.1.4.4)
+    activesupport (6.1.5)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -16,10 +16,10 @@ GEM
      json (>= 1.5.1)
    atomos (0.1.3)
    claide (1.1.0)
-    cocoapods (1.11.2)
+    cocoapods (1.11.3)
      addressable (~> 2.8)
      claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.2)
+      cocoapods-core (= 1.11.3)
      cocoapods-deintegrate (>= 1.0.3, < 2.0)
      cocoapods-downloader (>= 1.4.0, < 2.0)
      cocoapods-plugins (>= 1.0.0, < 2.0)
@@ -34,7 +34,7 @@ GEM
      nap (~> 1.0)
      ruby-macho (>= 1.0, < 3.0)
      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.2)
+    cocoapods-core (1.11.3)
      activesupport (>= 5.0, < 7)
      addressable (~> 2.8)
      algoliasearch (~> 1.0)
@@ -45,7 +45,7 @@ GEM
      public_suffix (~> 4.0)
      typhoeus (~> 1.0)
    cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (1.5.1)
+    cocoapods-downloader (1.6.3)
    cocoapods-plugins (1.0.0)
      nap
    cocoapods-search (1.0.1)
@@ -54,7 +54,7 @@ GEM
      netrc (~> 0.11)
    cocoapods-try (1.2.0)
    colored2 (3.1.2)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
    escape (0.0.4)
    ethon (0.15.0)
      ffi (>= 1.15.0)
@@ -63,7 +63,7 @@ GEM
    fuzzy_match (2.0.4)
    gh_inspector (1.1.3)
    httpclient (2.8.3)
-    i18n (1.8.11)
+    i18n (1.10.0)
      concurrent-ruby (~> 1.0)
    json (2.6.1)
    minitest (5.15.0)
@@ -71,7 +71,7 @@ GEM
    nanaimo (0.3.0)
    nap (1.1.0)
    netrc (0.11.0)
-    public_suffix (4.0.6)
+    public_suffix (4.0.7)
    rexml (3.2.5)
    ruby-macho (2.5.1)
    typhoeus (1.4.0)
@@ -85,12 +85,16 @@ GEM
      colored2 (~> 3.1)
      nanaimo (~> 0.3.0)
      rexml (~> 3.2.4)
-    zeitwerk (2.5.3)
+    zeitwerk (2.5.4)
+
 PLATFORMS
  ruby
+
 DEPENDENCIES
  cocoapods (~> 1.11, >= 1.11.2)
+
 RUBY VERSION
   ruby 2.7.4p191
+
 BUNDLED WITH
-   2.2.27
+   2.2.27
--- a/apps/mobile/ads.md
+++ b/apps/mobile/ads.md
@@ -0,0 +1,33 @@
+   1. Determine who your customer is
+   2. Determine the persona you want to take on to appeal to that customer
+   3. Write emotional ad copy from that persona
+
+   
+Your privacy is at risk
+Stop giving them so much
+Your data is not for sale
+Say NO to privacy invasive apps
+Keep all intruders away
+Take the first step towards privacy
+
+Password protected note taking app for journaling & daily notes with secure sync
+Take private notes, make lists, capture ideas and sync them anywhere.
+
+ to-do,list,markdown,note,draft,locked,secret,journal,memo,thought,encrypted,notebook,writing,planner
+
+ // Title
+ keywords:
+ online notes,
+ online note taking,
+ note taking
+ :::::
+ Notesnook - Online note taking
+
+// Short description
+keywords: 
+online notepad,
+diary with lock,
+private notes,
+notes writer,
+personal diary
+online journaling,
--- a/apps/mobile/android/app/proguard-rules.pro
+++ b/apps/mobile/android/app/proguard-rules.pro
@@ -47,4 +47,8 @@
 -keep class com.goterl.** { *; }
 -keepclassmembers class * extends com.sun.jna.* { public *; }

-keep class com.streetwriters.notesnook.BuildConfig { *; }
+-keep class com.streetwriters.notesnook.BuildConfig { *; }
+
+# Reanimated 
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
--- a/apps/mobile/android/app/src/debug/AndroidManifest.xml
+++ b/apps/mobile/android/app/src/debug/AndroidManifest.xml
@@ -8,6 +8,6 @@
        android:usesCleartextTraffic="true"
        tools:targetApi="28"
        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
    </application>
 </manifest>
--- a/apps/mobile/android/app/src/debug/java/com/notesnook/ReactNativeFlipper.java
+++ b/apps/mobile/android/app/src/debug/java/com/notesnook/ReactNativeFlipper.java
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
 * directory of this source tree.
@@ -19,6 +19,7 @@ import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceEventListener;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
@@ -51,7 +52,7 @@ public class ReactNativeFlipper {
      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
      if (reactContext == null) {
        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
+            new ReactInstanceEventListener() {
              @Override
              public void onReactContextInitialized(ReactContext reactContext) {
                reactInstanceManager.removeReactInstanceEventListener(this);
--- a/apps/mobile/android/app/src/main/AndroidManifest.xml
+++ b/apps/mobile/android/app/src/main/AndroidManifest.xml
@@ -24,6 +24,8 @@
        android:roundIcon="@mipmap/ic_launcher_round"
        android:theme="@style/BootTheme"
        android:largeHeap="true"
+        android:supportsRtl="false"
+        tools:replace="android:supportsRtl"
        android:usesCleartextTraffic="true">
        <receiver android:exported="false" android:name=".NoteWidget">
            <intent-filter>
--- a/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainActivity.java
+++ b/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainActivity.java
@@ -8,7 +8,9 @@ import android.os.Bundle;
 import android.webkit.WebView;
 import com.facebook.react.ReactActivityDelegate;
 import com.zoontek.rnbootsplash.RNBootSplash; 
-import com.zoontek.rnbars.RNBars; // <- add this necessary import
+import com.zoontek.rnbars.RNBars;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;

 public class MainActivity extends ReactActivity {

@@ -28,20 +30,37 @@ public class MainActivity extends ReactActivity {
    }

  }
-  
+
+    /**
+   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
+   * you can specify the rendered you wish to use (Fabric or the older renderer).
+   */
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new MainActivityDelegate(this, getMainComponentName());
+  }
+
+  public static class MainActivityDelegate extends ReactActivityDelegate {
+    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
+      super(activity, mainComponentName);
+    }
+    @Override
+    protected ReactRootView createRootView() {
+      ReactRootView reactRootView = new ReactRootView(getContext());
+      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
+	
+      return reactRootView;
+    }

    @Override
-  protected ReactActivityDelegate createReactActivityDelegate() {
-    return new ReactActivityDelegate(this, getMainComponentName()) {
-
-      @Override
      protected void loadApp(String appKey) {
-        RNBootSplash.init(MainActivity.this);
-        RNBars.init(MainActivity.this, "dark-content");
+        RNBootSplash.init(getPlainActivity());
+        RNBars.init(getPlainActivity(), "dark-content");
        super.loadApp(appKey);
      }
-    };
  }
+  

@Override
 public void onNewIntent(Intent intent) {
--- a/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainApplication.java
+++ b/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainApplication.java
@@ -29,12 +29,18 @@ import com.oblador.keychain.KeychainPackage;
 import com.onibenjo.htmltopdf.RNHTMLtoPDFModule;
 import com.reactnativedocumentpicker.DocumentPickerModule;
 import com.vinzscam.reactnativefileviewer.RNFileViewerModule;
-
+import com.facebook.react.config.ReactFeatureFlags;
+import com.streetwriters.notesnook.newarchitecture.MainApplicationReactNativeHost;
 import cl.json.RNShareModule;
 import px.tooltips.RNTooltipsModule;
+import com.facebook.react.bridge.JSIModulePackage; // <- add  
+import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add

 public class MainApplication extends MultiDexApplication implements ReactApplication {

+      private final ReactNativeHost mNewArchitectureNativeHost =
+      new MainApplicationReactNativeHost(this);
+
    private final ReactNativeHost mReactNativeHost =
            new ReactNativeHost(this) {
                @Override
@@ -44,11 +50,8 @@ public class MainApplication extends MultiDexApplication implements ReactApplica

                @Override
                protected List<ReactPackage> getPackages() {
-
                    List<ReactPackage> packages = new PackageList(this).getPackages();
-                    //packages.add(new KeychainPackage(new KeychainModuleBuilder().withoutWarmUp()));
-
-                    packages.add(new TurboReactPackage() {
+                      packages.add(new TurboReactPackage() {
                        @Override
                        public NativeModule getModule(String name, ReactApplicationContext reactContext) {

@@ -94,7 +97,6 @@ public class MainApplication extends MultiDexApplication implements ReactApplica

                        }
                    });
-
                    return packages;
                }

@@ -102,6 +104,10 @@ public class MainApplication extends MultiDexApplication implements ReactApplica
                protected String getJSMainModuleName() {
                    return "index";
                }
+
+                 @Override protected JSIModulePackage getJSIModulePackage() {        
+                     return new ReanimatedJSIModulePackage(); // <- add      
+                }
            };

    public ReactModuleInfo getModuleInfo(String reactClass, String className) {
@@ -112,12 +118,18 @@ public class MainApplication extends MultiDexApplication implements ReactApplica

    @Override
    public ReactNativeHost getReactNativeHost() {
-        return mReactNativeHost;
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      return mNewArchitectureNativeHost;
+    } else {
+      return mReactNativeHost;
+    }
    }

    @Override
    public void onCreate() {
        super.onCreate();
+         // If you opted-in for the New Architecture, we enable the TurboModule system
+        ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
        SoLoader.init(this, /* native exopackage */ false);
        initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    }
--- a/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/MainApplicationReactNativeHost.java
+++ b/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/MainApplicationReactNativeHost.java
@@ -0,0 +1,116 @@
+package com.streetwriters.notesnook.newarchitecture;
+
+import android.app.Application;
+import androidx.annotation.NonNull;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.facebook.react.bridge.JSIModuleProvider;
+import com.facebook.react.bridge.JSIModuleSpec;
+import com.facebook.react.bridge.JSIModuleType;
+import com.facebook.react.bridge.JavaScriptContextHolder;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.UIManager;
+import com.facebook.react.fabric.ComponentFactory;
+import com.facebook.react.fabric.CoreComponentsRegistry;
+import com.facebook.react.fabric.EmptyReactNativeConfig;
+import com.facebook.react.fabric.FabricJSIModuleProvider;
+import com.facebook.react.uimanager.ViewManagerRegistry;
+import com.streetwriters.notesnook.BuildConfig;
+import com.streetwriters.notesnook.newarchitecture.components.MainComponentsRegistry;
+import com.streetwriters.notesnook.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
+ * TurboModule delegates and the Fabric Renderer.
+ *
+ * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+public class MainApplicationReactNativeHost extends ReactNativeHost {
+  public MainApplicationReactNativeHost(Application application) {
+    super(application);
+  }
+
+  @Override
+  public boolean getUseDeveloperSupport() {
+    return BuildConfig.DEBUG;
+  }
+
+  @Override
+  protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    //     packages.add(new MyReactNativePackage());
+    // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
+    //     packages.add(new TurboReactPackage() { ... });
+    // If you have custom Fabric Components, their ViewManagers should also be loaded here
+    // inside a ReactPackage.
+    return packages;
+  }
+
+  @Override
+  protected String getJSMainModuleName() {
+    return "index";
+  }
+
+  @NonNull
+  @Override
+  protected ReactPackageTurboModuleManagerDelegate.Builder
+      getReactPackageTurboModuleManagerDelegateBuilder() {
+    // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
+    // for the new architecture and to use TurboModules correctly.
+    return new MainApplicationTurboModuleManagerDelegate.Builder();
+  }
+
+  @Override
+  protected JSIModulePackage getJSIModulePackage() {
+    return new JSIModulePackage() {
+      @Override
+      public List<JSIModuleSpec> getJSIModules(
+          final ReactApplicationContext reactApplicationContext,
+          final JavaScriptContextHolder jsContext) {
+        final List<JSIModuleSpec> specs = new ArrayList<>();
+
+        // Here we provide a new JSIModuleSpec that will be responsible of providing the
+        // custom Fabric Components.
+        specs.add(
+            new JSIModuleSpec() {
+              @Override
+              public JSIModuleType getJSIModuleType() {
+                return JSIModuleType.UIManager;
+              }
+
+              @Override
+              public JSIModuleProvider<UIManager> getJSIModuleProvider() {
+                final ComponentFactory componentFactory = new ComponentFactory();
+                CoreComponentsRegistry.register(componentFactory);
+
+                // Here we register a Components Registry.
+                // The one that is generated with the template contains no components
+                // and just provides you the one from React Native core.
+                MainComponentsRegistry.register(componentFactory);
+
+                final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
+
+                ViewManagerRegistry viewManagerRegistry =
+                    new ViewManagerRegistry(
+                        reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
+
+                return new FabricJSIModuleProvider(
+                    reactApplicationContext,
+                    componentFactory,
+                    new EmptyReactNativeConfig(),
+                    viewManagerRegistry);
+              }
+            });
+        return specs;
+      }
+    };
+  }
+}
--- a/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/components/MainComponentsRegistry.java
+++ b/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/components/MainComponentsRegistry.java
@@ -0,0 +1,36 @@
+package com.streetwriters.notesnook.newarchitecture.components;
+
+import com.facebook.jni.HybridData;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.fabric.ComponentFactory;
+import com.facebook.soloader.SoLoader;
+
+/**
+ * Class responsible to load the custom Fabric Components. This class has native methods and needs a
+ * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
+ * folder for you).
+ *
+ * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+@DoNotStrip
+public class MainComponentsRegistry {
+  static {
+    SoLoader.loadLibrary("fabricjni");
+  }
+
+  @DoNotStrip private final HybridData mHybridData;
+
+  @DoNotStrip
+  private native HybridData initHybrid(ComponentFactory componentFactory);
+
+  @DoNotStrip
+  private MainComponentsRegistry(ComponentFactory componentFactory) {
+    mHybridData = initHybrid(componentFactory);
+  }
+
+  @DoNotStrip
+  public static MainComponentsRegistry register(ComponentFactory componentFactory) {
+    return new MainComponentsRegistry(componentFactory);
+  }
+}
--- a/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
+++ b/apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
@@ -0,0 +1,48 @@
+package com.streetwriters.notesnook.newarchitecture.modules;
+
+import com.facebook.jni.HybridData;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.soloader.SoLoader;
+import java.util.List;
+
+/**
+ * Class responsible to load the TurboModules. This class has native methods and needs a
+ * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
+ * folder for you).
+ *
+ * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+public class MainApplicationTurboModuleManagerDelegate
+    extends ReactPackageTurboModuleManagerDelegate {
+
+  private static volatile boolean sIsSoLibraryLoaded;
+
+  protected MainApplicationTurboModuleManagerDelegate(
+      ReactApplicationContext reactApplicationContext, List<ReactPackage> packages) {
+    super(reactApplicationContext, packages);
+  }
+
+  protected native HybridData initHybrid();
+
+  native boolean canCreateTurboModule(String moduleName);
+
+  public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
+    protected MainApplicationTurboModuleManagerDelegate build(
+        ReactApplicationContext context, List<ReactPackage> packages) {
+      return new MainApplicationTurboModuleManagerDelegate(context, packages);
+    }
+  }
+
+  @Override
+  protected synchronized void maybeLoadOtherSoLibraries() {
+    if (!sIsSoLibraryLoaded) {
+      // If you change the name of your application .so file in the Android.mk file,
+      // make sure you update the name here as well.
+      SoLoader.loadLibrary("rndiffapp_appmodules");
+      sIsSoLibraryLoaded = true;
+    }
+  }
+}
--- a/apps/mobile/android/app/src/main/jni/Android.mk
+++ b/apps/mobile/android/app/src/main/jni/Android.mk
@@ -0,0 +1,49 @@
+THIS_DIR := $(call my-dir)
+
+include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
+
+# If you wish to add a custom TurboModule or Fabric component in your app you
+# will have to include the following autogenerated makefile.
+# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
+include $(CLEAR_VARS)
+
+LOCAL_PATH := $(THIS_DIR)
+
+# You can customize the name of your application .so file here.
+LOCAL_MODULE := rndiffapp_appmodules
+
+LOCAL_C_INCLUDES := $(LOCAL_PATH)
+LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
+LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
+
+# If you wish to add a custom TurboModule or Fabric component in your app you
+# will have to uncomment those lines to include the generated source 
+# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
+#
+# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
+# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
+# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
+
+# Here you should add any native library you wish to depend on.
+LOCAL_SHARED_LIBRARIES := \
+  libfabricjni \
+  libfbjni \
+  libfolly_futures \
+  libfolly_json \
+  libglog \
+  libjsi \
+  libreact_codegen_rncore \
+  libreact_debug \
+  libreact_nativemodule_core \
+  libreact_render_componentregistry \
+  libreact_render_core \
+  libreact_render_debug \
+  libreact_render_graphics \
+  librrc_view \
+  libruntimeexecutor \
+  libturbomodulejsijni \
+  libyoga
+
+LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
+
+include $(BUILD_SHARED_LIBRARY)
--- a/apps/mobile/android/app/src/main/jni/MainApplicationModuleProvider.cpp
+++ b/apps/mobile/android/app/src/main/jni/MainApplicationModuleProvider.cpp
@@ -0,0 +1,24 @@
+#include "MainApplicationModuleProvider.h"
+
+#include <rncore.h>
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr<TurboModule> MainApplicationModuleProvider(
+    const std::string moduleName,
+    const JavaTurboModule::InitParams &params) {
+  // Here you can provide your own module provider for TurboModules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a library called `samplelibrary`:
+  //
+  // auto module = samplelibrary_ModuleProvider(moduleName, params);
+  // if (module != nullptr) {
+  //    return module;
+  // }
+  // return rncore_ModuleProvider(moduleName, params);
+  return rncore_ModuleProvider(moduleName, params);
+}
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/MainApplicationModuleProvider.h
+++ b/apps/mobile/android/app/src/main/jni/MainApplicationModuleProvider.h
@@ -0,0 +1,16 @@
+#pragma once
+
+#include <memory>
+#include <string>
+
+#include <ReactCommon/JavaTurboModule.h>
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr<TurboModule> MainApplicationModuleProvider(
+    const std::string moduleName,
+    const JavaTurboModule::InitParams &params);
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
+++ b/apps/mobile/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
@@ -0,0 +1,45 @@
+#include "MainApplicationTurboModuleManagerDelegate.h"
+#include "MainApplicationModuleProvider.h"
+
+namespace facebook {
+namespace react {
+
+jni::local_ref<MainApplicationTurboModuleManagerDelegate::jhybriddata>
+MainApplicationTurboModuleManagerDelegate::initHybrid(
+    jni::alias_ref<jhybridobject>) {
+  return makeCxxInstance();
+}
+
+void MainApplicationTurboModuleManagerDelegate::registerNatives() {
+  registerHybrid({
+      makeNativeMethod(
+          "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
+      makeNativeMethod(
+          "canCreateTurboModule",
+          MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
+  });
+}
+
+std::shared_ptr<TurboModule>
+MainApplicationTurboModuleManagerDelegate::getTurboModule(
+    const std::string name,
+    const std::shared_ptr<CallInvoker> jsInvoker) {
+  // Not implemented yet: provide pure-C++ NativeModules here.
+  return nullptr;
+}
+
+std::shared_ptr<TurboModule>
+MainApplicationTurboModuleManagerDelegate::getTurboModule(
+    const std::string name,
+    const JavaTurboModule::InitParams &params) {
+  return MainApplicationModuleProvider(name, params);
+}
+
+bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
+    std::string name) {
+  return getTurboModule(name, nullptr) != nullptr ||
+      getTurboModule(name, {.moduleName = name}) != nullptr;
+}
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
+++ b/apps/mobile/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
@@ -0,0 +1,38 @@
+#include <memory>
+#include <string>
+
+#include <ReactCommon/TurboModuleManagerDelegate.h>
+#include <fbjni/fbjni.h>
+
+namespace facebook {
+namespace react {
+
+class MainApplicationTurboModuleManagerDelegate
+    : public jni::HybridClass<
+          MainApplicationTurboModuleManagerDelegate,
+          TurboModuleManagerDelegate> {
+ public:
+  // Adapt it to the package you used for your Java class.
+  static constexpr auto kJavaDescriptor =
+      "Lcom/rndiffapp/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
+
+  static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
+
+  static void registerNatives();
+
+  std::shared_ptr<TurboModule> getTurboModule(
+      const std::string name,
+      const std::shared_ptr<CallInvoker> jsInvoker) override;
+  std::shared_ptr<TurboModule> getTurboModule(
+      const std::string name,
+      const JavaTurboModule::InitParams &params) override;
+
+  /**
+   * Test-only method. Allows user to verify whether a TurboModule can be
+   * created by instances of this class.
+   */
+  bool canCreateTurboModule(std::string name);
+};
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/MainComponentsRegistry.cpp
+++ b/apps/mobile/android/app/src/main/jni/MainComponentsRegistry.cpp
@@ -0,0 +1,61 @@
+#include "MainComponentsRegistry.h"
+
+#include <CoreComponentsRegistry.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/components/rncore/ComponentDescriptors.h>
+
+namespace facebook {
+namespace react {
+
+MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
+
+std::shared_ptr<ComponentDescriptorProviderRegistry const>
+MainComponentsRegistry::sharedProviderRegistry() {
+  auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+  // Custom Fabric Components go here. You can register custom
+  // components coming from your App or from 3rd party libraries here.
+  //
+  // providerRegistry->add(concreteComponentDescriptorProvider<
+  //        AocViewerComponentDescriptor>());
+  return providerRegistry;
+}
+
+jni::local_ref<MainComponentsRegistry::jhybriddata>
+MainComponentsRegistry::initHybrid(
+    jni::alias_ref<jclass>,
+    ComponentFactory *delegate) {
+  auto instance = makeCxxInstance(delegate);
+
+  auto buildRegistryFunction =
+      [](EventDispatcher::Weak const &eventDispatcher,
+         ContextContainer::Shared const &contextContainer)
+      -> ComponentDescriptorRegistry::Shared {
+    auto registry = MainComponentsRegistry::sharedProviderRegistry()
+                        ->createComponentDescriptorRegistry(
+                            {eventDispatcher, contextContainer});
+
+    auto mutableRegistry =
+        std::const_pointer_cast<ComponentDescriptorRegistry>(registry);
+
+    mutableRegistry->setFallbackComponentDescriptor(
+        std::make_shared<UnimplementedNativeViewComponentDescriptor>(
+            ComponentDescriptorParameters{
+                eventDispatcher, contextContainer, nullptr}));
+
+    return registry;
+  };
+
+  delegate->buildRegistryFunction = buildRegistryFunction;
+  return instance;
+}
+
+void MainComponentsRegistry::registerNatives() {
+  registerHybrid({
+      makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
+  });
+}
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/MainComponentsRegistry.h
+++ b/apps/mobile/android/app/src/main/jni/MainComponentsRegistry.h
@@ -0,0 +1,32 @@
+#pragma once
+
+#include <ComponentFactory.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
+
+namespace facebook {
+namespace react {
+
+class MainComponentsRegistry
+    : public facebook::jni::HybridClass<MainComponentsRegistry> {
+ public:
+  // Adapt it to the package you used for your Java class.
+  constexpr static auto kJavaDescriptor =
+      "Lcom/rndiffapp/newarchitecture/components/MainComponentsRegistry;";
+
+  static void registerNatives();
+
+  MainComponentsRegistry(ComponentFactory *delegate);
+
+ private:
+  static std::shared_ptr<ComponentDescriptorProviderRegistry const>
+  sharedProviderRegistry();
+
+  static jni::local_ref<jhybriddata> initHybrid(
+      jni::alias_ref<jclass>,
+      ComponentFactory *delegate);
+};
+
+} // namespace react
+} // namespace facebook
--- a/apps/mobile/android/app/src/main/jni/OnLoad.cpp
+++ b/apps/mobile/android/app/src/main/jni/OnLoad.cpp
@@ -0,0 +1,11 @@
+#include <fbjni/fbjni.h>
+#include "MainApplicationTurboModuleManagerDelegate.h"
+#include "MainComponentsRegistry.h"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
+  return facebook::jni::initialize(vm, [] {
+    facebook::react::MainApplicationTurboModuleManagerDelegate::
+        registerNatives();
+    facebook::react::MainComponentsRegistry::registerNatives();
+  });
+}
--- a/apps/mobile/android/gradle.properties
+++ b/apps/mobile/android/gradle.properties
@@ -12,6 +12,8 @@
 # Default value: -Xmx10248m -XX:MaxPermSize=256m
 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

+
+
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
@@ -25,4 +27,15 @@ android.useAndroidX=true
 android.enableJetifier=true

 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.99.0
+FLIPPER_VERSION=0.125.0
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=false
--- a/apps/mobile/android/gradlew
+++ b/apps/mobile/android/gradlew
@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/bin/sh

 #
-# Copyright 2015 the original author or authors.
+# Copyright © 2015-2021 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,67 +17,101 @@
 #

 ##############################################################################
-##
-##  Gradle start up script for UN*X
-##
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
 ##############################################################################

 # Attempt to set APP_HOME
+
 # Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
 done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit

 APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
+APP_BASE_NAME=${0##*/}

 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'

 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
+MAX_FD=maximum

 warn () {
    echo "$*"
-}
+} >&2

 die () {
    echo
    echo "$*"
    echo
    exit 1
-}
+} >&2

 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
 esac

 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
@@ -87,9 +121,9 @@ CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 if [ -n "$JAVA_HOME" ] ; then
    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
+        JAVACMD=$JAVA_HOME/jre/sh/java
    else
-        JAVACMD="$JAVA_HOME/bin/java"
+        JAVACMD=$JAVA_HOME/bin/java
    fi
    if [ ! -x "$JAVACMD" ] ; then
        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -98,7 +132,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
    fi
 else
-    JAVACMD="java"
+    JAVACMD=java
    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.

 Please set the JAVA_HOME variable in your environment to match the
@@ -106,80 +140,95 @@ location of your Java installation."
 fi

 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
    esac
 fi

-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.

-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'

 exec "$JAVACMD" "$@"
--- a/apps/mobile/android/releasenotes/whatsnew-en-US
+++ b/apps/mobile/android/releasenotes/whatsnew-en-US
@@ -1,10 +1,4 @@
- Sync over web-sockets
- Optionally disable section headers in lists
- Formatting support for notification notes
- Fix bold text in editor
- Fix session-expired dialog does not hide after login
- Fix login issues when 2FA enabled
- Fix a race condition causing note to be empty in editor
- Fix pin to notifications not working
+- Improvements to sync performance
+- Added sort by title option in sort menu

 Thank you for using Notesnook!
--- a/apps/mobile/android/settings.gradle
+++ b/apps/mobile/android/settings.gradle
@@ -1,3 +1,10 @@
 rootProject.name = 'Notesnook'
+include ':detox'
+project(':detox').projectDir = new File(rootProject.projectDir, '../node_modules/detox/android/detox')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+includeBuild('../node_modules/react-native-gradle-plugin')
+if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
+    include(":ReactAndroid")
+    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+}
--- a/apps/mobile/babel.config.js
+++ b/apps/mobile/babel.config.js
@@ -3,15 +3,25 @@ const configs = {
  env: {
    development: {
      presets: ['module:metro-react-native-babel-preset'],
-      plugins: ['@babel/plugin-transform-named-capturing-groups-regex']
+      plugins: [
+        '@babel/plugin-transform-named-capturing-groups-regex',
+        'react-native-reanimated/plugin'
+      ]
    },
    test: {
      presets: ['module:metro-react-native-babel-preset'],
-      plugins: ['@babel/plugin-transform-named-capturing-groups-regex']
+      plugins: [
+        '@babel/plugin-transform-named-capturing-groups-regex',
+        'react-native-reanimated/plugin'
+      ]
    },
    production: {
      presets: ['module:metro-react-native-babel-preset'],
-      plugins: ['transform-remove-console', '@babel/plugin-transform-named-capturing-groups-regex']
+      plugins: [
+        'transform-remove-console',
+        '@babel/plugin-transform-named-capturing-groups-regex',
+        'react-native-reanimated/plugin'
+      ]
    }
  }
 };
--- a/apps/mobile/e2e/tests/index.e2e.js
+++ b/apps/mobile/e2e/tests/index.e2e.js
@@ -3,11 +3,11 @@ const { navigate, tapByText, prepare } = require('./utils');
 const { sleep } = require('./utils');

 describe('APP LAUNCH AND NAVIGATION', () => {
-  it('App should launch successfully & hide welcome screen', async done => {
+  it('App should launch successfully & hide welcome screen', async () => {
    await prepare();
  });

-  it('Basic navigation should work', async done => {
+  it('Basic navigation should work', async () => {
    await prepare();
    await navigate('Notebooks');
    await tapByText('Skip introduction');
--- a/apps/mobile/e2e/tests/utils.js
+++ b/apps/mobile/e2e/tests/utils.js
@@ -12,6 +12,7 @@ export const sleep = duration =>
 export async function LaunchApp() {
  await expect(element(by.id(notesnook.ids.default.root))).toBeVisible();
  await expect(element(by.id('notesnook.splashscreen'))).toBeVisible();
+  await sleep(500);
  await element(by.text('Get started')).tap();
  await sleep(500);
  await element(by.text('Next')).tap();
@@ -82,7 +83,7 @@ export async function navigate(screen) {
  await sleep(500);
  let menu = elementById(notesnook.ids.default.header.buttons.left);
  await menu.tap();
-  await sleep(100);
+  await sleep(500);
  await elementByText(screen).tap();
 }

--- a/apps/mobile/features.ts
+++ b/apps/mobile/features.ts
@@ -1,12 +1,3 @@
 import { FeatureType } from './src/components/sheets/new-feature';

-export const features: FeatureType[] = [
-  {
-    title: 'Sync over web-sockets',
-    body: 'We have moved from SSE to web-sockets! Enjoy instant, fast and reliable sync with progress.'
-  },
-  {
-    title: 'Disable section headers',
-    body: 'Now you can disable section headers in lists by changing grouping to "none"'
-  }
-];
+export const features: FeatureType[] = [];
--- a/apps/mobile/index.js
+++ b/apps/mobile/index.js
@@ -1,12 +1,16 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import { AppRegistry, LogBox, Platform, UIManager } from 'react-native';
 import Config from 'react-native-config';
 import 'react-native-gesture-handler';
+import { enableLayoutAnimations } from 'react-native-reanimated/lib/reanimated2/core';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import { name as appName } from './app.json';
 import Notifications from './src/services/notifications';
+
 global.Buffer = require('buffer').Buffer;
+enableLayoutAnimations(true);

 if (Config.isTesting) {
  Date.prototype.toLocaleString = () => 'XX-XX-XX';
--- a/Note/ShareViewController.m
+++ b/Note/ShareViewController.m
@@ -13,9 +13,8 @@ RCT_EXPORT_MODULE();

 - (UIView*) shareView {
  NSURL *jsCodeLocation;
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-  
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"NotesnookShare"
                                               initialProperties:nil
--- a/apps/mobile/ios/Notesnook.xcodeproj/project.pbxproj
+++ b/apps/mobile/ios/Notesnook.xcodeproj/project.pbxproj
@@ -8,11 +8,9 @@

 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* NotesnookTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* NotesnookTests.m */; };
-		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		2B3F87EC6B2264CD8ABA5DA8 /* libPods-Notesnook.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4BD34AE0C0FD2416E48803B8 /* libPods-Notesnook.a */; };
-		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		2DCD954D1E0B4F2C00145EB5 /* NotesnookTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* NotesnookTests.m */; };
@@ -24,6 +22,7 @@
 		65139FA72716A2CA00D87727 /* Web.bundle in Resources */ = {isa = PBXBuildFile; fileRef = 65139FA52716A2CA00D87727 /* Web.bundle */; };
 		6515C42F2580AA3000E83E39 /* StoreKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 6515C42E2580AA2F00E83E39 /* StoreKit.framework */; };
 		6529A13E279BC4C70048D4A8 /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6529A13D279BC4C70048D4A8 /* BootSplash.storyboard */; };
+		6593E4A3281C345400492C50 /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 6593E4A2281C345400492C50 /* AppDelegate.mm */; };
 		659BE46725E11A5100E05671 /* notesnook-text.png in Resources */ = {isa = PBXBuildFile; fileRef = 659BE46625E11A5100E05671 /* notesnook-text.png */; };
 		65AA857925E6DDEC00772A01 /* WidgetKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 65AA857825E6DDEC00772A01 /* WidgetKit.framework */; };
 		65AA857B25E6DDEC00772A01 /* SwiftUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 65AA857A25E6DDEC00772A01 /* SwiftUI.framework */; };
@@ -96,7 +95,6 @@
 		06E586B7CB8F9DC9917B1695 /* Pods-Notesnook-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notesnook-tvOS.release.xcconfig"; path = "Target Support Files/Pods-Notesnook-tvOS/Pods-Notesnook-tvOS.release.xcconfig"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* Notesnook.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Notesnook.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = Notesnook/AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Notesnook/AppDelegate.m; sourceTree = "<group>"; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Notesnook/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Notesnook/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Notesnook/main.m; sourceTree = "<group>"; };
@@ -115,6 +113,7 @@
 		6529D2B0257B4A2900B49BC3 /* NotesnookDebug.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = NotesnookDebug.entitlements; path = Notesnook/NotesnookDebug.entitlements; sourceTree = "<group>"; };
 		6552012E27019F6E00A43C51 /* OpenSans-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-SemiBold.ttf"; path = "../android/app/src/main/assets/fonts/OpenSans-SemiBold.ttf"; sourceTree = "<group>"; };
 		6552012F27019F7700A43C51 /* OpenSans-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-Regular.ttf"; path = "../android/app/src/main/assets/fonts/OpenSans-Regular.ttf"; sourceTree = "<group>"; };
+		6593E4A2281C345400492C50 /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = Notesnook/AppDelegate.mm; sourceTree = "<group>"; };
 		659BE46625E11A5100E05671 /* notesnook-text.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "notesnook-text.png"; path = "Notesnook/Images.xcassets/notesnook-text.png"; sourceTree = "<group>"; };
 		65A7F34F255689AD00699170 /* Notesnook.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = Notesnook.entitlements; path = Notesnook/Notesnook.entitlements; sourceTree = "<group>"; };
 		65AA857725E6DDEC00772A01 /* NotesWidgetExtension.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = NotesWidgetExtension.appex; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -222,6 +221,7 @@
 		13B07FAE1A68108700A75B9A /* Notesnook */ = {
 			isa = PBXGroup;
 			children = (
+				6593E4A2281C345400492C50 /* AppDelegate.mm */,
 				6529A13D279BC4C70048D4A8 /* BootSplash.storyboard */,
 				65139FA52716A2CA00D87727 /* Web.bundle */,
 				659BE46625E11A5100E05671 /* notesnook-text.png */,
@@ -229,7 +229,6 @@
 				65A7F34F255689AD00699170 /* Notesnook.entitlements */,
 				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
-				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB71A68108700A75B9A /* main.m */,
@@ -353,7 +352,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				819D480147D052141ACC55A9 /* [CP] Copy Pods Resources */,
-				7BCAD189C704F43FAEC90BBD /* [CP] Embed Pods Frameworks */,
+				EC2C22E2055EE6694741C652 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -377,7 +376,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				240525450DF9ABA0F332B52E /* [CP] Copy Pods Resources */,
 				65A7F34B255687E600699170 /* Embed App Extensions */,
-				3076721A343FFD631FFA5F12 /* [CP] Embed Pods Frameworks */,
+				C6C6B58233CCB92B541F08BC /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -703,24 +702,6 @@
 			shellPath = /bin/sh;
 			shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nexport NODE_BINARY=node\n../node_modules/@sentry/cli/bin/sentry-cli react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		3076721A343FFD631FFA5F12 /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Notesnook/Pods-Notesnook-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Notesnook/Pods-Notesnook-frameworks.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		52B9E42E0FD77D180139A8C7 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -783,24 +764,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		7BCAD189C704F43FAEC90BBD /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Notesnook-NotesnookTests/Pods-Notesnook-NotesnookTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Notesnook-NotesnookTests/Pods-Notesnook-NotesnookTests-frameworks.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		819D480147D052141ACC55A9 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -873,6 +836,24 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		C6C6B58233CCB92B541F08BC /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Notesnook/Pods-Notesnook-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Notesnook/Pods-Notesnook-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		E81EC4451F76606456BCA61F /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -923,6 +904,24 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Notesnook-Make Note/Pods-Notesnook-Make Note-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		EC2C22E2055EE6694741C652 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Notesnook-NotesnookTests/Pods-Notesnook-NotesnookTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Notesnook-NotesnookTests/Pods-Notesnook-NotesnookTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -976,8 +975,8 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				65E0340B257B9FF100793428 /* File.swift in Sources */,
+				6593E4A3281C345400492C50 /* AppDelegate.mm in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -987,7 +986,6 @@
 			buildActionMask = 2147483647;
 			files = (
 				2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
-				2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1118,7 +1116,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				ENABLE_BITCODE = NO;
 				GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
@@ -1191,7 +1189,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1219,7 +1217,7 @@
 				CODE_SIGN_ENTITLEMENTS = Notesnook/Notesnook.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
 				HEADER_SEARCH_PATHS = (
@@ -1291,7 +1289,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1449,7 +1447,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -1460,7 +1458,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
@@ -1490,7 +1488,7 @@
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -1501,7 +1499,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1530,7 +1528,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -1603,7 +1601,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
@@ -1633,7 +1631,7 @@
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 1807;
+				CURRENT_PROJECT_VERSION = 1809;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -1706,7 +1704,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.8.7;
+				MARKETING_VERSION = 1.8.9;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";
--- a/apps/mobile/ios/Notesnook/AppDelegate.mm
+++ b/apps/mobile/ios/Notesnook/AppDelegate.mm
@@ -3,9 +3,29 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
-#import "RNBootSplash.h"
+#import <RNBootSplash/RNBootSplash.h>
+#import <React/RCTAppSetupUtils.h>
 #import <React/RCTLinkingManager.h>
-#import <MMKV.h>
+
+#if RCT_NEW_ARCH_ENABLED
+#import <React/CoreModulesPlugins.h>
+#import <React/RCTCxxBridgeDelegate.h>
+#import <React/RCTFabricSurfaceHostingProxyRootView.h>
+#import <React/RCTSurfacePresenter.h>
+#import <React/RCTSurfacePresenterBridgeAdapter.h>
+#import <ReactCommon/RCTTurboModuleManager.h>
+
+#import <react/config/ReactNativeConfig.h>
+
+@interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
+  RCTTurboModuleManager *_turboModuleManager;
+  RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
+  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
+  facebook::react::ContextContainer::Shared _contextContainer;
+}
+@end
+#endif
+
@implementation AppDelegate

 UINavigationController *navController;
@@ -15,11 +35,19 @@ RCTBridge *bridge;

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  
+  RCTAppSetupPrepareApp(application);
  shareViewController = [UIViewController new];
+  bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  
+#if RCT_NEW_ARCH_ENABLED
+  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
+  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
+  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
+  _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
+  bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
+#endif
  
  NSURL *url = (NSURL *) [launchOptions objectForKey:UIApplicationLaunchOptionsURLKey];
-  
  if (url != nil) {
    navController = [[UINavigationController alloc] initWithRootViewController:shareViewController];
  } else {
@@ -30,61 +58,44 @@ RCTBridge *bridge;
  
  navController.navigationBarHidden = YES;
  
-  bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-  
-  
  if (url != nil) {
    RCTRootView *shareView = [[RCTRootView alloc] initWithBridge:bridge
                                                      moduleName:@"QuickNoteIOS"
                                               initialProperties:nil];
-    shareView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+    if (@available(iOS 13.0, *)) {
+      shareView.backgroundColor = [UIColor systemBackgroundColor];
+    } else {
+      shareView.backgroundColor = [UIColor whiteColor];
+    }
    shareViewController.view = shareView;
    [RNBootSplash initWithStoryboard:@"BootSplash" rootView:shareView];
  } else {
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:@"Notesnook"                                      initialProperties:nil];
-    
-    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+    if (@available(iOS 13.0, *)) {
+      rootView.backgroundColor = [UIColor systemBackgroundColor];
+    } else {
+      rootView.backgroundColor = [UIColor whiteColor];
+    }
    rootViewController.view = rootView;
    [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
  }
  
-  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  
-  
  self.window.rootViewController = navController;
  [self.window makeKeyAndVisible];
-  
-  
  return YES;
 }

- (void)applicationWillTerminate:(UIApplication *)application {
-  
-  MMKV *kv = [MMKV mmkvWithID:@"default" mode:MMKVMultiProcess];
-  [kv removeValueForKey:@"appState"];
-}
-
-
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif
 }

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-
-
 - (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
@@ -114,7 +125,7 @@ RCTBridge *bridge;
      [app performSelector:@selector(suspend)];
      [NSThread sleepForTimeInterval:0.5];
      [navController popToRootViewControllerAnimated:false];
-    
+      
    }
    
    
@@ -123,4 +134,43 @@ RCTBridge *bridge;
  return [RCTLinkingManager application:application openURL:url options:options];
 }

+#if RCT_NEW_ARCH_ENABLED
+
+#pragma mark - RCTCxxBridgeDelegate
+
+- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
+{
+  _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
+                                                             delegate:self
+                                                            jsInvoker:bridge.jsCallInvoker];
+  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
+}
+
+#pragma mark RCTTurboModuleManagerDelegate
+
+- (Class)getModuleClassFromName:(const char *)name
+{
+  return RCTCoreModulesClassProvider(name);
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
+{
+  return nullptr;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+initParams:
+(const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return nullptr;
+}
+
+- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
+{
+  return RCTAppSetupDefaultModuleFromClass(moduleClass);
+}
+
+#endif
+
@end
--- a/apps/mobile/ios/Notesnook/main.m
+++ b/apps/mobile/ios/Notesnook/main.m
@@ -2,7 +2,8 @@

 #import "AppDelegate.h"

-int main(int argc, char * argv[]) {
+int main(int argc, char *argv[])
+{
  @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  }
--- a/apps/mobile/ios/NotesnookTests/NotesnookTests.m
+++ b/apps/mobile/ios/NotesnookTests/NotesnookTests.m
@@ -7,13 +7,13 @@
 #define TIMEOUT_SECONDS 600
 #define TEXT_TO_LOOK_FOR @"Welcome to React"

-@interface NotesnookTests : XCTestCase
+@interface RnDiffAppTests : XCTestCase

@end

-@implementation NotesnookTests
+@implementation RnDiffAppTests

- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
 {
  if (test(view)) {
    return YES;
@@ -34,23 +34,25 @@

  __block NSString *redboxError = nil;
 #ifdef DEBUG
-  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
-    if (level >= RCTLogLevelError) {
-      redboxError = message;
-    }
-  });
+  RCTSetLogFunction(
+      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+        if (level >= RCTLogLevelError) {
+          redboxError = message;
+        }
+      });
 #endif

  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];

-    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
-      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
-        return YES;
-      }
-      return NO;
-    }];
+    foundElement = [self findSubviewInView:vc.view
+                                  matching:^BOOL(UIView *view) {
+                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+                                      return YES;
+                                    }
+                                    return NO;
+                                  }];
  }

 #ifdef DEBUG
@@ -61,5 +63,4 @@
  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
 }

-
-@end
+@end
--- a/apps/mobile/ios/Podfile
+++ b/apps/mobile/ios/Podfile
@@ -2,18 +2,25 @@ require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

 platform :ios, '11.0'
+install! 'cocoapods', :deterministic_uuids => false

 pod 'Base64'
 pod 'SexyTooltip',:git => 'https://github.com/ammarahm-ed/SexyTooltip.git'
 pod 'MMKV'

 target 'Notesnook' do
+    
+  # Flags change depending on the env values.
+  flags = get_default_flags()
  config = use_native_modules!
  
  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => true
+    :hermes_enabled => true,
+    :fabric_enabled => flags[:fabric_enabled],
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  # for share extension
--- a/apps/mobile/ios/Podfile.lock
+++ b/apps/mobile/ios/Podfile.lock
@@ -2,21 +2,21 @@ PODS:
  - Base64 (1.1.2)
  - boost (1.76.0)
  - DoubleConversion (1.1.6)
-  - FBLazyVector (0.67.1)
-  - FBReactNativeSpec (0.67.1):
+  - FBLazyVector (0.68.1)
+  - FBReactNativeSpec (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.67.1)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
+    - RCTRequired (= 0.68.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Core (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
  - fmt (6.2.1)
  - glog (0.3.5)
-  - hermes-engine (0.9.0)
+  - hermes-engine (0.11.0)
  - libevent (2.1.12)
-  - MMKV (1.2.7):
-    - MMKVCore (~> 1.2.7)
-  - MMKVCore (1.2.10)
+  - MMKV (1.2.10):
+    - MMKVCore (~> 1.2.10)
+  - MMKVCore (1.2.13)
  - pop (1.0.12)
  - RCT-Folly (2021.06.28.00-v2):
    - boost
@@ -35,205 +35,214 @@ PODS:
    - fmt (~> 6.2.1)
    - glog
    - libevent
-  - RCTRequired (0.67.1)
-  - RCTTypeSafety (0.67.1):
-    - FBLazyVector (= 0.67.1)
+  - RCTRequired (0.68.1)
+  - RCTTypeSafety (0.68.1):
+    - FBLazyVector (= 0.68.1)
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.67.1)
-    - React-Core (= 0.67.1)
-  - React (0.67.1):
-    - React-Core (= 0.67.1)
-    - React-Core/DevSupport (= 0.67.1)
-    - React-Core/RCTWebSocket (= 0.67.1)
-    - React-RCTActionSheet (= 0.67.1)
-    - React-RCTAnimation (= 0.67.1)
-    - React-RCTBlob (= 0.67.1)
-    - React-RCTImage (= 0.67.1)
-    - React-RCTLinking (= 0.67.1)
-    - React-RCTNetwork (= 0.67.1)
-    - React-RCTSettings (= 0.67.1)
-    - React-RCTText (= 0.67.1)
-    - React-RCTVibration (= 0.67.1)
-  - React-callinvoker (0.67.1)
-  - React-Core (0.67.1):
+    - RCTRequired (= 0.68.1)
+    - React-Core (= 0.68.1)
+  - React (0.68.1):
+    - React-Core (= 0.68.1)
+    - React-Core/DevSupport (= 0.68.1)
+    - React-Core/RCTWebSocket (= 0.68.1)
+    - React-RCTActionSheet (= 0.68.1)
+    - React-RCTAnimation (= 0.68.1)
+    - React-RCTBlob (= 0.68.1)
+    - React-RCTImage (= 0.68.1)
+    - React-RCTLinking (= 0.68.1)
+    - React-RCTNetwork (= 0.68.1)
+    - React-RCTSettings (= 0.68.1)
+    - React-RCTText (= 0.68.1)
+    - React-RCTVibration (= 0.68.1)
+  - React-callinvoker (0.68.1)
+  - React-Codegen (0.68.1):
+    - FBReactNativeSpec (= 0.68.1)
+    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCTRequired (= 0.68.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Core (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-Core (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.67.1)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-Core/Default (= 0.68.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/CoreModulesHeaders (0.67.1):
+  - React-Core/CoreModulesHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/Default (0.67.1):
+  - React-Core/Default (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/DevSupport (0.67.1):
+  - React-Core/DevSupport (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.67.1)
-    - React-Core/RCTWebSocket (= 0.67.1)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-jsinspector (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-Core/Default (= 0.68.1)
+    - React-Core/RCTWebSocket (= 0.68.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-jsinspector (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTActionSheetHeaders (0.67.1):
+  - React-Core/RCTActionSheetHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTAnimationHeaders (0.67.1):
+  - React-Core/RCTAnimationHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTBlobHeaders (0.67.1):
+  - React-Core/RCTBlobHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTImageHeaders (0.67.1):
+  - React-Core/RCTImageHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTLinkingHeaders (0.67.1):
+  - React-Core/RCTLinkingHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTNetworkHeaders (0.67.1):
+  - React-Core/RCTNetworkHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTSettingsHeaders (0.67.1):
+  - React-Core/RCTSettingsHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTTextHeaders (0.67.1):
+  - React-Core/RCTTextHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTVibrationHeaders (0.67.1):
+  - React-Core/RCTVibrationHeaders (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-Core/RCTWebSocket (0.67.1):
+  - React-Core/RCTWebSocket (0.68.1):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.67.1)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-Core/Default (= 0.68.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-perflogger (= 0.68.1)
    - Yoga
-  - React-CoreModules (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+  - React-CoreModules (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core/CoreModulesHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-RCTImage (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-cxxreact (0.67.1):
+    - RCTTypeSafety (= 0.68.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/CoreModulesHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-RCTImage (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-cxxreact (0.68.1):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsinspector (= 0.67.1)
-    - React-logger (= 0.67.1)
-    - React-perflogger (= 0.67.1)
-    - React-runtimeexecutor (= 0.67.1)
-  - React-hermes (0.67.1):
+    - React-callinvoker (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsinspector (= 0.68.1)
+    - React-logger (= 0.68.1)
+    - React-perflogger (= 0.68.1)
+    - React-runtimeexecutor (= 0.68.1)
+  - React-hermes (0.68.1):
    - DoubleConversion
    - glog
    - hermes-engine
    - RCT-Folly (= 2021.06.28.00-v2)
    - RCT-Folly/Futures (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-jsiexecutor (= 0.67.1)
-    - React-jsinspector (= 0.67.1)
-    - React-perflogger (= 0.67.1)
-  - React-jsi (0.67.1):
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-jsiexecutor (= 0.68.1)
+    - React-jsinspector (= 0.68.1)
+    - React-perflogger (= 0.68.1)
+  - React-jsi (0.68.1):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi/Default (= 0.67.1)
-  - React-jsi/Default (0.67.1):
+    - React-jsi/Default (= 0.68.1)
+  - React-jsi/Default (0.68.1):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-  - React-jsiexecutor (0.67.1):
+  - React-jsiexecutor (0.68.1):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-perflogger (= 0.67.1)
-  - React-jsinspector (0.67.1)
-  - React-logger (0.67.1):
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-perflogger (= 0.68.1)
+  - React-jsinspector (0.68.1)
+  - React-logger (0.68.1):
    - glog
-  - react-native-background-actions (2.6.5):
+  - react-native-background-actions (2.6.6):
    - React-Core
  - react-native-begin-background-task (0.1.0):
    - React
@@ -253,9 +262,9 @@ PODS:
    - React-Core
  - react-native-keep-awake (1.0.4):
    - React
-  - react-native-mmkv-storage (0.3.7):
-    - MMKV (= 1.2.7)
-    - React
+  - react-native-mmkv-storage (0.7.0):
+    - MMKV (= 1.2.10)
+    - React-Core
  - react-native-netinfo (6.2.1):
    - React-Core
  - react-native-orientation (3.1.3):
@@ -266,76 +275,76 @@ PODS:
    - React
  - react-native-webview (11.17.0):
    - React-Core
-  - React-perflogger (0.67.1)
-  - React-RCTActionSheet (0.67.1):
-    - React-Core/RCTActionSheetHeaders (= 0.67.1)
-  - React-RCTAnimation (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+  - React-perflogger (0.68.1)
+  - React-RCTActionSheet (0.68.1):
+    - React-Core/RCTActionSheetHeaders (= 0.68.1)
+  - React-RCTAnimation (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core/RCTAnimationHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTBlob (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTAnimationHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTBlob (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTBlobHeaders (= 0.67.1)
-    - React-Core/RCTWebSocket (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-RCTNetwork (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTImage (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTBlobHeaders (= 0.68.1)
+    - React-Core/RCTWebSocket (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-RCTNetwork (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTImage (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core/RCTImageHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-RCTNetwork (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTLinking (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
-    - React-Core/RCTLinkingHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTNetwork (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTImageHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-RCTNetwork (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTLinking (0.68.1):
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTLinkingHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTNetwork (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core/RCTNetworkHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTSettings (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTNetworkHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTSettings (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.67.1)
-    - React-Core/RCTSettingsHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-RCTText (0.67.1):
-    - React-Core/RCTTextHeaders (= 0.67.1)
-  - React-RCTVibration (0.67.1):
-    - FBReactNativeSpec (= 0.67.1)
+    - RCTTypeSafety (= 0.68.1)
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTSettingsHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-RCTText (0.68.1):
+    - React-Core/RCTTextHeaders (= 0.68.1)
+  - React-RCTVibration (0.68.1):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTVibrationHeaders (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - ReactCommon/turbomodule/core (= 0.67.1)
-  - React-runtimeexecutor (0.67.1):
-    - React-jsi (= 0.67.1)
-  - ReactCommon/turbomodule/core (0.67.1):
+    - React-Codegen (= 0.68.1)
+    - React-Core/RCTVibrationHeaders (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - ReactCommon/turbomodule/core (= 0.68.1)
+  - React-runtimeexecutor (0.68.1):
+    - React-jsi (= 0.68.1)
+  - ReactCommon/turbomodule/core (0.68.1):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.67.1)
-    - React-Core (= 0.67.1)
-    - React-cxxreact (= 0.67.1)
-    - React-jsi (= 0.67.1)
-    - React-logger (= 0.67.1)
-    - React-perflogger (= 0.67.1)
+    - React-callinvoker (= 0.68.1)
+    - React-Core (= 0.68.1)
+    - React-cxxreact (= 0.68.1)
+    - React-jsi (= 0.68.1)
+    - React-logger (= 0.68.1)
+    - React-perflogger (= 0.68.1)
  - rn-extensions-share (2.4.0):
    - React-Core
  - rn-fetch-blob (0.12.0):
    - React-Core
-  - RNBootSplash (4.1.0):
+  - RNBootSplash (4.1.4):
    - React-Core
  - RNCCheckbox (0.5.9):
    - React-Core
@@ -351,18 +360,41 @@ PODS:
    - React
  - RNFileViewer (2.1.5):
    - React-Core
-  - RNGestureHandler (1.10.3):
+  - RNGestureHandler (2.4.1):
    - React-Core
  - RNIap (5.2.14):
    - React-Core
-  - RNInAppBrowser (3.6.3):
-    - React-Core
  - RNKeychain (4.0.5):
    - React
  - RNPrivacySnapshot (1.0.0):
    - React-Core
-  - RNReanimated (1.13.3):
+  - RNReanimated (2.8.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
  - RNScreens (3.10.2):
    - React-Core
    - React-RCTImage
@@ -391,7 +423,7 @@ DEPENDENCIES:
  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
  - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - hermes-engine (~> 0.9.0)
+  - hermes-engine (~> 0.11.0)
  - libevent (~> 2.1.12)
  - MMKV
  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
@@ -399,6 +431,7 @@ DEPENDENCIES:
  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
  - React (from `../node_modules/react-native/`)
  - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
+  - React-Codegen (from `build/generated/ios`)
  - React-Core (from `../node_modules/react-native/`)
  - React-Core/DevSupport (from `../node_modules/react-native/`)
  - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
@@ -448,7 +481,6 @@ DEPENDENCIES:
  - RNFileViewer (from `../node_modules/react-native-file-viewer`)
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
  - RNIap (from `../node_modules/react-native-iap`)
-  - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
  - RNKeychain (from `../node_modules/react-native-keychain`)
  - RNPrivacySnapshot (from `../node_modules/react-native-privacy-snapshot`)
  - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -493,6 +525,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/"
  React-callinvoker:
    :path: "../node_modules/react-native/ReactCommon/callinvoker"
+  React-Codegen:
+    :path: build/generated/ios
  React-Core:
    :path: "../node_modules/react-native/"
  React-CoreModules:
@@ -587,8 +621,6 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-gesture-handler"
  RNIap:
    :path: "../node_modules/react-native-iap"
-  RNInAppBrowser:
-    :path: "../node_modules/react-native-inappbrowser-reborn"
  RNKeychain:
    :path: "../node_modules/react-native-keychain"
  RNPrivacySnapshot:
@@ -623,29 +655,30 @@ SPEC CHECKSUMS:
  Base64: cecfb41a004124895a7bcee567a89bae5a89d49b
  boost: a7c83b31436843459a1961bfd74b96033dc77234
  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
-  FBLazyVector: cf409c74423d3507bda74bda1dc41e903ec2cd5b
-  FBReactNativeSpec: ef0ce762fdb37900abb01e008cce5f0ef2cce6b7
+  FBLazyVector: 2c76493a346ef8cacf1f442926a39f805fffec1f
+  FBReactNativeSpec: 371350f24afa87b6aba606972ec959dcd4a95c9a
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
-  hermes-engine: bf7577d12ac6ccf53ab8b5af3c6ccf0dd8458c5c
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
+  hermes-engine: 84e3af1ea01dd7351ac5d8689cbbea1f9903ffc3
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  MMKV: 22e5136f7d00197bc0fc9694b7f71519f0d1ca12
-  MMKVCore: b00e7a09ec77a1b916aef336eedd3b99ec249978
+  MMKV: 76033b9ace2006623308910a3afcc0e25eba3140
+  MMKVCore: 3388952ded307e41b3ed8a05892736a236ed1b8e
  pop: d582054913807fd11fd50bfe6a539d91c7e1a55a
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
-  RCTRequired: e5dc0c44cb366fc93383a2bffbc190fe821e7293
-  RCTTypeSafety: 6a4d0cfe070e7fd996e797f439b70878764a1ae0
-  React: e194f6b2f0a4f8d24065f3ca0a6abe859694df65
-  React-callinvoker: a9e7bd8d87147de3530007a3d74afd4b7dbaf57e
-  React-Core: 4714b96060ccc19fdfbeec4e30c3b43ec82fb508
-  React-CoreModules: fbf9a30fe25385428a57bea57d3d6d27830111da
-  React-cxxreact: 4c8b1bfa89c6e98b8a05ebf0d9ba8d8e322e390c
-  React-hermes: 7b536f4246210ffd5c928a8b89d45f12f0bfc230
-  React-jsi: 1653dc43b537777e80f8e6c9e36aa803c698e4d3
-  React-jsiexecutor: 1af5de75a4c834c05d53a77c1512e5aa6c18412f
-  React-jsinspector: ab80bcdb02f28cdfc0dbbaea6db1241565d59002
-  React-logger: b08f354e4c928ff794ca477347fea0922aaf11c3
-  react-native-background-actions: a466fde06b54e52adf037ca9b217df460596f120
+  RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
+  RCTRequired: 00581111c53531e39e3c6346ef0d2c0cf52a5a37
+  RCTTypeSafety: 07e03ee7800e7dd65cba8e52ad0c2edb06c96604
+  React: e61f4bf3c573d0c61c56b53dc3eb1d9daf0768a0
+  React-callinvoker: 047d47230bb6fd66827f8cb0bea4e944ffd1309b
+  React-Codegen: bb0403cde7374af091530e84e492589485aab480
+  React-Core: a4a3a8e10d004b08e013c3d0438259dd89a3894c
+  React-CoreModules: bb9f8bc36f1ae6d780b856927fa9d4aa01ccccc0
+  React-cxxreact: 7dd472aefb8629d6080cbb859240bafccd902704
+  React-hermes: a245deb80c8d0bc35ed599109562c1c75ca803bc
+  React-jsi: b25808afe821b607d51c779bdd1717be8393b7ec
+  React-jsiexecutor: 4a4bae5671b064a2248a690cf75957669489d08c
+  React-jsinspector: 218a2503198ff28a085f8e16622a8d8f507c8019
+  React-logger: f79dd3cc0f9b44f5611c6c7862badd891a862cf8
+  react-native-background-actions: 2a3d189013c2e07ef7ecd1f1240f6d59568b1604
  react-native-begin-background-task: 3b889e07458afc5822a7277cf9cbc7cd077e39ee
  react-native-config: 6502b1879f97ed5ac570a029961fc35ea606cd14
  react-native-document-picker: ec07866a30707f23660c0f3ae591d669d3e89096
@@ -654,27 +687,27 @@ SPEC CHECKSUMS:
  react-native-html-to-pdf-lite: 21bfb169bf4cbcd7bec9f736975ee1b3f5292d4a
  react-native-image-picker: 9c8a2687b69300ad9e95cec5d38f35ab9d32467d
  react-native-keep-awake: e63964d58c890de02bfb6519dedb7d90b5c782de
-  react-native-mmkv-storage: 6d9ce7bbbef45fcdde623dd13bf3617ea87c2a52
+  react-native-mmkv-storage: ef6741978932d017b252c379cff42ff990a7646c
  react-native-netinfo: 3d3769f0d65de15c83a9bf1346f8be71de5a24bf
  react-native-orientation: f1caf84d65f1a4fd4511a18f2b924e634ad7a628
  react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
  react-native-sodium: 5d17851375e399a532d3c571d0703de4312da31c
  react-native-webview: 10996be8bcc5e37a30dbc139fc544bb651dc8612
-  React-perflogger: 9a6172711d9c4c8c7ac0a426717317c3c6ecf85c
-  React-RCTActionSheet: ed408b54b08278e6af8a75e08679675041da61ae
-  React-RCTAnimation: 0163b497a423a9576a776685c6e3fe276f934758
-  React-RCTBlob: 40e9a2ba218218cc120d037408e6c1686036a3ad
-  React-RCTImage: ae48901aecaf2b5a9f7f51cbb60fc36ff120115d
-  React-RCTLinking: 1e25d97db107eea60657211f7ecc4509587f8d29
-  React-RCTNetwork: 775383be87609cf2d7e182a9b967e51686f12b2f
-  React-RCTSettings: 4581080369f65e5bc388061ff7b9cba9389936c4
-  React-RCTText: 48df7f52519cfc6a9eb79a02acb3d33df04370a0
-  React-RCTVibration: 19c012d1202df46bafbe49268a346f6b3edadfdd
-  React-runtimeexecutor: 2c92a8bddd1a3e72c7513d1e74235c2d9c84875c
-  ReactCommon: 2e816fad39f65f2a94a5999d5be463a6b620dcf6
+  React-perflogger: 30ab8d6db10e175626069e742eead3ebe8f24fd5
+  React-RCTActionSheet: 4b45da334a175b24dabe75f856b98fed3dfd6201
+  React-RCTAnimation: d6237386cb04500889877845b3e9e9291146bc2e
+  React-RCTBlob: bc9e2cd738c43bd2948e862e371402ef9584730a
+  React-RCTImage: 9f8cac465c6e5837007f59ade2a0a741016dd6a3
+  React-RCTLinking: 5073abb7d30cc0824b2172bd4582fc15bfc40510
+  React-RCTNetwork: 28ff94aa7d8fc117fc800b87dd80869a00d2bef3
+  React-RCTSettings: f27aa036f7270fe6ca43f8cdd1819e821fa429a0
+  React-RCTText: 7cb6f86fa7bc86f22f16333ad243b158e63b2a68
+  React-RCTVibration: 9e344c840176b0af9c84d5019eb4fed8b3c105a1
+  React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
+  ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
  rn-extensions-share: 3f0ecce20dfbca1f0358deb4ebfb9ee121a6d92a
  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
-  RNBootSplash: 605c94f76180e3f8e5832bcafbe52ff5194a51d0
+  RNBootSplash: de2c568373a9c79a66e9918b8929eb6c9a35246f
  RNCCheckbox: 6369808337432cdbd5025d62ceced2480b4c51df
  RNCClipboard: 99fc8ad669a376b756fbc8098ae2fd05c0ed0668
  RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
@@ -682,12 +715,11 @@ SPEC CHECKSUMS:
  RNDeviceInfo: 0400a6d0c94186d1120c3cbd97b23abc022187a9
  RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
  RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
-  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNGestureHandler: 4f4986408310a43f1606c391f38f76e0d6e790d5
  RNIap: f00befe6581a5953191108cb97d9b3872473337b
-  RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357
  RNKeychain: 840f8e6f13be0576202aefcdffd26a4f54bfe7b5
  RNPrivacySnapshot: 8eaf571478a353f2e5184f5c803164f22428b023
-  RNReanimated: 514a11da3a2bcc6c3dfd9de32b38e2b9bf101926
+  RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
  RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
  RNSecureRandom: 0dcee021fdb3d50cd5cee5db0ebf583c42f5af0e
  RNShare: 3185c074441b7e8897014d95ba982434a0a024a1
@@ -696,8 +728,8 @@ SPEC CHECKSUMS:
  RNVectorIcons: 4143ba35feebab8fdbe6bc43d1e776b393d47ac8
  SexyTooltip: 5c9b4dec52bfb317938cb0488efd9da3717bb6fd
  toolbar-android: 2a73856e98b750d7e71ce4644d3f41cc98211719
-  Yoga: 5cbf25add73edb290e1067017690f7ebf56c5468
+  Yoga: 17cd9a50243093b547c1e539c749928dd68152da

-PODFILE CHECKSUM: caa8e050bad1a0f4d452e7e74a6dc724578310b1
+PODFILE CHECKSUM: ad9e77b8317096e4eea6f82fddeeef648450a16b

-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3
--- a/apps/mobile/patches/react-native+0.68.1.patch
+++ b/apps/mobile/patches/react-native+0.68.1.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-index 5fa44b5..af6d7be 100644
+index f0f6402..d645d81 100644
 --- a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
 +++ b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-@@ -623,7 +623,18 @@ RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
+@@ -685,7 +685,18 @@ RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
                                          : MAX(0, _scrollView.contentSize.height - viewportSize.height);
 
     // Calculate the snap offsets adjacent to the initial offset target
@@ -17,15 +17,8 @@ index 5fa44b5..af6d7be 100644
 +      targetOffset = self.disableIntervalMomentum ? scrollView.contentOffset.x : targetContentOffset->x;
 +    } else {
 +      targetOffset = self.disableIntervalMomentum ? scrollView.contentOffset.y : targetContentOffset->y;
-+    }
+   }
 +
     CGFloat smallerOffset = 0.0;
     CGFloat largerOffset = maximumOffset;
 
-diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
-new file mode 100644
-index 0000000..361f5fb
--- /dev/null
-+++ b/node_modules/react-native/scripts/.packager.env
-@@ -0,0 +1 @@
-+export RCT_METRO_PORT=8081
--- a/apps/mobile/patches/react-native-background-actions+2.6.5.patch
+++ b/apps/mobile/patches/react-native-background-actions+2.6.5.patch
--- a/apps/mobile/patches/react-native-securerandom+1.0.0.patch
+++ b/apps/mobile/patches/react-native-securerandom+1.0.0.patch
--- a/apps/mobile/release_notes.txt
+++ b/apps/mobile/release_notes.txt
@@ -1,9 +1,4 @@
- Sync over web-sockets
- Disable section headers in lists by changing grouping to "none"
- Fix padding-left on bold text in editor
- Fix session-expired dialog does not hide after login
- Fix login issues when 2FA enabled on some devices
- Fix a race condition causing note to be empty in editor
- Fix pin to notifications not working for some notes
+- Improvements to sync performance
+- Added sort by title option in sort menu

 Thank you for using Notesnook!
--- a/apps/mobile/releasenotes.md
+++ b/apps/mobile/releasenotes.md
@@ -1,13 +1,4 @@
-# What's new
- Sync over web-sockets
- Optionally Disable section headers in lists by changing grouping to "none"
- Formatting support for notification notes
-
-# What's fixed
- Fix padding-left on bold text in editor
- Fix session-expired dialog does not hide after login
- Fix login issues when 2FA enabled on some devices
- Fix a race condition causing note to be empty in editor
- Fix pin to notifications not working for some notes
+- Improvements to sync performance
+- Added sort by title option in sort menu

 Thank you for using Notesnook!
--- a/apps/mobile/share/index.js
+++ b/apps/mobile/share/index.js
@@ -1,25 +1,21 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import { getLinkPreview } from 'link-preview-js';
-import { HTMLRootElement } from 'node-html-parser/dist/nodes/html';
+import { parseHTML } from 'notes-core/utils/htmlparser';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import {
  ActivityIndicator,
  Alert,
  Keyboard,
-  KeyboardAvoidingView,
  Modal,
-  NativeModules,
  Platform,
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  TouchableOpacity,
-  UIManager,
  useWindowDimensions,
  View
 } from 'react-native';
-import Animated, { acc, Easing, timing, useValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import WebView from 'react-native-webview';
@@ -32,9 +28,6 @@ import Storage from '../src/utils/database/storage';
 import { sleep } from '../src/utils/time';
 import { Search } from './search';
 import { useShareStore } from './store';
-
-const AnimatedKAV = Animated.createAnimatedComponent(KeyboardAvoidingView);
-const AnimatedSAV = Animated.createAnimatedComponent(SafeAreaView);
 async function sanitizeHtml(site) {
  try {
    let html = await fetch(site);
@@ -63,10 +56,6 @@ function getBaseUrl(site) {
  return url;
 }

-/**
- *
- * @param {HTMLRootElement} document
- */
 function wrapTablesWithDiv(document) {
  const tables = document.getElementsByTagName('table');
  for (let table of tables) {
@@ -97,10 +86,6 @@ let elementBlacklist = [
  'footer'
 ];

-/**
- *
- * @param {HTMLRootElement} document
- */
 function removeInvalidElements(document) {
  let elements = document.querySelectorAll(elementBlacklist.join(','));
  for (let element of elements) {
@@ -109,13 +94,7 @@ function removeInvalidElements(document) {
  return document;
 }

-/**
- *
- * @param {HTMLRootElement} document
- */
 function replaceSrcWithAbsoluteUrls(document, baseUrl) {
-  console.log('parsing:', document);
-
  let images = document.querySelectorAll('img');
  console.log(images.length);
  for (var i = 0; i < images.length; i++) {
@@ -139,13 +118,9 @@ function replaceSrcWithAbsoluteUrls(document, baseUrl) {
  return document;
 }

-/**
- *
- * @param {HTMLRootElement} document
- */
 function fixCodeBlocks(document) {
  let elements = document.querySelectorAll('code,pre');
-  console.log(elements.length);
+
  for (let element of elements) {
    element.classList.add('.hljs');
  }
@@ -153,13 +128,11 @@ function fixCodeBlocks(document) {
 }

 function sanitize(html, baseUrl) {
-  let { parse } = require('node-html-parser');
-  let parser = parse(html);
+  let parser = parseHTML(html);
  parser = wrapTablesWithDiv(parser);
  parser = removeInvalidElements(parser);
  parser = replaceSrcWithAbsoluteUrls(parser, baseUrl);
  parser = fixCodeBlocks(parser);
-
  let htmlString = parser.outerHTML;

  htmlString = htmlString + `<hr>${makeHtmlFromUrl(baseUrl)}`;
@@ -211,28 +184,10 @@ const NotesnookShare = ({ quicknote = false }) => {
  const keyboardHeight = useRef(0);
  const { width, height } = useWindowDimensions();
  const webviewRef = useRef();
-  const opacity = useValue(0);
-  const translate = useValue(1000);
  const insets = Platform.OS === 'android' ? { top: StatusBar.currentHeight } : useSafeAreaInsets();
-  const prevAnimation = useRef(null);
  const [showSearch, setShowSearch] = useState(false);
  const [kh, setKh] = useState(0);

-  const animate = (opacityV, translateV) => {
-    prevAnimation.current = translateV;
-    if (Platform.OS === 'ios') return;
-    timing(opacity, {
-      toValue: opacityV,
-      duration: 300,
-      easing: Easing.in(Easing.ease)
-    }).start();
-    timing(translate, {
-      toValue: translateV,
-      duration: 300,
-      easing: Easing.in(Easing.ease)
-    }).start();
-  };
-
  const onKeyboardDidShow = event => {
    let kHeight = event.endCoordinates.height;
    keyboardHeight.current = kHeight;
@@ -310,7 +265,6 @@ const NotesnookShare = ({ quicknote = false }) => {
    loadData();
    useShareStore.getState().restoreAppendNote();
    sleep(50).then(() => {
-      animate(1, 0);
      sleep(500).then(r => {
        Storage.write('shareExtensionOpened', 'opened');
      });
@@ -318,8 +272,6 @@ const NotesnookShare = ({ quicknote = false }) => {
  }, []);

  const close = async () => {
-    animate(0, 1000);
-    await sleep(300);
    setNote({ ...defaultNote });
    setLoadingIntent(true);
    if (quicknote) {
@@ -487,11 +439,10 @@ const NotesnookShare = ({ quicknote = false }) => {

  return (
    <Outer {...outerProps}>
-      <AnimatedSAV
+      <SafeAreaView
        style={{
          width: width > 500 ? 500 : width,
          height: height - kh,
-          opacity: Platform.OS !== 'ios' ? opacity : 1,
          alignSelf: 'center',
          justifyContent: 'flex-end'
        }}
@@ -518,7 +469,6 @@ const NotesnookShare = ({ quicknote = false }) => {
                if (showSearch) {
                  console.log('hide search');
                  setShowSearch(false);
-                  animate(1, 0);
                } else {
                  close();
                }
@@ -561,7 +511,6 @@ const NotesnookShare = ({ quicknote = false }) => {
              if (showSearch) {
                console.log('hide search');
                setShowSearch(false);
-                animate(1, 0);
              } else {
                close();
              }
@@ -590,7 +539,6 @@ const NotesnookShare = ({ quicknote = false }) => {
            getKeyboardHeight={() => keyboardHeight.current}
            close={() => {
              setShowSearch(false);
-              animate(1, 0);
            }}
          />
        ) : null}
@@ -648,7 +596,6 @@ const NotesnookShare = ({ quicknote = false }) => {
                color={colors.nav}
                onPress={() => {
                  setShowSearch(true);
-                  animate(1, 1000);
                }}
                icon="text-short"
                iconSize={18}
@@ -816,7 +763,7 @@ const NotesnookShare = ({ quicknote = false }) => {
            />
          </View>
        </View>
-      </AnimatedSAV>
+      </SafeAreaView>
    </Outer>
  );
 };
--- a/apps/mobile/share/store.js
+++ b/apps/mobile/share/store.js
@@ -7,7 +7,7 @@ export const useShareStore = create((set, get) => ({
  colors: Appearance.getColorScheme() === 'dark' ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
  accent: ACCENT,
  setAccent: async () => {
-    let appSettings = await MMKV.getItem('appSettings');
+    let appSettings = MMKV.getString('appSettings');

    if (appSettings) {
      appSettings = JSON.parse(appSettings);
@@ -31,7 +31,7 @@ export const useShareStore = create((set, get) => ({
    set({ appendNote: note });
  },
  restoreAppendNote: async () => {
-    let note = await MMKV.getItem('shareMenuAppendNote');
+    let note = MMKV.getString('shareMenuAppendNote');
    if (note) {
      note = JSON.parse(note);
      set({ appendNote: note });
--- a/apps/mobile/src/assets/images/assets.js
+++ b/apps/mobile/src/assets/images/assets.js
--- a/apps/mobile/src/assets/images/notesnook-logo-png.png
+++ b/apps/mobile/src/assets/images/notesnook-logo-png.png
--- a/apps/mobile/src/assets/images/to_the_stars.png
+++ b/apps/mobile/src/assets/images/to_the_stars.png
--- a/apps/mobile/src/components/announcements/announcement.js
+++ b/apps/mobile/src/components/announcements/announcement.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { FlatList, View } from 'react-native';
-import { useMessageStore, useSelectionStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useSelectionStore } from '../../stores/use-selection-store';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { allowedOnPlatform, renderItem } from './functions';

 export const Announcement = ({ color }) => {
--- a/apps/mobile/src/components/announcements/body.js
+++ b/apps/mobile/src/components/announcements/body.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';

--- a/apps/mobile/src/components/announcements/cta.js
+++ b/apps/mobile/src/components/announcements/cta.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Linking, View } from 'react-native';
 import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseAnnouncementDialog } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
--- a/apps/mobile/src/components/announcements/description.js
+++ b/apps/mobile/src/components/announcements/description.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
--- a/apps/mobile/src/components/announcements/functions.js
+++ b/apps/mobile/src/components/announcements/functions.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { View } from 'react-native';
-import { allowedPlatforms } from '../../stores/stores';
+import { allowedPlatforms } from '../../stores/use-message-store';
 import { ProFeatures } from '../dialogs/result/pro-features';
 import { Body } from './body';
 import { Cta } from './cta';
--- a/apps/mobile/src/components/announcements/index.js
+++ b/apps/mobile/src/components/announcements/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useMessageStore } from '../../stores/stores';
+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 { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/events';
--- a/apps/mobile/src/components/announcements/list.js
+++ b/apps/mobile/src/components/announcements/list.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';

--- a/apps/mobile/src/components/announcements/subheading.js
+++ b/apps/mobile/src/components/announcements/subheading.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';
--- a/apps/mobile/src/components/announcements/title.js
+++ b/apps/mobile/src/components/announcements/title.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useMessageStore } from '../../stores/stores';
+import { useMessageStore } from '../../stores/use-message-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import Heading from '../ui/typography/heading';
--- a/apps/mobile/src/components/attachments/actions.js
+++ b/apps/mobile/src/components/attachments/actions.js
@@ -5,8 +5,8 @@ import { ScrollView } from 'react-native-gesture-handler';
 import picker from '../../screens/editor/tiny/toolbar/picker';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import PremiumService from '../../services/premium';
-import { useAttachmentStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useAttachmentStore } from '../../stores/use-attachment-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { formatBytes } from '../../utils';
 import { db } from '../../utils/database';
 import { eCloseAttachmentDialog, eCloseProgressDialog } from '../../utils/events';
--- a/apps/mobile/src/components/attachments/attachmentitem.js
+++ b/apps/mobile/src/components/attachments/attachmentitem.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import * as Progress from 'react-native-progress';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useAttachmentStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useAttachmentStore } from '../../stores/use-attachment-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { formatBytes } from '../../utils';
 import { db } from '../../utils/database';
 import { useAttachmentProgress } from '../../utils/hooks/use-attachment-progress';
--- a/apps/mobile/src/components/attachments/index.js
+++ b/apps/mobile/src/components/attachments/index.js
@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/events';
 import filesystem from '../../utils/filesystem';
--- a/apps/mobile/src/components/auth/changepassword.js
+++ b/apps/mobile/src/components/auth/changepassword.js
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import { db } from '../../utils/database';
 import { eCloseProgressDialog } from '../../utils/events';
--- a/apps/mobile/src/components/auth/forgotpassword.js
+++ b/apps/mobile/src/components/auth/forgotpassword.js
@@ -4,7 +4,7 @@ import ActionSheet from 'react-native-actions-sheet';
 import { DDS } from '../../services/device-detection';
 import { ToastEvent } from '../../services/event-manager';
 import SettingsService from '../../services/settings';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import DialogHeader from '../dialog/dialog-header';
 import { Button } from '../ui/button';
--- a/apps/mobile/src/components/auth/index.js
+++ b/apps/mobile/src/components/auth/index.js
@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useThemeStore } from '../../stores/theme';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/events';
 import { sleep } from '../../utils/time';
 import BaseDialog from '../dialog/base-dialog';
 import { Toast } from '../toast';
+import { IconButton } from '../ui/icon-button';
 import { Login } from './login';
 import { Signup } from './signup';

@@ -20,6 +23,7 @@ const Auth = () => {
  const [visible, setVisible] = useState(false);
  const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
  const actionSheetRef = useRef();
+  const insets = useSafeAreaInsets();

  useEffect(() => {
    eSubscribeEvent(eOpenLoginDialog, open);
@@ -55,8 +59,6 @@ const Auth = () => {
      background={colors.bg}
      transparent={false}
    >
-      <Toast context="local" />
-
      {currentAuthMode !== AuthMode.login ? (
        <Signup
          changeMode={mode => setCurrentAuthMode(mode)}
@@ -66,6 +68,24 @@ const Auth = () => {
      ) : (
        <Login changeMode={mode => setCurrentAuthMode(mode)} />
      )}
+
+      {currentAuthMode === AuthMode.welcomeSignup ? null : (
+        <IconButton
+          name="arrow-left"
+          onPress={() => {
+            eSendEvent(eCloseLoginDialog);
+          }}
+          color={colors.pri}
+          customStyle={{
+            position: 'absolute',
+            zIndex: 999,
+            left: 12,
+            top: Platform.OS === 'ios' ? 12 + insets.top : 12
+          }}
+        />
+      )}
+
+      <Toast context="local" />
    </BaseDialog>
  );
 };
--- a/apps/mobile/src/components/auth/login.js
+++ b/apps/mobile/src/components/auth/login.js
@@ -3,18 +3,19 @@ import { Platform, View } from 'react-native';
 import { SheetManager } from 'react-native-actions-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DDS } from '../../services/device-detection';
-import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
+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/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useUserStore } from '../../stores/use-user-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eCloseLoginDialog } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
 import BaseDialog from '../dialog/base-dialog';
 import SheetProvider from '../sheet-provider';
+import { Progress } from '../sheets/progress';
 import { Button } from '../ui/button';
 import { IconButton } from '../ui/icon-button';
 import Input from '../ui/input';
@@ -25,7 +26,6 @@ import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 import { ForgotPassword } from './forgot-password';
 import TwoFactorVerification from './two-factor';
-import { Progress } from '../sheets/progress';
 export const Login = ({ changeMode }) => {
  const colors = useThemeStore(state => state.colors);
  const email = useRef();
@@ -130,20 +130,6 @@ export const Login = ({ changeMode }) => {

  return (
    <>
-      <IconButton
-        name="arrow-left"
-        onPress={() => {
-          eSendEvent(eCloseLoginDialog);
-        }}
-        color={colors.pri}
-        customStyle={{
-          position: 'absolute',
-          zIndex: 999,
-          left: 12,
-          top: Platform.OS === 'ios' ? 12 + insets.top : 12
-        }}
-      />
-
      <ForgotPassword />

      <SheetProvider context="two_factor_verify" />
@@ -167,123 +153,121 @@ export const Login = ({ changeMode }) => {
            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
          </BouncingView>
        </View>
-        <BouncingView initialScale={0.98} duration={3000}>
-          <View
+        <View
+          style={{
+            width: '100%',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            paddingHorizontal: 12,
+            marginBottom: 30,
+            marginTop: 15
+          }}
+        >
+          <Heading
            style={{
-              width: '100%',
-              justifyContent: 'center',
-              alignSelf: 'center',
-              paddingHorizontal: 12,
-              marginBottom: 30,
-              marginTop: 15
+              textAlign: 'center'
            }}
+            size={30}
+            color={colors.heading}
          >
-            <Heading
-              style={{
-                textAlign: 'center'
-              }}
-              size={30}
-              color={colors.heading}
-            >
-              Welcome back!
-            </Heading>
-            <Paragraph
-              style={{
-                textDecorationLine: 'underline',
-                textAlign: 'center',
-                marginTop: 5
-              }}
-              onPress={() => {
-                changeMode(1);
-              }}
-              size={SIZE.md}
-            >
-              Don't have an account? Sign up
-            </Paragraph>
-          </View>
-          <View
+            Welcome back!
+          </Heading>
+          <Paragraph
            style={{
-              width: focused ? '100%' : '99.9%',
-              padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              textDecorationLine: 'underline',
+              textAlign: 'center',
+              marginTop: 5
            }}
+            onPress={() => {
+              changeMode(1);
+            }}
+            size={SIZE.md}
          >
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={value => {
-                email.current = value;
-              }}
-              testID="input.email"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage="Email is invalid"
-              placeholder="Email"
-              onSubmit={() => {
-                passwordInputRef.current?.focus();
-              }}
-            />
+            Don't have an account? Sign up
+          </Paragraph>
+        </View>
+        <View
+          style={{
+            width: focused ? '100%' : '99.9%',
+            padding: 12,
+            backgroundColor: colors.bg,
+            flexGrow: 1
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={value => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage="Email is invalid"
+            placeholder="Email"
+            onSubmit={() => {
+              passwordInputRef.current?.focus();
+            }}
+          />

-            <Input
-              fwdRef={passwordInputRef}
-              onChangeText={value => {
-                password.current = value;
-              }}
-              testID="input.password"
-              returnKeyLabel="Done"
-              returnKeyType="done"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              autoCorrect={false}
-              placeholder="Password"
-              marginBottom={0}
-              onSubmit={() => login()}
-            />
+          <Input
+            fwdRef={passwordInputRef}
+            onChangeText={value => {
+              password.current = value;
+            }}
+            testID="input.password"
+            returnKeyLabel="Done"
+            returnKeyType="done"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            autoCorrect={false}
+            placeholder="Password"
+            marginBottom={0}
+            onSubmit={() => login()}
+          />
+          <Button
+            title="Forgot your password?"
+            style={{
+              alignSelf: 'flex-end',
+              height: 30,
+              paddingHorizontal: 0
+            }}
+            onPress={() => {
+              SheetManager.show('forgotpassword_sheet', email.current);
+            }}
+            textStyle={{
+              textDecorationLine: 'underline'
+            }}
+            fontSize={SIZE.xs}
+            type="gray"
+          />
+
+          <View
+            style={{
+              // position: 'absolute',
+              marginTop: 50,
+              alignSelf: 'center'
+            }}
+          >
            <Button
-              title="Forgot your password?"
              style={{
-                alignSelf: 'flex-end',
-                height: 30,
-                paddingHorizontal: 0
+                marginTop: 10,
+                width: 250,
+                borderRadius: 100
              }}
-              onPress={() => {
-                SheetManager.show('forgotpassword_sheet', email.current);
-              }}
-              textStyle={{
-                textDecorationLine: 'underline'
-              }}
-              fontSize={SIZE.xs}
-              type="gray"
+              loading={loading}
+              onPress={() => login()}
+              //  width="100%"
+              type="accent"
+              title={loading ? null : 'Login to your account'}
            />
-
-            <View
-              style={{
-                // position: 'absolute',
-                marginTop: 50,
-                alignSelf: 'center'
-              }}
-            >
-              <Button
-                style={{
-                  marginTop: 10,
-                  width: 250,
-                  borderRadius: 100
-                }}
-                loading={loading}
-                onPress={() => login()}
-                //  width="100%"
-                type="accent"
-                title={loading ? null : 'Login to your account'}
-              />
-            </View>
          </View>
-        </BouncingView>
+        </View>
      </View>
    </>
  );
--- a/apps/mobile/src/components/auth/sessionexpired.js
+++ b/apps/mobile/src/components/auth/sessionexpired.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Modal, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import BiometricService from '../../services/biometrics';
 import {
  eSendEvent,
--- a/apps/mobile/src/components/auth/signup.js
+++ b/apps/mobile/src/components/auth/signup.js
@@ -1,21 +1,21 @@
 import React, { useRef, useState } from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import { clearMessage, setEmailVerifyMessage } from '../../services/message';
 import PremiumService from '../../services/premium';
+import { useUserStore } from '../../stores/use-user-store';
+import { useThemeStore } from '../../stores/use-theme-store';
+import umami from '../../utils/analytics';
 import { db } from '../../utils/database';
 import { eCloseLoginDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
-import umami from '../../utils/analytics';
-import { IconButton } from '../ui/icon-button';
-import { Button } from '../ui/button';
 import BaseDialog from '../dialog/base-dialog';
+import { Button } from '../ui/button';
+import { IconButton } from '../ui/icon-button';
 import Input from '../ui/input';
 import { SvgView } from '../ui/svg';
 import { BouncingView } from '../ui/transitions/bouncing-view';
@@ -85,22 +85,6 @@ export const Signup = ({ changeMode, welcome, trial }) => {

  return (
    <>
-      {!welcome && (
-        <IconButton
-          name="arrow-left"
-          onPress={() => {
-            eSendEvent(eCloseLoginDialog);
-          }}
-          color={colors.pri}
-          customStyle={{
-            position: 'absolute',
-            zIndex: 999,
-            left: 12,
-            top: Platform.OS === 'ios' ? 12 + insets.top : 12
-          }}
-        />
-      )}
-
      {loading ? <BaseDialog transparent={true} visible={true} animation="fade" /> : null}
      <View
        style={{
@@ -117,179 +101,177 @@ export const Signup = ({ changeMode, welcome, trial }) => {
            overflow: 'hidden'
          }}
        >
-          <BouncingView initialScale={1.05} duration={5000}>
+          <BouncingView initialScale={1.05}>
            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
          </BouncingView>
        </View>

-        <BouncingView initialScale={0.98} duration={5000}>
-          <View
+        <View
+          style={{
+            width: '100%',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            paddingHorizontal: 12,
+            marginBottom: 30,
+            marginTop: Dimensions.get('window').height < 700 ? -75 : 15
+          }}
+        >
+          <Heading
            style={{
-              width: '100%',
-              justifyContent: 'center',
-              alignSelf: 'center',
-              paddingHorizontal: 12,
-              marginBottom: 30,
-              marginTop: Dimensions.get('window').height < 700 ? -75 : 15
+              textAlign: 'center'
            }}
+            size={30}
+            color={colors.heading}
          >
-            <Heading
-              style={{
-                textAlign: 'center'
-              }}
-              size={30}
-              color={colors.heading}
-            >
-              Create your account
-            </Heading>
+            Create your account
+          </Heading>
+          <Paragraph
+            style={{
+              textDecorationLine: 'underline',
+              textAlign: 'center'
+            }}
+            onPress={() => {
+              changeMode(0);
+            }}
+            size={SIZE.md}
+          >
+            Already have an account? Log in
+          </Paragraph>
+        </View>
+        <View
+          style={{
+            width: '100%',
+            padding: 12,
+            backgroundColor: colors.bg,
+            flexGrow: 1
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={value => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage="Email is invalid"
+            placeholder="Email"
+            onSubmit={() => {
+              passwordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={passwordInputRef}
+            onChangeText={value => {
+              password.current = value;
+            }}
+            testID="input.password"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            validationType="password"
+            autoCorrect={false}
+            placeholder="Password"
+            onSubmit={() => {
+              confirmPasswordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={confirmPasswordInputRef}
+            onChangeText={value => {
+              confirmPassword.current = value;
+            }}
+            testID="input.confirmPassword"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Signup"
+            returnKeyType="done"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            autoCorrect={false}
+            validationType="confirmPassword"
+            customValidator={() => password.current}
+            placeholder="Confirm password"
+            marginBottom={5}
+            onSubmit={signup}
+          />
+          <Paragraph size={SIZE.xs} color={colors.icon}>
+            By signing up, you agree to our{' '}
            <Paragraph
-              style={{
-                textDecorationLine: 'underline',
-                textAlign: 'center'
-              }}
+              size={SIZE.xs}
              onPress={() => {
-                changeMode(0);
+                openLinkInBrowser('https://notesnook.com/tos', colors)
+                  .catch(e => {})
+                  .then(r => {});
              }}
-              size={SIZE.md}
+              style={{
+                textDecorationLine: 'underline'
+              }}
+              color={colors.accent}
            >
-              Already have an account? Log in
+              terms of service{' '}
            </Paragraph>
-          </View>
+            and{' '}
+            <Paragraph
+              size={SIZE.xs}
+              onPress={() => {
+                openLinkInBrowser('https://notesnook.com/privacy', colors)
+                  .catch(e => {})
+                  .then(r => {});
+              }}
+              style={{
+                textDecorationLine: 'underline'
+              }}
+              color={colors.accent}
+            >
+              privacy policy.
+            </Paragraph>
+          </Paragraph>
+
          <View
            style={{
-              width: '100%',
-              padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              marginTop: 50,
+              alignSelf: 'center'
            }}
          >
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={value => {
-                email.current = value;
-              }}
-              testID="input.email"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage="Email is invalid"
-              placeholder="Email"
-              onSubmit={() => {
-                passwordInputRef.current?.focus();
-              }}
-            />
-
-            <Input
-              fwdRef={passwordInputRef}
-              onChangeText={value => {
-                password.current = value;
-              }}
-              testID="input.password"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              validationType="password"
-              autoCorrect={false}
-              placeholder="Password"
-              onSubmit={() => {
-                confirmPasswordInputRef.current?.focus();
-              }}
-            />
-
-            <Input
-              fwdRef={confirmPasswordInputRef}
-              onChangeText={value => {
-                confirmPassword.current = value;
-              }}
-              testID="input.confirmPassword"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Signup"
-              returnKeyType="done"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              autoCorrect={false}
-              validationType="confirmPassword"
-              customValidator={() => password.current}
-              placeholder="Confirm password"
-              marginBottom={5}
-              onSubmit={signup}
-            />
-            <Paragraph size={SIZE.xs} color={colors.icon}>
-              By signing up, you agree to our{' '}
-              <Paragraph
-                size={SIZE.xs}
-                onPress={() => {
-                  openLinkInBrowser('https://notesnook.com/tos', colors)
-                    .catch(e => {})
-                    .then(r => {});
-                }}
-                style={{
-                  textDecorationLine: 'underline'
-                }}
-                color={colors.accent}
-              >
-                terms of service{' '}
-              </Paragraph>
-              and{' '}
-              <Paragraph
-                size={SIZE.xs}
-                onPress={() => {
-                  openLinkInBrowser('https://notesnook.com/privacy', colors)
-                    .catch(e => {})
-                    .then(r => {});
-                }}
-                style={{
-                  textDecorationLine: 'underline'
-                }}
-                color={colors.accent}
-              >
-                privacy policy.
-              </Paragraph>
-            </Paragraph>
-
-            <View
+            <Button
              style={{
-                marginTop: 50,
-                alignSelf: 'center'
+                marginTop: 10,
+                width: 250,
+                borderRadius: 100
              }}
-            >
+              loading={loading}
+              onPress={signup}
+              type="accent"
+              title={loading ? null : 'Agree and continue'}
+            />
+
+            {loading || !welcome ? null : (
              <Button
                style={{
                  marginTop: 10,
                  width: 250,
                  borderRadius: 100
                }}
-                loading={loading}
-                onPress={signup}
-                type="accent"
-                title={loading ? null : 'Agree and continue'}
+                onPress={() => {
+                  eSendEvent(eCloseLoginDialog);
+                }}
+                type="grayBg"
+                title="Skip for now"
              />
-
-              {loading || !welcome ? null : (
-                <Button
-                  style={{
-                    marginTop: 10,
-                    width: 250,
-                    borderRadius: 100
-                  }}
-                  onPress={() => {
-                    eSendEvent(eCloseLoginDialog);
-                  }}
-                  type="grayBg"
-                  title="Skip for now"
-                />
-              )}
-            </View>
+            )}
          </View>
-        </BouncingView>
+        </View>
      </View>
    </>
  );
--- a/apps/mobile/src/components/auth/twofactor.js
+++ b/apps/mobile/src/components/auth/twofactor.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseProgressDialog } from '../../utils/events';
 import useTimer from '../../utils/hooks/use-timer';
 import { SIZE } from '../../utils/size';
--- a/apps/mobile/src/components/container/containerheader.js
+++ b/apps/mobile/src/components/container/containerheader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useSelectionStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSelectionStore } from '../../stores/use-selection-store';

 export const ContainerHeader = ({ children }) => {
  const colors = useThemeStore(state => state.colors);
--- a/apps/mobile/src/components/container/floatingbutton.js
+++ b/apps/mobile/src/components/container/floatingbutton.js
@@ -1,6 +1,11 @@
 import React, { useEffect } from 'react';
 import { Keyboard, Platform, View } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} 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';
@@ -10,22 +15,34 @@ import { editing, getElevation, showTooltip, TOOLTIP_POSITIONS } from '../../uti
 import { normalize, SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';

-const translateY = new Animated.Value(0);
 export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
  const insets = useSafeAreaInsets();
  const deviceMode = useSettingStore(state => state.deviceMode);
  const selectionMode = useSelectionStore(state => state.selectionMode);
+  const translate = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: translate.value
+        },
+        {
+          translateY: translate.value
+        }
+      ]
+    };
+  });

  useEffect(() => {
    animate(selectionMode ? 150 : 0);
  }, [selectionMode]);

-  function animate(translate) {
-    Animated.timing(translateY, {
-      toValue: translate,
+  function animate(toValue) {
+    translate.value = withTiming(toValue, {
      duration: 250,
      easing: Easing.elastic(1)
-    }).start();
+    });
  }

  const onKeyboardHide = async () => {
@@ -51,25 +68,20 @@ export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow =

  return deviceMode !== 'mobile' && !shouldShow ? null : (
    <Animated.View
-      style={{
-        position: 'absolute',
-        right: 12,
-        bottom:
-          Platform.OS === 'ios' && insets.bottom !== 0
-            ? Platform.isPad
-              ? insets.bottom - 12
-              : insets.bottom - 24
-            : insets.bottom + 12,
-        zIndex: 10,
-        transform: [
-          {
-            translateY: translateY
-          },
-          {
-            translateX: translateY
-          }
-        ]
-      }}
+      style={[
+        {
+          position: 'absolute',
+          right: 12,
+          bottom:
+            Platform.OS === 'ios' && insets.bottom !== 0
+              ? Platform.isPad
+                ? insets.bottom - 12
+                : insets.bottom - 24
+              : insets.bottom,
+          zIndex: 10
+        },
+        animatedStyle
+      ]}
    >
      <PressableButton
        testID={notesnook.buttons.add}
--- a/apps/mobile/src/components/container/index.js
+++ b/apps/mobile/src/components/container/index.js
@@ -1,27 +1,26 @@
 import React from 'react';
 import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
 import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
+import { Header } from '../header';
+import SelectionHeader from '../selection-header';
 export const Container = ({ children }) => {
-  const colors = useThemeStore(state => state.colors);
  const floating = useIsFloatingKeyboard();
  return (
    <KeyboardAvoidingView
      behavior="padding"
      enabled={Platform.OS === 'ios' && !floating}
      style={{
-        backgroundColor: colors.bg,
-        width: '100%',
-        height: '100%'
+        flex: 1
      }}
    >
      <SafeAreaView
        style={{
-          height: '100%',
-          backgroundColor: colors.bg,
+          flex: 1,
          overflow: 'hidden'
        }}
      >
+        <SelectionHeader />
+        <Header title="Header" screen="Header" />
        {children}
      </SafeAreaView>
    </KeyboardAvoidingView>
--- a/apps/mobile/src/components/dialog/BaseDialog.js
+++ b/apps/mobile/src/components/dialog/BaseDialog.js
@@ -8,7 +8,7 @@ import {
  TouchableOpacity,
  View
 } from 'react-native';
-import { useSettingStore } from '../../stores/stores';
+import { useSettingStore } from '../../stores/use-setting-store';
 import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
 import { BouncingView } from '../ui/transitions/bouncing-view';

--- a/apps/mobile/src/components/dialog/DialogButtons.js
+++ b/apps/mobile/src/components/dialog/DialogButtons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import Paragraph from '../ui/typography/paragraph';
--- a/apps/mobile/src/components/dialog/DialogContainer.js
+++ b/apps/mobile/src/components/dialog/DialogContainer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import { getElevation } from '../../utils';

--- a/apps/mobile/src/components/dialog/DialogHeader.tsx
+++ b/apps/mobile/src/components/dialog/DialogHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import { PressableButtonProps } from '../ui/pressable';
--- a/apps/mobile/src/components/dialog/index.js
+++ b/apps/mobile/src/components/dialog/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import { getElevation } from '../../utils';
--- a/apps/mobile/src/components/dialogprovider/index.js
+++ b/apps/mobile/src/components/dialogprovider/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { EditorSettings } from '../../screens/editor/EditorSettings';
 import { AddNotebookSheet } from '../sheets/add-notebook';
 import { AddTopicDialog } from '../dialogs/add-topic';
--- a/apps/mobile/src/components/dialogs/addtopic/index.js
+++ b/apps/mobile/src/components/dialogs/addtopic/index.js
@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import { Keyboard, LayoutAnimation, UIManager, View } from 'react-native';
 import { Transition, Transitioning, TransitioningView } from 'react-native-reanimated';
-import { useMenuStore } from '../../../stores/stores';
+import { useMenuStore } from '../../../stores/use-menu-store';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { db } from '../../../utils/database';
@@ -54,11 +54,7 @@ export class AddTopicDialog extends React.Component {
      }
      this.setState({ loading: false });
      this.close();
-      Navigation.setRoutesToUpdate([
-        Navigation.routeNames.Notebooks,
-        Navigation.routeNames.Notebook,
-        Navigation.routeNames.NotesPage
-      ]);
+      Navigation.queueRoutesForUpdate('Notebooks', 'Notebook', 'TopicNotes');
      useMenuStore.getState().setMenuPins();
    } catch (e) {}
  };
--- a/apps/mobile/src/components/dialogs/jumptosection/index.js
+++ b/apps/mobile/src/components/dialogs/jumptosection/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMessageStore } from '../../../stores/stores';
+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 { getElevation } from '../../../utils';
--- a/apps/mobile/src/components/dialogs/result/ProFeatures.js
+++ b/apps/mobile/src/components/dialogs/result/ProFeatures.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { eSendEvent } from '../../../services/event-manager';
 import {
  eCloseProgressDialog,
--- a/apps/mobile/src/components/dialogs/result/index.js
+++ b/apps/mobile/src/components/dialogs/result/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { DDS } from '../../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/event-manager';
 import { getElevation } from '../../../utils';
--- a/apps/mobile/src/components/dialogs/vault/index.js
+++ b/apps/mobile/src/components/dialogs/vault/index.js
@@ -188,17 +188,15 @@ export class VaultDialog extends Component {
      });
      return;
    }
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.Notes,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Notebook
-    ]);
+
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'TopicNotes',
+      'TaggedNotes',
+      'ColoredNotes'
+    );
+
    this.password = null;
    this.confirmPassword = null;
    SearchService.updateAndSearch();
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -1,27 +1,27 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import SearchService from '../../services/search';
+import { useSelectionStore } from '../../stores/use-selection-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eScrollEvent } from '../../utils/events';
-import { IconButton } from '../ui/icon-button';
-import { SearchInput } from '../SearchInput';
 import { LeftMenus } from './left-menus';
 import { RightMenus } from './right-menus';
 import { Title } from './title';

 export const Header = React.memo(
-  ({ root, title, screen, isBack, color, action, rightButtons, notebook }) => {
+  () => {
    const colors = useThemeStore(state => state.colors);
    const insets = useSafeAreaInsets();
    const [hide, setHide] = useState(true);
+    const selectionMode = useSelectionStore(state => state.selectionMode);

    const onScroll = data => {
-      if (data.screen !== screen) return;
      if (data.y > 150) {
+        if (!hide) return;
        setHide(false);
      } else {
+        if (hide) return;
        setHide(true);
      }
    };
@@ -31,9 +31,9 @@ export const Header = React.memo(
      return () => {
        eUnSubscribeEvent(eScrollEvent, onScroll);
      };
-    }, []);
+    }, [hide]);

-    return (
+    return selectionMode ? null : (
      <View
        style={[
          styles.container,
@@ -48,22 +48,14 @@ export const Header = React.memo(
        ]}
      >
        <View style={styles.leftBtnContainer}>
-          <LeftMenus headerMenuState={!isBack} currentScreen={screen} />
-
-          <Title
-            notebook={notebook}
-            headerColor={color}
-            heading={title}
-            screen={screen}
-            root={root}
-          />
+          <LeftMenus />
+          <Title />
        </View>
-
-        <RightMenus rightButtons={rightButtons} action={action} currentScreen={screen} />
+        <RightMenus />
      </View>
    );
  },
-  (prev, next) => prev.title === next.title
+  () => true
 );

 const styles = StyleSheet.create({
--- a/apps/mobile/src/components/header/leftmenus.js
+++ b/apps/mobile/src/components/header/leftmenus.js
@@ -1,51 +1,50 @@
 import React from 'react';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
 import { DDS } from '../../services/device-detection';
 import Navigation from '../../services/navigation';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { IconButton } from '../ui/icon-button';

-export const LeftMenus = ({ currentScreen, headerMenuState }) => {
+export const LeftMenus = () => {
  const colors = useThemeStore(state => state.colors);
  const deviceMode = useSettingStore(state => state.deviceMode);
+  const canGoBack = useNavigationStore(state => state.canGoBack);
+  const isTablet = deviceMode === 'tablet';

  const onLeftButtonPress = () => {
-    if (headerMenuState) {
+    if (!canGoBack) {
      Navigation.openDrawer();
      return;
    }
    Navigation.goBack();
  };

-  return (
-    <>
-      {deviceMode !== 'tablet' || currentScreen === 'Search' || !headerMenuState ? (
-        <IconButton
-          testID={notesnook.ids.default.header.buttons.left}
-          customStyle={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: 40,
-            width: 40,
-            borderRadius: 100,
-            marginLeft: -5,
-            marginRight: DDS.isLargeTablet() ? 10 : 25
-          }}
-          left={40}
-          top={40}
-          right={DDS.isLargeTablet() ? 10 : 25}
-          onPress={onLeftButtonPress}
-          onLongPress={() => {
-            Navigation.popToTop();
-          }}
-          name={!headerMenuState ? 'arrow-left' : 'menu'}
-          color={colors.pri}
-          iconStyle={{
-            marginLeft: !headerMenuState ? -5 : 0
-          }}
-        />
-      ) : undefined}
-    </>
+  return isTablet ? null : (
+    <IconButton
+      testID={notesnook.ids.default.header.buttons.left}
+      customStyle={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 40,
+        width: 40,
+        borderRadius: 100,
+        marginLeft: -5,
+        marginRight: DDS.isLargeTablet() ? 10 : 25
+      }}
+      left={40}
+      top={40}
+      right={DDS.isLargeTablet() ? 10 : 25}
+      onPress={onLeftButtonPress}
+      onLongPress={() => {
+        Navigation.popToTop();
+      }}
+      name={canGoBack ? 'arrow-left' : 'menu'}
+      color={colors.pri}
+      iconStyle={{
+        marginLeft: canGoBack ? -5 : 0
+      }}
+    />
  );
 };
--- a/apps/mobile/src/components/header/rightmenus.js
+++ b/apps/mobile/src/components/header/rightmenus.js
@@ -2,24 +2,30 @@ import React, { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Menu from 'react-native-reanimated-material-menu';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
 import Navigation from '../../services/navigation';
+import SearchService from '../../services/search';
+import useNavigationStore from '../../stores/use-navigation-store';
+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 { IconButton } from '../ui/icon-button';

-export const RightMenus = ({ currentScreen, action, rightButtons }) => {
+export const RightMenus = () => {
  const colors = useThemeStore(state => state.colors);
  const deviceMode = useSettingStore(state => state.deviceMode);
+  const rightButtons = useNavigationStore(state => state.headerRightButtons);
+  const currentScreen = useNavigationStore(state => state.currentScreen.name);
  const menuRef = useRef();
+
  return (
    <View style={styles.rightBtnContainer}>
-      {currentScreen !== 'Settings' ? (
+      {!currentScreen.startsWith('Settings') ? (
        <IconButton
          onPress={async () => {
-            Navigation.navigate('Search', {
-              menu: false
+            SearchService.prepareSearch();
+            Navigation.navigate({
+              name: 'Search'
            });
          }}
          testID="icon-search"
@@ -31,7 +37,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {

      {deviceMode !== 'mobile' ? (
        <Button
-          onPress={action}
+          onPress={RightMenus.floatingButtonAction}
          testID={notesnook.ids.default.addBtn}
          icon={currentScreen === 'Trash' ? 'delete' : 'plus'}
          iconSize={SIZE.xl}
@@ -54,7 +60,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
        />
      ) : null}

-      {rightButtons ? (
+      {rightButtons && rightButtons.length > 0 ? (
        <Menu
          ref={menuRef}
          animationDuration={200}
@@ -67,7 +73,6 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
              onPress={() => {
                menuRef.current?.show();
              }}
-              //testID={notesnook.ids.default.header.buttons.left}
              name="dots-vertical"
              color={colors.pri}
              customStyle={styles.rightBtn}
@@ -87,7 +92,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
              }}
              key={item.title}
              title={item.title}
-              onPress={item.func}
+              onPress={item.onPress}
            />
          ))}
        </Menu>
@@ -96,6 +101,8 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
  );
 };

+RightMenus.floatingButtonAction = () => {};
+
 const styles = StyleSheet.create({
  rightBtnContainer: {
    flexDirection: 'row',
--- a/apps/mobile/src/components/header/title.js
+++ b/apps/mobile/src/components/header/title.js
@@ -1,51 +1,67 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import Animated, { Layout } from 'react-native-reanimated';
+import Notebook from '../../screens/notebook';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
-import { eOnNewTopicAdded, eScrollEvent } from '../../utils/events';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { db } from '../../utils/database';
+import { eScrollEvent } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';

-export const Title = ({ heading, headerColor, screen, notebook }) => {
+const titleState = {};
+
+export const Title = () => {
  const colors = useThemeStore(state => state.colors);
-  const [hide, setHide] = useState(screen === 'Notebook' ? true : false);
+  const currentScreen = useNavigationStore(state => state.currentScreen);
+  const isTopic = currentScreen.type === 'topic';
+  const [hide, setHide] = useState(isTopic ? true : false);
+  const isHidden = titleState[currentScreen.id];
+  const notebook = isTopic ? db.notebooks?.notebook(currentScreen.notebookId)?.data : null;
+  const title = currentScreen.title;
+  const isTag = title.slice(0, 1) === '#';

  const onScroll = data => {
-    if (screen !== 'Notebook') {
+    if (currentScreen.name !== 'Notebook') {
      setHide(false);
      return;
    }
    if (data.y > 150) {
+      if (!hide) return;
      setHide(false);
    } else {
+      if (hide) return;
      setHide(true);
    }
  };

+  useEffect(() => {
+    if (currentScreen.name === 'Notebook') {
+      let value =
+        typeof titleState[currentScreen.id] === 'boolean' ? titleState[currentScreen.id] : true;
+      setHide(value);
+    } else {
+      setHide(titleState[currentScreen.id]);
+    }
+  }, [currentScreen.id]);
+
+  useEffect(() => {
+    titleState[currentScreen.id] = hide;
+  }, [hide]);
+
  useEffect(() => {
    eSubscribeEvent(eScrollEvent, onScroll);
    return () => {
      eUnSubscribeEvent(eScrollEvent, onScroll);
    };
-  }, []);
+  }, [hide]);

  function navigateToNotebook() {
-    if (!notebook) return;
-    let routeName = 'Notebook';
-    let params = {
-      menu: false,
-      notebook: notebook,
-      title: notebook.title
-    };
-    let headerState = {
-      heading: notebook.title,
-      id: notebook.id,
-      type: notebook.type
-    };
-    eSendEvent(eOnNewTopicAdded, params);
-    Navigation.navigate(routeName, params, headerState);
+    if (!isTopic) return;
+    Notebook.navigate(notebook, true);
  }

  return (
@@ -56,24 +72,28 @@ export const Title = ({ heading, headerColor, screen, notebook }) => {
        flexDirection: 'row'
      }}
    >
-      {!hide ? (
+      {!hide && !isHidden ? (
        <Heading
          onPress={navigateToNotebook}
-          numberOfLines={notebook ? 2 : 1}
-          size={notebook ? SIZE.md + 2 : SIZE.xl}
+          numberOfLines={isTopic ? 2 : 1}
+          size={isTopic ? SIZE.md + 2 : SIZE.xl}
          style={{
            flexWrap: 'wrap'
          }}
-          color={headerColor}
+          color={currentScreen.color}
        >
-          {notebook ? (
+          {isTopic ? (
            <Paragraph numberOfLines={1} size={SIZE.xs + 1}>
              {notebook?.title}
              {'\n'}
            </Paragraph>
          ) : null}
-          <Heading color={colors.accent}>{heading.slice(0, 1) === '#' ? '#' : null}</Heading>
-          {heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
+          {isTag ? (
+            <Heading size={isTopic ? SIZE.md + 2 : SIZE.xl} color={colors.accent}>
+              #
+            </Heading>
+          ) : null}
+          {isTag ? title.slice(1) : title}
        </Heading>
      ) : null}
    </View>
--- a/apps/mobile/src/components/intro/index.js
+++ b/apps/mobile/src/components/intro/index.js
@@ -1,17 +1,16 @@
 import React, { useEffect } from 'react';
 import { Dimensions, Image, TouchableOpacity, useWindowDimensions, View } from 'react-native';
-import Animated, { Easing, timing, useValue } from 'react-native-reanimated';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
+import AppLock from '../../screens/settings/app-lock';
 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 '../../utils/analytics';
-import { MMKV } from '../../utils/database/mmkv';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
-import AppLock from '../../screens/settings/app-lock';
 import { Button } from '../ui/button';
 import { SvgView } from '../ui/svg';
 import { BouncingView } from '../ui/transitions/bouncing-view';
@@ -29,26 +28,9 @@ const Intro = () => {
  const isTelemetryEnabled = useSettingStore(state => state.settings.telemetry);
  const { height } = useWindowDimensions();

-  const opacity = useValue(0);
-  const translateY = useValue(5);
-  const translateY2 = useValue(0);
-  const insets = useSafeAreaInsets();
-
  useEffect(() => {
    if (!introCompleted) {
      umami.pageView('/welcome', '', []);
-      setTimeout(() => {
-        timing(opacity, {
-          toValue: 1,
-          duration: 600,
-          easing: Easing.in(Easing.ease)
-        }).start();
-        timing(translateY, {
-          toValue: 0,
-          duration: 1000,
-          easing: Easing.in(Easing.ease)
-        }).start();
-      }, 15);
    }
  }, [introCompleted]);

@@ -60,19 +42,14 @@ const Intro = () => {

  return (
    !introCompleted && (
-      <Animated.View
+      <View
        testID="notesnook.splashscreen"
        style={{
          zIndex: 999,
          width: '100%',
          height: '100%',
          position: 'absolute',
-          backgroundColor: colors.bg,
-          transform: [
-            {
-              translateY: translateY2
-            }
-          ]
+          backgroundColor: colors.bg
        }}
      >
        <SafeAreaView
@@ -85,21 +62,16 @@ const Intro = () => {
          }}
        >
          <Animated.View
+            layout={FadeIn.duration(500)}
            style={{
              width: '100%',
              height: '100%',
              justifyContent: 'center',
-              alignItems: 'center',
-              opacity: opacity,
-              transform: [
-                {
-                  translateY: translateY
-                }
-              ]
+              alignItems: 'center'
            }}
          >
            <Image
-              source={require('../../assets/images/notesnook-logo-png.png')}
+              source={require('../../assets/images/notesnook.png')}
              style={{
                width: 40,
                height: 40,
@@ -218,7 +190,7 @@ const Intro = () => {
            </BouncingView>
          </Animated.View>
        </SafeAreaView>
-      </Animated.View>
+      </View>
    )
  );
 };
--- a/apps/mobile/src/components/intro/welcome.js
+++ b/apps/mobile/src/components/intro/welcome.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import umami from '../../utils/analytics';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSendEvent } from '../../services/event-manager';
 import { getElevation } from '../../utils';
 import { eCloseProgressDialog, eOpenLoginDialog } from '../../utils/events';
--- a/apps/mobile/src/components/launcher/index.js
+++ b/apps/mobile/src/components/launcher/index.js
@@ -2,23 +2,22 @@ import React, { useEffect, useRef, useState } from 'react';
 import { NativeModules, Platform, StatusBar, View } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
 import { checkVersion } from 'react-native-check-version';
+import { editorState } from '../../screens/editor/tiptap/utils';
 import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
+import BackupService from '../../services/backup';
 import BiometricService from '../../services/biometrics';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import { setRateAppMessage } from '../../services/message';
 import PremiumService from '../../services/premium';
 import SettingsService from '../../services/settings';
-import {
-  initialize,
-  useFavoriteStore,
-  useMessageStore,
-  useNoteStore,
-  useSettingStore,
-  useUserStore
-} from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
-import { editing } from '../../utils';
+import { initialize } from '../../stores';
+import { useFavoriteStore } from '../../stores/use-favorite-store';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useNoteStore } from '../../stores/use-notes-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { db } from '../../utils/database';
 import { MMKV } from '../../utils/database/mmkv';
 import { eOpenAnnouncementDialog } from '../../utils/events';
@@ -27,6 +26,7 @@ import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
 import { SVG } from '../auth/background';
 import Intro from '../intro';
+import NewFeature from '../sheets/new-feature/index';
 import { Update } from '../sheets/update';
 import { Button } from '../ui/button';
 import { IconButton } from '../ui/icon-button';
@@ -36,8 +36,6 @@ import { SvgView } from '../ui/svg';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
 import { Walkthrough } from '../walkthroughs';
-import NewFeature from '../sheets/new-feature/index';
-import { editorState } from '../../screens/editor/tiptap/utils';

 const Launcher = React.memo(
  () => {
@@ -52,9 +50,10 @@ const Launcher = React.memo(
    const deviceMode = useSettingStore(state => state.deviceMode);
    const passwordInputRef = useRef();
    const password = useRef();
+    const introCompleted = SettingsService.get().introCompleted;
    const [requireIntro, setRequireIntro] = useState({
-      updated: false,
-      value: false
+      updated: introCompleted,
+      value: !introCompleted
    });
    const dbInitCompleted = useRef(false);

@@ -63,18 +62,20 @@ const Launcher = React.memo(
        return;
      }
      await restoreEditorState();
-      await db.notes.init();
-      setNotes();
-      setFavorites();
-      setLoading(false);
-      Walkthrough.init();
+      setImmediate(() => {
+        db.notes.init().then(() => {
+          setNotes();
+          setFavorites();
+          setLoading(false);
+          Walkthrough.init();
+        });
+      });
    };

    const init = async () => {
      if (!dbInitCompleted.current) {
        await db.init();
        initialize();
-        useUserStore.getState().setUser(await db.user.getUser());
        dbInitCompleted.current = true;
      }

@@ -84,7 +85,7 @@ const Launcher = React.memo(
    };

    const hideSplashScreen = async () => {
-      await sleep(requireIntro.value ? 500 : 0);
+      if (requireIntro.value) await sleep(500);
      await RNBootSplash.hide({ fade: true });
      setTimeout(async () => {
        if (Platform.OS === 'android') {
@@ -100,22 +101,22 @@ const Launcher = React.memo(
        } else {
          StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
        }
-      }, 500);
+      }, 1000);
    };

    useEffect(() => {
+      console.log('hide splash', requireIntro.updated);
      if (requireIntro.updated) {
        hideSplashScreen();
+        return;
      }
-    }, [requireIntro, verifyUser]);
-
-    useEffect(() => {
      let introCompleted = SettingsService.get().introCompleted;
+      console.log(requireIntro);
      setRequireIntro({
        updated: true,
        value: !introCompleted
      });
-    }, []);
+    }, [requireIntro, verifyUser]);

    useEffect(() => {
      if (!loading) {
@@ -139,6 +140,16 @@ const Launcher = React.memo(
      if (await checkNeedsBackup()) return;
      if (await PremiumService.getRemainingTrialDaysStatus()) return;
      await useMessageStore.getState().setAnnouncement();
+
+      if (PremiumService.get() && user) {
+        if (SettingsService.get().reminder === 'off') {
+          SettingsService.set({ reminder: 'daily' });
+        }
+        if (BackupService.checkBackupRequired()) {
+          sleep(2000).then(() => BackupService.checkAndRun());
+        }
+      }
+
      if (!requireIntro?.value) {
        useMessageStore.subscribe(state => {
          let dialogs = state.dialogs;
@@ -164,7 +175,7 @@ const Launcher = React.memo(
    };

    const restoreEditorState = async () => {
-      let appState = await MMKV.getItem('appState');
+      let appState = MMKV.getString('appState');
      if (appState) {
        appState = JSON.parse(appState);
        if (
--- a/apps/mobile/src/components/list/card.js
+++ b/apps/mobile/src/components/list/card.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useMessageStore, useSelectionStore } from '../../stores/stores';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { hexToRGBA } from '../../utils/color-scheme/utils';
 import { SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';
@@ -11,80 +11,84 @@ import Paragraph from '../ui/typography/paragraph';
 export const Card = ({ color, warning }) => {
  const colors = useThemeStore(state => state.colors);
  color = color ? color : colors.accent;
-
-  const selectionMode = useSelectionStore(state => state.selectionMode);
  const messageBoardState = useMessageStore(state => state.message);
  const announcement = useMessageStore(state => state.announcement);

-  return !messageBoardState.visible || selectionMode || announcement || warning ? null : (
-    <PressableButton
-      onPress={messageBoardState.onPress}
-      type="gray"
-      customStyle={{
-        paddingVertical: 12,
-        width: '95%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        paddingHorizontal: 0
+  return !messageBoardState.visible || announcement || warning ? null : (
+    <View
+      style={{
+        width: '95%'
      }}
    >
-      <View
-        style={{
-          width: 40,
-          backgroundColor:
-            messageBoardState.type === 'error'
-              ? hexToRGBA(colors.red, 0.15)
-              : hexToRGBA(color, 0.15),
-          height: 40,
-          marginLeft: 10,
-          borderRadius: 100,
+      <PressableButton
+        onPress={messageBoardState.onPress}
+        type="gray"
+        customStyle={{
+          paddingVertical: 12,
+          width: '95%',
+          flexDirection: 'row',
          alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'flex-start',
+          paddingHorizontal: 0
        }}
      >
-        <Icon
-          size={SIZE.lg}
-          color={messageBoardState.type === 'error' ? colors.errorText : color}
-          name={messageBoardState.icon}
-        />
-      </View>
-
-      <View
-        style={{
-          marginLeft: 10,
-          maxWidth: '70%'
-        }}
-      >
-        <Paragraph color={colors.icon} size={SIZE.xs}>
-          {messageBoardState.message}
-        </Paragraph>
-        <Paragraph
+        <View
          style={{
-            maxWidth: '100%'
+            width: 40,
+            backgroundColor:
+              messageBoardState.type === 'error'
+                ? hexToRGBA(colors.red, 0.15)
+                : hexToRGBA(color, 0.15),
+            height: 40,
+            marginLeft: 10,
+            borderRadius: 100,
+            alignItems: 'center',
+            justifyContent: 'center'
          }}
-          color={colors.heading}
        >
-          {messageBoardState.actionText}
-        </Paragraph>
-      </View>
+          <Icon
+            size={SIZE.lg}
+            color={messageBoardState.type === 'error' ? colors.errorText : color}
+            name={messageBoardState.icon}
+          />
+        </View>

-      <View
-        style={{
-          width: 40,
-          height: 40,
-          justifyContent: 'center',
-          alignItems: 'center',
-          position: 'absolute',
-          right: 6
-        }}
-      >
-        <Icon
-          name="chevron-right"
-          color={messageBoardState.type === 'error' ? colors.red : color}
-          size={SIZE.lg}
-        />
-      </View>
-    </PressableButton>
+        <View
+          style={{
+            marginLeft: 10,
+            maxWidth: '70%'
+          }}
+        >
+          <Paragraph color={colors.icon} size={SIZE.xs}>
+            {messageBoardState.message}
+          </Paragraph>
+          <Paragraph
+            style={{
+              maxWidth: '100%'
+            }}
+            color={colors.heading}
+          >
+            {messageBoardState.actionText}
+          </Paragraph>
+        </View>
+
+        <View
+          style={{
+            width: 40,
+            height: 40,
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            right: 6
+          }}
+        >
+          <Icon
+            name="chevron-right"
+            color={messageBoardState.type === 'error' ? colors.red : color}
+            size={SIZE.lg}
+          />
+        </View>
+      </PressableButton>
+    </View>
  );
 };
--- a/apps/mobile/src/components/list/empty.js
+++ b/apps/mobile/src/components/list/empty.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { useTip } from '../../services/tip-manager';
 import { COLORS_NOTE } from '../../utils/color-scheme';
 import { SIZE } from '../../utils/size';
--- a/apps/mobile/src/components/list/index.js
+++ b/apps/mobile/src/components/list/index.js
@@ -1,20 +1,21 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { FlatList, RefreshControl, View } from 'react-native';
+import { RefreshControl, View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
 import { eSendEvent } from '../../services/event-manager';
 import Sync from '../../services/sync';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eScrollEvent } from '../../utils/events';
+import { tabBarRef } from '../../utils/global-refs';
 import JumpToSectionDialog from '../dialogs/jump-to-section';
-import { NotebookWrapper } from '../list-items/notebook/wrapper';
-import { NoteWrapper } from '../list-items/note/wrapper';
-import TagItem from '../list-items/tag';
-import { Empty } from './empty';
 import { Footer } from '../list-items/footer';
 import { Header } from '../list-items/headers/header';
 import { SectionHeader } from '../list-items/headers/section-header';
+import { NoteWrapper } from '../list-items/note/wrapper';
+import { NotebookWrapper } from '../list-items/notebook/wrapper';
+import TagItem from '../list-items/tag';
+import { Empty } from './empty';

 const renderItems = {
  note: NoteWrapper,
@@ -55,7 +56,8 @@ const List = ({
  placeholderData,
  loading,
  headerProps = {
-    heading: 'Home'
+    heading: 'Home',
+    color: null
  },
  screen,
  ListHeader,
@@ -64,7 +66,6 @@ const List = ({
  const colors = useThemeStore(state => state.colors);
  const scrollRef = useRef();
  const [_loading, _setLoading] = useState(true);
-  const syncing = useUserStore(state => state.syncing);

  useEffect(() => {
    let timeout = null;
@@ -127,7 +128,7 @@ const List = ({

  return (
    <>
-      <FlatList
+      <Animated.FlatList
        style={styles}
        keyExtractor={_keyExtractor}
        ref={scrollRef}
@@ -135,6 +136,9 @@ const List = ({
        data={_loading ? listData.slice(0, 9) : listData}
        renderItem={renderItem}
        onScroll={_onScroll}
+        onMomentumScrollEnd={() => {
+          tabBarRef.current?.unlock();
+        }}
        initialNumToRender={10}
        maxToRenderPerBatch={10}
        keyboardShouldPersistTaps="always"
@@ -145,7 +149,7 @@ const List = ({
            colors={[colors.accent]}
            progressBackgroundColor={colors.nav}
            onRefresh={_onRefresh}
-            refreshing={syncing}
+            refreshing={false}
          />
        }
        ListEmptyComponent={
@@ -165,9 +169,6 @@ const List = ({
            ) : (
              <Header
                title={headerProps.heading}
-                paragraph={headerProps.paragraph}
-                onPress={headerProps.onPress}
-                icon={headerProps.icon}
                color={headerProps.color}
                type={type}
                screen={screen}
--- a/apps/mobile/src/components/listitems/headers/header.js
+++ b/apps/mobile/src/components/listitems/headers/header.js
@@ -1,20 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMessageStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useMessageStore } from '../../../stores/use-message-store';
 import { COLORS_NOTE } from '../../../utils/color-scheme';
 import { Announcement } from '../../announcements/announcement';
 import { Card } from '../../list/card';
 import Paragraph from '../../ui/typography/paragraph';
-
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { SIZE } from '../../../utils/size';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import Animated, { FadeInUp, FadeOutUp } from 'react-native-reanimated';
 export const Header = React.memo(
  ({ type, messageCard = true, color, shouldShow = false, noAnnouncement, warning }) => {
    const colors = useThemeStore(state => state.colors);
    const announcements = useMessageStore(state => state.announcements);
+    const selectionMode = useSelectionStore(state => state.selectionMode);

-    return (
+    return selectionMode ? null : (
      <>
        {warning ? (
          <View
@@ -36,7 +38,9 @@ export const Header = React.memo(
        ) : announcements.length !== 0 && !noAnnouncement ? (
          <Announcement color={color || colors.accent} />
        ) : type === 'search' ? null : !shouldShow ? (
-          <View
+          <Animated.View
+            entering={FadeInUp.delay(500)}
+            exiting={FadeOutUp}
            style={{
              marginBottom: 5,
              padding: 0,
@@ -48,7 +52,7 @@ export const Header = React.memo(
            {messageCard ? (
              <Card color={COLORS_NOTE[color?.toLowerCase()] || colors.accent} />
            ) : null}
-          </View>
+          </Animated.View>
        ) : null}
      </>
    );
--- a/apps/mobile/src/components/listitems/headers/notebookheader.js
+++ b/apps/mobile/src/components/listitems/headers/notebookheader.js
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMenuStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useMenuStore } from '../../../stores/use-menu-store';
 import { ToastEvent } from '../../../services/event-manager';
 import { getTotalNotes } from '../../../utils';
 import { db } from '../../../utils/database';
--- a/apps/mobile/src/components/listitems/headers/sectionheader.js
+++ b/apps/mobile/src/components/listitems/headers/sectionheader.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useSettingStore } from '../../../stores/use-setting-store';
 import {
  eSendEvent,
  eSubscribeEvent,
--- a/apps/mobile/src/components/listitems/note/index.js
+++ b/apps/mobile/src/components/listitems/note/index.js
@@ -3,80 +3,62 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
-import { eSendEvent } from '../../../services/event-manager';
-import Navigation from '../../../services/navigation';
+import { TaggedNotes } from '../../../screens/notes/tagged';
+import { TopicNotes } from '../../../screens/notes/topic-notes';
+import { useSettingStore } from '../../../stores/use-setting-store';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { COLORS_NOTE } from '../../../utils/color-scheme';
 import { db } from '../../../utils/database';
-import { refreshNotesPage } from '../../../utils/events';
 import { SIZE } from '../../../utils/size';
-import { IconButton } from '../../ui/icon-button';
-import { Button } from '../../ui/button';
-import { TimeSince } from '../../ui/time-since';
 import { Properties } from '../../properties';
+import { Button } from '../../ui/button';
+import { IconButton } from '../../ui/icon-button';
+import { TimeSince } from '../../ui/time-since';
 import Heading from '../../ui/typography/heading';
 import Paragraph from '../../ui/typography/paragraph';

 const navigateToTopic = topic => {
-  let routeName = 'NotesPage';
-  let params = { ...topic, menu: false, get: 'topics' };
-  let headerState = {
-    heading: topic.title,
-    id: topic.id,
-    type: topic.type
-  };
-  eSendEvent(refreshNotesPage, params);
-  Navigation.navigate(routeName, params, headerState);
+  TopicNotes.navigate(topic, true);
 };

 function navigateToTag(item) {
-  let _tag = db.tags.tag(item.id);
-  if (!_tag) return;
-  let params = {
-    ..._tag,
-    type: 'tag',
-    get: 'tagged'
-  };
-
-  eSendEvent(refreshNotesPage, params);
-  Navigation.navigate('NotesPage', params, {
-    heading: '#' + _tag.title,
-    id: _tag.id,
-    type: _tag.type
-  });
+  const tag = db.tags.tag(item.id);
+  if (!tag) return;
+  TaggedNotes.navigate(tag, true);
 }

 const showActionSheet = item => {
  Properties.present(item);
 };

+function getNotebook(item) {
+  const isTrash = item.type === 'trash';
+  if (isTrash || !item.notebooks || item.notebooks.length < 1) return [];
+  let item_notebook = item.notebooks?.slice(0, 1)[0];
+  let notebook = db.notebooks.notebook(item_notebook.id);
+
+  if (!notebook) return [];
+  let topic = notebook.topics.topic(item_notebook.topics[0])?._topic;
+
+  if (!topic) return [];
+
+  notebook = notebook.data;
+
+  return [
+    {
+      title: `${notebook?.title} › ${topic?.title}`,
+      notebook: notebook,
+      topic: topic
+    }
+  ];
+}
+
 const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false }) => {
  const colors = useThemeStore(state => state.colors);
  const notesListMode = useSettingStore(state => state.settings.notesListMode);
  const compactMode = notesListMode === 'compact';
  const attachmentCount = db.attachments?.ofNote(item.id, 'all')?.length || 0;
-
-  function getNotebook() {
-    if (isTrash || !item.notebooks || item.notebooks.length < 1) return [];
-    let item_notebook = item.notebooks?.slice(0, 1)[0];
-    let notebook = db.notebooks.notebook(item_notebook.id);
-
-    if (!notebook) return [];
-    let topic = notebook.topics.topic(item_notebook.topics[0])?._topic;
-
-    if (!topic) return [];
-
-    notebook = notebook.data;
-
-    return [
-      {
-        title: `${notebook?.title} › ${topic?.title}`,
-        notebook: notebook,
-        topic: topic
-      }
-    ];
-  }
+  const notebooks = React.useMemo(() => getNotebook(item), [item]);

  return (
    <>
@@ -96,7 +78,7 @@ const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false
              marginBottom: 2.5
            }}
          >
-            {getNotebook().map(_item => (
+            {notebooks.map(_item => (
              <Button
                title={_item.title}
                key={_item}
--- a/apps/mobile/src/components/listitems/note/wrapper.js
+++ b/apps/mobile/src/components/listitems/note/wrapper.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import NoteItem from '.';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useEditorStore, useSelectionStore, useTrashStore } from '../../../stores/stores';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useTrashStore } from '../../../stores/use-trash-store';
+import { useEditorStore } from '../../../stores/use-editor-store';
 import { DDS } from '../../../services/device-detection';
 import { eSendEvent, openVault, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
@@ -66,14 +68,16 @@ export const openNote = async (item, isTrash, setSelectedItem) => {
      negativeText: 'Delete',
      positivePress: async () => {
        await db.trash.restore(item.id);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Tags,
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.Notebooks,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites,
-          Navigation.routeNames.Trash
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Tags',
+          'Notes',
+          'Notebooks',
+          'Favorites',
+          'Trash',
+          'TaggedNotes',
+          'ColoredNotes',
+          'TopicNotes'
+        );
        useSelectionStore.getState().setSelectionMode(false);
        ToastEvent.show({
          heading: 'Restore successful',
--- a/apps/mobile/src/components/listitems/notebook/index.js
+++ b/apps/mobile/src/components/listitems/notebook/index.js
@@ -2,41 +2,32 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
-import { eSendEvent } from '../../../services/event-manager';
-import Navigation from '../../../services/navigation';
+import { TopicNotes } from '../../../screens/notes/topic-notes';
+import { useSettingStore } from '../../../stores/use-setting-store';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { getTotalNotes, history } from '../../../utils';
-import { refreshNotesPage } from '../../../utils/events';
 import { SIZE } from '../../../utils/size';
-import { IconButton } from '../../ui/icon-button';
-import { Button } from '../../ui/button';
 import { Properties } from '../../properties';
+import { Button } from '../../ui/button';
+import { IconButton } from '../../ui/icon-button';
 import Heading from '../../ui/typography/heading';
 import Paragraph from '../../ui/typography/paragraph';

+const showActionSheet = item => {
+  Properties.present(item);
+};
+
+const navigateToTopic = topic => {
+  if (history.selectedItemsList.length > 0) return;
+  TopicNotes.navigate(topic, true);
+};
+
 export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateBy }) => {
  const colors = useThemeStore(state => state.colors);
  const notebooksListMode = useSettingStore(state => state.settings.notebooksListMode);
  const compactMode = notebooksListMode === 'compact';
  const topics = item.topics?.slice(0, 3) || [];
  const totalNotes = getTotalNotes(item);
-  const showActionSheet = () => {
-    Properties.present(item);
-  };
-
-  const navigateToTopic = topic => {
-    if (history.selectedItemsList.length > 0) return;
-    let routeName = 'NotesPage';
-    let params = { ...topic, menu: false, get: 'topics' };
-    let headerState = {
-      heading: topic.title,
-      id: topic.id,
-      type: topic.type
-    };
-    eSendEvent(refreshNotesPage, params);
-    Navigation.navigate(routeName, params, headerState);
-  };

  return (
    <>
@@ -190,7 +181,7 @@ export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateB
        name="dots-horizontal"
        testID={notesnook.ids.notebook.menu}
        size={SIZE.xl}
-        onPress={showActionSheet}
+        onPress={() => showActionSheet(item)}
        customStyle={{
          justifyContent: 'center',
          height: 35,
--- a/apps/mobile/src/components/listitems/notebook/wrapper.js
+++ b/apps/mobile/src/components/listitems/notebook/wrapper.js
@@ -1,90 +1,78 @@
 import React from 'react';
 import { NotebookItem } from '.';
-import { eSendEvent, ToastEvent } from '../../../services/event-manager';
+import Notebook from '../../../screens/notebook';
+import { TopicNotes } from '../../../screens/notes/topic-notes';
+import { ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
-import { useSelectionStore, useTrashStore } from '../../../stores/stores';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useTrashStore } from '../../../stores/use-trash-store';
 import { history } from '../../../utils';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../../utils/events';
+import { db } from '../../../utils/database';
 import { presentDialog } from '../../dialog/functions';
 import SelectionWrapper from '../selection-wrapper';
-import { db } from '../../../utils/database';
+
+export const openNotebookTopic = item => {
+  const isTrash = item.type === 'trash';
+  if (history.selectedItemsList.length > 0 && history.selectionMode) {
+    useSelectionStore.getState().setSelectedItem(item);
+    return;
+  } else {
+    history.selectedItemsList = [];
+  }
+
+  if (isTrash) {
+    presentDialog({
+      title: `Restore ${item.itemType}`,
+      paragraph: `Restore or delete ${item.itemType} forever`,
+      positiveText: 'Restore',
+      negativeText: 'Delete',
+      positivePress: async () => {
+        await db.trash.restore(item.id);
+        Navigation.queueRoutesForUpdate(
+          'Tags',
+          'Notes',
+          'Notebooks',
+          'Favorites',
+          'Trash',
+          'TaggedNotes',
+          'ColoredNotes',
+          'TopicNotes'
+        );
+        useSelectionStore.getState().setSelectionMode(false);
+        ToastEvent.show({
+          heading: 'Restore successful',
+          type: 'success'
+        });
+      },
+      onClose: async () => {
+        await db.trash.delete(item.id);
+        useTrashStore.getState().setTrash();
+        useSelectionStore.getState().setSelectionMode(false);
+        ToastEvent.show({
+          heading: 'Permanantly deleted items',
+          type: 'success',
+          context: 'local'
+        });
+      }
+    });
+    return;
+  }
+  if (item.type === 'topic') {
+    TopicNotes.navigate(item, true);
+  } else {
+    Notebook.navigate(item, true);
+  }
+};

 export const NotebookWrapper = React.memo(
  ({ item, index, dateBy }) => {
    const isTrash = item.type === 'trash';
-    const setSelectedItem = useSelectionStore(state => state.setSelectedItem);

-    const onPress = () => {
-      if (history.selectedItemsList.length > 0 && history.selectionMode) {
-        setSelectedItem(item);
-        return;
-      } else {
-        history.selectedItemsList = [];
-      }
-
-      if (isTrash) {
-        presentDialog({
-          title: `Restore ${item.itemType}`,
-          paragraph: `Restore or delete ${item.itemType} forever`,
-          positiveText: 'Restore',
-          negativeText: 'Delete',
-          positivePress: async () => {
-            await db.trash.restore(item.id);
-            Navigation.setRoutesToUpdate([
-              Navigation.routeNames.Tags,
-              Navigation.routeNames.Notes,
-              Navigation.routeNames.Notebooks,
-              Navigation.routeNames.NotesPage,
-              Navigation.routeNames.Favorites,
-              Navigation.routeNames.Trash
-            ]);
-            useSelectionStore.getState().setSelectionMode(false);
-            ToastEvent.show({
-              heading: 'Restore successful',
-              type: 'success'
-            });
-          },
-          onClose: async () => {
-            await db.trash.delete(item.id);
-            useTrashStore.getState().setTrash();
-            useSelectionStore.getState().setSelectionMode(false);
-            ToastEvent.show({
-              heading: 'Permanantly deleted items',
-              type: 'success',
-              context: 'local'
-            });
-          }
-        });
-        return;
-      }
-
-      let routeName = item.type === 'topic' ? 'NotesPage' : 'Notebook';
-
-      let params =
-        item.type === 'topic'
-          ? { ...item, menu: false }
-          : {
-              menu: false,
-              notebook: item,
-              title: item.title
-            };
-      let headerState = {
-        heading: item.title,
-        id: item.id,
-        type: item.type
-      };
-      if (item.type === 'topic') {
-        eSendEvent(refreshNotesPage, params);
-      } else {
-        eSendEvent(eOnNewTopicAdded, params);
-      }
-      Navigation.navigate(routeName, params, headerState);
-    };
    return (
      <SelectionWrapper
        pinned={item.pinned}
        index={index}
-        onPress={onPress}
+        onPress={() => openNotebookTopic(item)}
        height={item.type === 'topic' ? 80 : 110}
        item={item}
      >
--- a/apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js
+++ b/apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js
@@ -1,22 +1,20 @@
+import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
-import Animated, { useValue } from 'react-native-reanimated';
-import { useThemeStore } from '../../../stores/theme';
-import {
-  useMenuStore,
-  useNotebookStore,
-  useSelectionStore,
-  useTrashStore
-} from '../../../stores/stores';
+import Animated, { SlideInUp, SlideOutDown } from 'react-native-reanimated';
 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 { useThemeStore } from '../../../stores/use-theme-store';
 import { dWidth, getElevation, toTXT } from '../../../utils';
 import { db } from '../../../utils/database';
 import { deleteItems } from '../../../utils/functions';
-import { IconButton } from '../../ui/icon-button';
-import { Button } from '../../ui/button';
 import { presentDialog } from '../../dialog/functions';
+import { Button } from '../../ui/button';
+import { IconButton } from '../../ui/icon-button';

 export const ActionStrip = ({ note, setActionStrip }) => {
  const colors = useThemeStore(state => state.colors);
@@ -28,29 +26,21 @@ export const ActionStrip = ({ note, setActionStrip }) => {

  const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
  const [width, setWidth] = useState(dWidth - 16);
-  const opacity = useValue(0);
  useEffect(() => {
    if (note.type === 'note') return;
    setIsPinnedToMenu(db.settings.isPinned(note.id));
  }, []);

  const updateNotes = () => {
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
  };

-  useEffect(() => {
-    setTimeout(() => {
-      opacity.setValue(1);
-    }, 100);
-    return () => {
-      opacity.setValue(0);
-    };
-  }, [width]);
-
  const actions = [
    {
      title: 'Pin ' + note.type,
@@ -164,13 +154,15 @@ export const ActionStrip = ({ note, setActionStrip }) => {
      icon: 'delete-restore',
      onPress: async () => {
        await db.trash.restore(note.id);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.Notebooks,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites,
-          Navigation.routeNames.Trash
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Notes',
+          'Favorites',
+          'ColoredNotes',
+          'TaggedNotes',
+          'TopicNotes',
+          'Trash',
+          'Notebooks'
+        );

        ToastEvent.show({
          heading:
@@ -233,15 +225,16 @@ export const ActionStrip = ({ note, setActionStrip }) => {
      onLayout={event => {
        setWidth(event.nativeEvent.layout.width);
      }}
+      entering={SlideInUp.springify().mass(0.4)}
+      exiting={SlideOutDown}
      style={{
        position: 'absolute',
-        zIndex: 20,
+        zIndex: 999,
        width: '102%',
        height: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-end',
-        alignItems: 'center',
-        opacity: opacity
+        alignItems: 'center'
      }}
    >
      <Button
--- a/Show More
+++ b/Show More