improve navigation performance

apps/mobile/android/app/proguard-rules.pro

@@ -28,4 +28,13 @@
 # Samsung Fingerprint
 
 -keep class com.samsung.android.sdk.** { *; }
--dontwarn com.samsung.android.sdk.**
+-dontwarn com.samsung.android.sdk.**
+
+-keep public class com.dylanvann.fastimage.* {*;}
+-keep public class com.dylanvann.fastimage.** {*;}
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}

apps/mobile/index.js

@@ -2,7 +2,8 @@ import 'react-native-gesture-handler';
 import React from 'react';
 import {AppRegistry} from 'react-native';
 import {name as appName} from './app.json';
-
+import { enableScreens } from 'react-native-screens';
+enableScreens(true);
 let Provider;
 let App;
 let NotesnookShare;

apps/mobile/ios/Notesnook.xcodeproj/project.pbxproj

@@ -1147,8 +1147,8 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Notesnook/Notesnook.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_IDENTITY = "Apple Development";
-				CODE_SIGN_STYLE = Manual;
+				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1340;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
@@ -1228,7 +1228,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook;
 				PRODUCT_NAME = Notesnook;
-				PROVISIONING_PROFILE_SPECIFIER = "Notesnook iOS Distribution";
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Notesnook-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -1476,8 +1476,8 @@
 				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
-				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_IDENTITY = "Apple Development";
-				CODE_SIGN_STYLE = Manual;
+				CODE_SIGN_STYLE = Automatic;
 				COPY_PHASE_STRIP = NO;
 				CURRENT_PROJECT_VERSION = 1340;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
@@ -1556,7 +1556,7 @@
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";
-				PROVISIONING_PROFILE_SPECIFIER = "Notesnook Extension iOS Distribution 2";
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				SKIP_INSTALL = YES;
 				SWIFT_OBJC_BRIDGING_HEADER = "Make Note/Make Note-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;

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

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { Header } from '../Header';
 
-export const ContainerTopSection = ({root}) => {
+export const ContainerTopSection = ({children}) => {
   const [state] = useTracked();
   const {colors, selectionMode} = state;
 
@@ -20,7 +20,7 @@ export const ContainerTopSection = ({root}) => {
           },
         ],
       }}>
-      <Header root={root} />
+      {children}
     </View>
   );
 };

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import {KeyboardAvoidingView, Platform, SafeAreaView} from 'react-native';
+import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTracked } from '../../provider';
-import { getElevation } from '../../utils';
 import { ContainerScale } from '../../utils/Animations';
 import SelectionHeader from '../SelectionHeader';
-import {ContainerTopSection} from './ContainerTopSection';
+import { ContainerTopSection } from './ContainerTopSection';
 const AnimatedView = Animated.createAnimatedComponent(SafeAreaView);
 export const Container = ({children, root}) => {
   const [state] = useTracked();
@@ -30,8 +29,7 @@ export const Container = ({children, root}) => {
             }
           ]
         }}>
-        <SelectionHeader />
+      
-        <ContainerTopSection root={root} />
         {children}
       </AnimatedView>
     </KeyboardAvoidingView>

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

@@ -379,7 +379,7 @@ export class DialogManager extends Component {
         <VaultDialog colors={colors} />
         <MoveNoteDialog colors={colors} />
         <SortDialog colors={colors} />
-        <JumpToDialog />
+        
         <UpdateDialog />
         <RateDialog/>
       </>

apps/mobile/src/components/Header/HeaderLeftMenu.js

@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import {notesnook} from '../../../e2e/test.ids';
+import { notesnook } from '../../../e2e/test.ids';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import {SIZE} from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/SizeUtils';
-import {ActionIcon} from '../ActionIcon';
+import { ActionIcon } from '../ActionIcon';
 
 export const HeaderLeftMenu = ({currentScreen,headerMenuState}) => {
   const [state] = useTracked();

apps/mobile/src/components/Header/HeaderRightMenu.js

@@ -1,19 +1,17 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
-import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import {notesnook} from '../../../e2e/test.ids';
+import { notesnook } from '../../../e2e/test.ids';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import {DDS} from '../../services/DeviceDetection';
+import { DDS } from '../../services/DeviceDetection';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import {dWidth} from '../../utils';
+import { SIZE } from '../../utils/SizeUtils';
-import {SIZE} from '../../utils/SizeUtils';
+import { ActionIcon } from '../ActionIcon';
-import {ActionIcon} from '../ActionIcon';
+import { Button } from '../Button';
-import {Button} from '../Button';
 
 export const HeaderRightMenu = ({currentScreen}) => {
   const [state] = useTracked();
-  const {colors, containerBottomButton, syncing} = state;
+  const {colors, syncing} = state;
- 
+
   return (
     <View style={styles.rightBtnContainer}>
       {syncing && <ActivityIndicator size={SIZE.xl} color={colors.accent} />}
@@ -33,11 +31,9 @@ export const HeaderRightMenu = ({currentScreen}) => {
         />
       )}
 
-      {DDS.isLargeTablet() && containerBottomButton.onPress ? (
+      {DDS.isLargeTablet() ? (
         <Button
-          onPress={() => {
+          onPress={action}
-            containerBottomButton.onPress();
-          }}
           testID={notesnook.ids.default.addBtn}
           icon={currentScreen === 'Trash' ? 'delete' : 'plus'}
           iconSize={SIZE.xl}

apps/mobile/src/components/Header/HeaderTitle.js

@@ -1,50 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { useValue } from 'react-native-reanimated';
 import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
 import { eScrollEvent } from '../../utils/Events';
 import Heading from '../Typography/Heading';
 
-const opacity = new Animated.Value(DDS.isLargeTablet() ? 1 : 0);
 
-let scrollPostions = {};
+export const HeaderTitle = ({heading,headerColor,screen}) => {
-
-export const HeaderTitle = ({heading,headerColor}) => {
   const [state] = useTracked();
   const {colors} = state;
- 
+  const opacity = useValue(DDS.isLargeTablet() ? 1 : 0)
 
-  const onScroll = async (y) => {
+  const onScroll = async (data) => {
+    if (data.screen !== screen) return;
     if (DDS.isTab) return;
-    if (typeof y !== 'number') {
+    if (data.y > 75) {
-      if (y.type === 'back') {
+      let yVal = data.y - 75;
-        scrollPostions[y.name] = null;
-        return;
-      }
-      if (scrollPostions[y.name]) {
-        if (scrollPostions[y.name] > 200) {
-          opacity.setValue(1);
-        } else {
-          scrollPostions[y.name] = 0;
-          opacity.setValue(0);
-        }
-      } else {
-        scrollPostions[y.name] = 0;
-        opacity.setValue(0);
-      }
-      return;
-    }
-
-    if (y > 75) {
-      let yVal = y - 75;
       o = yVal / 75;
       opacity.setValue(o);
     } else {
       opacity.setValue(0);
     }
-    scrollPostions[heading] = y;
   };
 
   useEffect(() => {

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

@@ -3,7 +3,6 @@ import {Platform, StyleSheet, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTracked} from '../../provider';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import {dWidth} from '../../utils';
 import {eScrollEvent} from '../../utils/Events';
@@ -14,109 +13,92 @@ import {HeaderLeftMenu} from './HeaderLeftMenu';
 import {HeaderRightMenu} from './HeaderRightMenu';
 import {HeaderTitle} from './HeaderTitle';
 
-export const Header = ({root}) => {
+export const Header = React.memo(
-  const [state] = useTracked();
+  ({root, title, screen, isBack, color, action}) => {
-  const {colors} = state;
+    const [state] = useTracked();
-  const insets = useSafeAreaInsets();
+    const {colors} = state;
-  const [hide, setHide] = useState(true);
+    const insets = useSafeAreaInsets();
-  const [headerTextState, setHeaderTextState] = useState(
+    const [hide, setHide] = useState(true);
-    Navigation.getHeaderState(),
-  );
-  const currentScreen = headerTextState.currentScreen;
 
-  const onHeaderStateChange = event => {
+    const onScroll = data => {
-    if (!event) return;
+      if (data.screen !== screen) return;
-    setHeaderTextState(event);
+      if (data.y > 150) {
-  };
+        setHide(false);
-
+      } else {
-  useEffect(() => {
+        setHide(true);
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      }
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
     };
-  }, []);
 
-  const onScroll = y => {
+    useEffect(() => {
-    if (y > 150) {
+      eSubscribeEvent(eScrollEvent, onScroll);
-      setHide(false);
+      return () => {
-    } else {
+        eUnSubscribeEvent(eScrollEvent, onScroll);
-      setHide(true);
+      };
-    }
+    }, []);
-  };
 
-  useEffect(() => {
+    return (
-    eSubscribeEvent(eScrollEvent, onScroll);
+      <View
-    return () => {
+        style={[
-      eUnSubscribeEvent(eScrollEvent, onScroll);
+          styles.container,
-    };
+          {
-  }, []);
+            marginTop: Platform.OS === 'android' ? insets.top : null,
+            backgroundColor: colors.bg,
+            overflow: 'hidden',
+            borderBottomWidth: 1,
+            borderBottomColor: hide ? 'transparent' : colors.nav,
+            justifyContent: 'center',
+          },
+        ]}>
+        <View style={styles.leftBtnContainer}>
+          <HeaderLeftMenu headerMenuState={!isBack} currentScreen={screen} />
 
-  return (
+          {(Platform.OS === 'android' || Platform.isPad) &&
-    <View
+          screen !== 'Search' ? (
-      style={[
+            <HeaderTitle
-        styles.container,
+              headerColor={color}
-        {
+              heading={title}
-          marginTop: Platform.OS === 'android' ? insets.top : null,
+              screen={screen}
-          backgroundColor: colors.bg,
+              root={root}
-          overflow: 'hidden',
+            />
-          borderBottomWidth: 1,
+          ) : null}
-          borderBottomColor: hide ? 'transparent' : colors.nav,
+        </View>
-          justifyContent: 'center',
+        {Platform.OS !== 'android' && !Platform.isPad && screen !== 'Search' ? (
-        },
-      ]}>
-      <View style={styles.leftBtnContainer}>
-        <HeaderLeftMenu
-          headerMenuState={headerTextState.verticalMenu}
-          currentScreen={currentScreen}
-        />
-
-        {(Platform.OS === 'android' || Platform.isPad) &&
-        currentScreen !== 'Search' ? (
           <HeaderTitle
-            headerColor={headerTextState.color}
+            headerColor={color}
-            heading={headerTextState.heading}
+            heading={title}
-            currentScreen={currentScreen}
+            screen={screen}
             root={root}
           />
         ) : null}
-      </View>
-      {Platform.OS !== 'android' &&
-      !Platform.isPad &&
-      currentScreen !== 'Search' ? (
-        <HeaderTitle
-          headerColor={headerTextState.color}
-          heading={headerTextState.heading}
-          currentScreen={currentScreen}
-          root={root}
-        />
-      ) : null}
 
-      {currentScreen === 'Search' ? (
+        {screen === 'Search' ? (
-        <>
+          <>
-          <View
+            <View
-            style={{
+              style={{
-              width: '80%',
+                width: '80%',
-            }}>
+              }}>
-            <SearchInput />
+              <SearchInput />
-          </View>
+            </View>
-          <View style={[styles.rightBtnContainer, {right: 6}]}>
+            <View style={[styles.rightBtnContainer, {right: 6}]}>
-            <ActionIcon
+              <ActionIcon
-              onPress={() => {
+                onPress={() => {
-                SearchService.search();
+                  SearchService.search();
-              }}
+                }}
-              name="magnify"
+                name="magnify"
-              size={SIZE.xxxl}
+                size={SIZE.xxxl}
-              color={colors.pri}
+                color={colors.pri}
-              style={styles.rightBtn}
+                style={styles.rightBtn}
-            />
+              />
-          </View>
+            </View>
-        </>
+          </>
-      ) : (
+        ) : (
-        <HeaderRightMenu currentScreen={currentScreen} />
+          <HeaderRightMenu action={action} currentScreen={screen} />
-      )}
+        )}
-    </View>
+      </View>
-  );
+    );
-};
+  },
+  (prev, next) => prev.title === next.title,
+);
 
 const styles = StyleSheet.create({
   container: {

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

@@ -6,7 +6,7 @@ import Seperator from '../../components/Seperator';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {getElevation, scrollRef} from '../../utils';
+import {getElevation, } from '../../utils';
 import {
   eCloseJumpToDialog,
   eOpenJumpToDialog,
@@ -17,7 +17,7 @@ import Heading from '../Typography/Heading';
 
 const offsets = [];
 let timeout = null;
-const JumpToDialog = () => {
+const JumpToDialog = ({scrollRef}) => {
   const [state] = useTracked();
   const {notes, colors, settings} = state;
   const [visible, setVisible] = useState(false);

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

@@ -14,7 +14,7 @@ import {
   TRASH_SVG,
 } from '../../assets/images/assets';
 import {useTracked} from '../../provider';
-
+import FastImage from 'react-native-fast-image'
 export const Placeholder = ({type, w, h, color}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
@@ -66,7 +66,7 @@ export const SvgToPngView = ({width, height, src, color, img}) => {
       {error ? (
         <SvgXml xml={src} width="100%" height="100%" />
       ) : (
-        <Image
+        <FastImage
           style={{
             width: '100%',
             height: '100%',
@@ -74,11 +74,12 @@ export const SvgToPngView = ({width, height, src, color, img}) => {
           onError={() => {
             setError(true);
           }}
+          
           source={{
             uri: `https://github.com/ammarahm-ed/notesnook/raw/main/assets/${img}-${color.replace(
               '#',
               '%23',
-            )}.png`,
+            )}.png`, cache:"immutable",priority:"high"
           }}
         />
       )}

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

@@ -1,15 +1,9 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import {View} from 'react-native';
-import Animated, {Easing, useValue} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
-import {
+import {eSendEvent, ToastEvent} from '../../services/EventManager';
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent,
-} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import {db} from '../../utils/DB';
 import {eOpenMoveNoteDialog, eOpenSimpleDialog} from '../../utils/Events';
@@ -19,43 +13,14 @@ import {ActionIcon} from '../ActionIcon';
 import {TEMPLATE_DELETE} from '../DialogManager/Templates';
 import Heading from '../Typography/Heading';
 
-export const SelectionHeader = () => {
+export const SelectionHeader = ({screen}) => {
-  // State
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
   const insets = useSafeAreaInsets();
-  const translateY = useValue(-150);
-  const opacity = useValue(0);
-
-  const [headerTextState, setHeaderTextState] = useState(
-    Navigation.getHeaderState(),
-  );
-  const currentScreen = headerTextState.currentScreen;
-
-  const onHeaderStateChange = (event) => {
-    if (!event) return;
-     setHeaderTextState(event);
-  };
-
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    translateY.setValue(selectionMode ? 0 : -150);
-    Animated.timing(opacity, {
-      duration: 200,
-      toValue: selectionMode ? 1 : 0,
-      easing: Easing.in(Easing.ease),
-    }).start();
-  }, [selectionMode]);
 
   const addToFavorite = async () => {
     if (selectedItemsList.length > 0) {
-      selectedItemsList.forEach((item) => {
+      selectedItemsList.forEach(item => {
         db.notes.note(item.id).favorite();
       });
       Navigation.setRoutesToUpdate([
@@ -71,7 +36,7 @@ export const SelectionHeader = () => {
   const restoreItem = async () => {
     if (selectedItemsList.length > 0) {
       let noteIds = [];
-      selectedItemsList.forEach((item) => {
+      selectedItemsList.forEach(item => {
         noteIds.push(item.id);
       });
       await db.trash.restore(...noteIds);
@@ -92,8 +57,8 @@ export const SelectionHeader = () => {
     }
   };
 
-  return (
+  return !selectionMode ? null : (
-    <Animated.View
+    <View
       style={{
         width: '100%',
         position: 'absolute',
@@ -104,13 +69,7 @@ export const SelectionHeader = () => {
         alignItems: 'center',
         flexDirection: 'row',
         zIndex: 999,
-        opacity: opacity,
         paddingHorizontal: 12,
-        transform: [
-          {
-            translateY: translateY,
-          },
-        ],
       }}>
       <View
         style={{
@@ -162,9 +121,9 @@ export const SelectionHeader = () => {
           right: 12,
           paddingTop: insets.top,
         }}>
-        {currentScreen === 'Trash' ||
+        {screen === 'Trash' ||
-        currentScreen === 'Notebooks' ||
+        screen === 'Notebooks' ||
-        currentScreen === 'Notebook' ? null : (
+        screen === 'Notebook' ? null : (
           <ActionIcon
             onPress={async () => {
               //dispatch({type: Actions.SELECTION_MODE, enabled: false});
@@ -180,7 +139,7 @@ export const SelectionHeader = () => {
           />
         )}
 
-        {currentScreen === 'Favorites' ? (
+        {screen === 'Favorites' ? (
           <ActionIcon
             onPress={addToFavorite}
             customStyle={{
@@ -192,7 +151,7 @@ export const SelectionHeader = () => {
           />
         ) : null}
 
-        {currentScreen === 'Trash' ? null : (
+        {screen === 'Trash' ? null : (
           <ActionIcon
             customStyle={{
               marginLeft: 10,
@@ -207,7 +166,7 @@ export const SelectionHeader = () => {
           />
         )}
 
-        {currentScreen === 'Trash' ? (
+        {screen === 'Trash' ? (
           <ActionIcon
             customStyle={{
               marginLeft: 10,
@@ -219,7 +178,7 @@ export const SelectionHeader = () => {
           />
         ) : null}
       </View>
-    </Animated.View>
+    </View>
   );
 };
 

apps/mobile/src/components/SimpleList/empty.js

@@ -1,45 +1,34 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
-import {ActivityIndicator, useWindowDimensions, View} from 'react-native';
+import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
-
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import { useTracked } from '../../provider';
-import {useTracked} from '../../provider';
+import { COLORS_NOTE } from '../../utils/Colors';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import { SIZE } from '../../utils/SizeUtils';
-import Navigation from '../../services/Navigation';
+import { Button } from '../Button';
-import {COLORS_NOTE} from '../../utils/Colors';
-import {SIZE} from '../../utils/SizeUtils';
-import {Button} from '../Button';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
-export const Empty = ({loading = true, placeholderData,absolute}) => {
+
+export const Empty = ({
+  loading = true,
+  placeholderData,
+  absolute,
+  headerProps,
+}) => {
   const [state] = useTracked();
   const {colors} = state;
-  const [headerTextState, setHeaderTextState] = useState(
-    Navigation.getHeaderState(),
-  );
   const insets = useSafeAreaInsets();
   const {height} = useWindowDimensions();
 
-  const onHeaderStateChange = (event) => {
-    if (!event) return;
-     setHeaderTextState(event);
-  };
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
-
   return (
     <View
       style={[
         {
           backgroundColor: colors.bg,
-          position: absolute? "absolute" : 'relative',
+          position: absolute ? 'absolute' : 'relative',
-          zIndex:absolute? 10 : null,
+          zIndex: absolute ? 10 : null,
-          height: (height - 250) - insets.top,
+          height: height - 250 - insets.top,
           width: '100%',
         },
       ]}>
@@ -69,16 +58,16 @@ export const Empty = ({loading = true, placeholderData,absolute}) => {
             fontSize={SIZE.md}
             accentColor="bg"
             accentText={
-              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+              COLORS_NOTE[headerProps?.heading?.toLowerCase()]
-                ? headerTextState.heading?.toLowerCase()
+                ? headerProps.heading?.toLowerCase()
                 : 'accent'
             }
           />
         ) : loading ? (
           <ActivityIndicator
             color={
-              COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+              COLORS_NOTE[headerProps?.heading?.toLowerCase()]
-                ? COLORS_NOTE[headerTextState?.heading?.toLowerCase()]
+                ? COLORS_NOTE[headerProps?.heading?.toLowerCase()]
                 : colors.accent
             }
           />

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

@@ -1,18 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
 import {RefreshControl, useWindowDimensions} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import SettingsService from '../../services/SettingsService';
 import Sync from '../../services/Sync';
 import {dHeight} from '../../utils';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {eScrollEvent} from '../../utils/Events';
-import {sleep} from '../../utils/TimeUtils';
+import JumpToDialog from '../JumpToDialog';
 import {NotebookWrapper} from '../NotebookItem/wrapper';
 import {NoteWrapper} from '../NoteItem/wrapper';
 import TagItem from '../TagItem';
@@ -26,6 +23,10 @@ const header = {
   type: 'MAIN_HEADER',
 };
 
+const empty = {
+  type: 'empty',
+};
+
 const SimpleList = ({
   listData,
   type,
@@ -33,23 +34,23 @@ const SimpleList = ({
   customRefreshing,
   refreshCallback,
   sortMenuButton,
-  scrollRef,
   jumpToDialog,
   placeholderData,
   loading,
   headerProps = {
     heading: 'Home',
   },
+  screen
 }) => {
   const [state] = useTracked();
   const {colors, deviceMode, messageBoardState} = state;
-  const [_loading, setLoading] = useState(true);
+  const [_loading, _setLoading] = useState(true);
-  const [loaded, setLoaded] = useState(false);
   const [dataProvider, setDataProvider] = useState(
     new DataProvider((r1, r2) => {
       return r1 !== r2;
-    }),
+    }).cloneWithRows([header, empty]),
   );
+  const scrollRef = useRef();
 
   const insets = useSafeAreaInsets();
   const {width, fontScale} = useWindowDimensions();
@@ -57,28 +58,20 @@ const SimpleList = ({
   const dataType = type;
 
   useEffect(() => {
-    if (loading) {
-      setDataProvider(dataProvider.cloneWithRows([header, {type: 'empty'}]));
-      setLoaded(false);
-    }
-
     if (!loading) {
       setDataProvider(
         dataProvider.cloneWithRows(
           !listData || listData.length === 0
-            ? [header, {type: 'empty'}]
+            ? [header, empty]
             : [header].concat(listData),
         ),
       );
-      setLoading(false);
+      setTimeout(() => {
-      setTimeout(
+        _setLoading(false);
-        () => {
+      }, 500);
-          setLoaded(true);
+    } else {
-        },
+      _setLoading(true);
-        Navigation.getCurrentScreen() === SettingsService.get().homepage
+      setDataProvider(dataProvider.cloneWithRows([header, empty]));
-          ? 1000
-          : 150,
-      );
     }
   }, [listData, deviceMode, loading]);
 
@@ -92,7 +85,10 @@ const SimpleList = ({
   const _onScroll = event => {
     if (!event) return;
     let y = event.nativeEvent.contentOffset.y;
-    eSendEvent(eScrollEvent, y);
+    eSendEvent(eScrollEvent, {
+      y,
+      screen
+    });
   };
 
   const _layoutProvider = new LayoutProvider(
@@ -199,6 +195,7 @@ const SimpleList = ({
           <Empty
             loading={loading || _loading}
             placeholderData={placeholderData}
+            headerProps={headerProps}
           />
         );
     }
@@ -237,49 +234,25 @@ const SimpleList = ({
   };
   return (
     <>
-      {loaded && !loading ? null : (
+      {!loading && (
-        <>
+        <Announcement
-          <View
+          color={
-            style={{
+            COLORS_NOTE[headerProps.heading?.toLowerCase()] || colors.accent
-              position: 'absolute',
+          }
-              width: '100%',
+        />
-              height: '100%',
-              backgroundColor: colors.bg,
-              zIndex: 999,
-            }}>
-            <Header
-              title={headerProps.heading}
-              paragraph={headerProps.paragraph}
-              onPress={headerProps.onPress}
-              icon={headerProps.icon}
-              type={dataType}
-              index={0}
-            />
-            <Empty loading={true} placeholderData={placeholderData} />
-          </View>
-        </>
-      )}
-
-      {_loading ? null : (
-        <>
-          <Announcement
-            color={
-              COLORS_NOTE[headerProps.heading?.toLowerCase()] || colors.accent
-            }
-          />
-          <RecyclerListView
-            ref={scrollRef}
-            layoutProvider={_layoutProvider}
-            dataProvider={dataProvider}
-            rowRenderer={_renderRow}
-            onScroll={_onScroll}
-            canChangeSize={true}
-            renderFooter={listData.length === 0 ? null : Footer}
-            scrollViewProps={scrollProps}
-            style={styles}
-          />
-        </>
       )}
+      <RecyclerListView
+        ref={scrollRef}
+        layoutProvider={_layoutProvider}
+        dataProvider={dataProvider}
+        rowRenderer={_renderRow}
+        onScroll={_onScroll}
+        canChangeSize={true}
+        renderFooter={listData.length === 0 ? null : Footer}
+        scrollViewProps={scrollProps}
+        style={styles}
+      />
+      <JumpToDialog scrollRef={scrollRef} />
     </>
   );
 };

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

@@ -81,7 +81,7 @@ const SplashScreen = () => {
   useEffect(() => {
     Storage.read('introCompleted').then(async r => {
       requestAnimationFrame(() => {
-        if (r) {
+        if (!r) {
           setVisible(true);
           timing(opacity, {
             toValue: 1,

apps/mobile/src/navigation/NavigatorStack.js

@@ -14,6 +14,7 @@ import {
 } from '../services/EventManager';
 import Navigation from '../services/Navigation';
 import SettingsService from '../services/SettingsService';
+import {editing, history} from '../utils';
 import {eOpenSideMenu} from '../utils/Events';
 import {rootNavigatorRef} from '../utils/Refs';
 import {sleep} from '../utils/TimeUtils';
@@ -74,8 +75,8 @@ const forSlide = ({current, next, inverted, layouts: {screen}}) => {
 };
 
 const screenOptionsForAnimation = {
-  animationEnabled: false,
+  animationEnabled: true,
-  cardStyleInterpolator: forSlide,
+  cardStyleInterpolator: forFade,
   gestureEnabled: true,
 };
 
@@ -84,8 +85,10 @@ export const NavigatorStack = React.memo(
     const [, dispatch] = useTracked();
     const [render, setRender] = React.useState(false);
     const onStateChange = React.useCallback(() => {
-      dispatch({type: Actions.SELECTION_MODE, enabled: false});
+      if (history.selectionMode) {
-      dispatch({type: Actions.CLEAR_SELECTION});
+        dispatch({type: Actions.SELECTION_MODE, enabled: false});
+        dispatch({type: Actions.CLEAR_SELECTION});
+      }
       eSendEvent('navigate');
     });
 
@@ -102,7 +105,6 @@ export const NavigatorStack = React.memo(
             id: SettingsService.get().homepage.toLowerCase() + '_navigation',
           },
         );
-
       }
     };
 
@@ -126,6 +128,7 @@ export const NavigatorStack = React.memo(
                 headerShown: false,
                 animationEnabled: false,
                 gestureEnabled: false,
+              
               }}>
               <Stack.Screen name="Notes" component={Home} />
               <Stack.Screen name="Notebooks" component={Folders} />

apps/mobile/src/provider/Reducer.js

@@ -8,14 +8,10 @@ import {defaultState} from './DefaultState';
 
 export const reducer = (state, action) => {
   switch (action.type) {
-
     case Actions.ALL: {
       return {
         ...state,
-        notes: db.notes.group(
+        notes: db.notes.group(SORT[sortSettings.sort], sortSettings.sortOrder),
-          SORT[sortSettings.sort],
-          sortSettings.sortOrder,
-        ),
         notebooks: db.notebooks.all,
         trash: db.trash.all,
         tags: db.tags.all,
@@ -56,10 +52,7 @@ export const reducer = (state, action) => {
     case Actions.NOTES:
       return {
         ...state,
-        notes: db.notes.group(
+        notes: db.notes.group(SORT[sortSettings.sort], sortSettings.sortOrder),
-          SORT[sortSettings.sort],
-          sortSettings.sortOrder,
-        )
       };
     case Actions.THEME: {
       return {
@@ -134,7 +127,7 @@ export const reducer = (state, action) => {
       } else {
         eSendEvent(eOpenSideMenu);
       }
-
+      history.selectionMode = action.enabled;
       return {
         ...state,
         selectionMode: action.enabled,
@@ -157,15 +150,18 @@ export const reducer = (state, action) => {
       if (selectedItems.length === 0) {
         eSendEvent(eOpenSideMenu);
       }
+      history.selectionMode =
+        selectedItems.length > 0 ? state.selectionMode : false;
       return {
         ...state,
         selectedItemsList: selectedItems,
-        selectionMode: selectedItems.length > 0 ? state.selectionMode : false,
+        selectionMode: history.selectionMode,
       };
     }
     case Actions.CLEAR_SELECTION: {
       history.selectedItemsList = [];
       eSendEvent(eOpenSideMenu);
+      history.selectionMode = false;
       return {
         ...state,
         selectedItemsList: [],
@@ -280,7 +276,7 @@ export const reducer = (state, action) => {
       return {
         ...state,
         searching: action.searching.isSearching,
-        searchStatus:action.searching.status
+        searchStatus: action.searching.status,
       };
     }
     case Actions.PREMIUM: {

apps/mobile/src/services/Navigation.js

@@ -9,7 +9,6 @@ import SettingsService from './SettingsService';
 let currentScreen = 'Notes';
 let homeLoaded = false;
 
-
 function getHomeLoaded() {
   return homeLoaded;
 }
@@ -47,8 +46,8 @@ function getHeaderState() {
 
 function clearRouteFromUpdates(routeName) {
   if (routesToUpdate.indexOf(routeName) !== -1) {
-  routesToUpdate = [...new Set(routesToUpdate)]
+    routesToUpdate = [...new Set(routesToUpdate)];
-  routesToUpdate.splice(routesToUpdate.indexOf(routeName), 1);
+    routesToUpdate.splice(routesToUpdate.indexOf(routeName), 1);
   }
 }
 
@@ -60,19 +59,18 @@ function routeNeedsUpdate(routeName, callback) {
 }
 
 /**
- * 
+ *
- * @param {array} routes 
+ * @param {array} routes
  */
 function setRoutesToUpdate(routes) {
-
+  console.log(currentScreen, 'current');
-  console.log(currentScreen, "current");
   if (routes.indexOf(currentScreen) > -1) {
     console.log('updating screen', currentScreen);
     if (
-      currentScreen === routeNames.NotesPage||
+      currentScreen === routeNames.NotesPage ||
       currentScreen === routeNames.Notebook
     ) {
-        console.log(currentScreen ,"CURRENT");
+      console.log(currentScreen, 'CURRENT');
       eSendEvent(
         currentScreen === routeNames.NotesPage
           ? refreshNotesPage
@@ -124,7 +122,7 @@ function setHeaderState(name, params, item) {
   headerState.currentScreen = name;
   headerState.verticalMenu = params.menu;
   if (headerState) {
-    eSendEvent('onHeaderStateChange', {...headerState});
+    eSendEvent('onHeaderStateChange', {id: headerState.id});
   }
 }
 
@@ -133,15 +131,13 @@ function goBack() {
 }
 
 function push(name, params, item) {
-  currentScreen = name;
   setHeaderState(name, params, item);
   rootNavigatorRef.current?.dispatch(StackActions.push(name, params));
 }
 
 function replace(name, params, item) {
-  currentScreen = name;
   setHeaderState(name, params, item);
-  rootNavigatorRef.current?.dispatch(StackActions.replace(name,params));
+  rootNavigatorRef.current?.dispatch(StackActions.replace(name, params));
 }
 
 function popToTop() {
@@ -181,5 +177,5 @@ export default {
   routeNeedsUpdate,
   routeNames,
   getHomeLoaded,
-  setHomeLoaded
+  setHomeLoaded,
 };

apps/mobile/src/services/Sync.js

@@ -19,7 +19,6 @@ const run = async (context = 'global') => {
       context: context,
     });
   } catch (e) {
-    console.log(e);
     if (e.message === 'You need to login to sync.') {
       ToastEvent.show({
         heading:"Enable sync",

apps/mobile/src/utils/DB.js

@@ -16,9 +16,9 @@ export const db = new Database(
  */
 
 db.host( __DEV__ ? {
-  API_HOST: 'https://api.notesnook.com',
+  API_HOST: 'http://192.168.10.3:5264',
-  AUTH_HOST: 'https://auth.streetwriters.co',
+  AUTH_HOST: 'http://192.168.10.3:8264',
-  SSE_HOST: 'https://events.streetwriters.co',
+  SSE_HOST: 'http://192.168.10.3:7264',
 } : {
   API_HOST: 'https://api.notesnook.com',
   AUTH_HOST: 'https://auth.streetwriters.co',

apps/mobile/src/utils/index.js

@@ -1,5 +1,9 @@
 import {createRef} from 'react';
-import {Dimensions, NativeModules, Platform} from 'react-native';
+import {
+  Dimensions,
+  NativeModules,
+  Platform,
+} from 'react-native';
 import RNTooltips from 'react-native-tooltips';
 import {updateEvent} from '../components/DialogManager/recievers';
 import {dummyRef} from '../components/DummyText';
@@ -11,7 +15,7 @@ import {tabBarRef} from './Refs';
 import {SIZE} from './SizeUtils';
 
 export const InteractionManager = {
-  runAfterInteractions: (func, time = 150) => setTimeout(func, time),
+  runAfterInteractions: (func, time = 400) => setTimeout(func, time),
 };
 
 export const APP_VERSION = 1350;
@@ -68,6 +72,7 @@ export const selection = {
 
 export const history = {
   selectedItemsList: [],
+  selectionMode: false,
 };
 
 export async function showContext(event, title) {

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

@@ -1,5 +1,8 @@
 import React, {useCallback, useEffect} from 'react';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
+import {Header} from '../../components/Header';
 import {Placeholder} from '../../components/ListPlaceholders';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -7,7 +10,7 @@ import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { InteractionManager } from '../../utils';
+import {InteractionManager} from '../../utils';
 import {eScrollEvent} from '../../utils/Events';
 export const Favorites = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -17,16 +20,16 @@ export const Favorites = ({route, navigation}) => {
   let pageIsLoaded = false;
 
   let ranAfterInteractions = false;
- 
+
   const runAfterInteractions = () => {
     InteractionManager.runAfterInteractions(() => {
       if (localLoad) {
         setLocalLoad(false);
       }
 
-      Navigation.routeNeedsUpdate('Favorites',() => {
+      Navigation.routeNeedsUpdate('Favorites', () => {
-        dispatch({type:Actions.FAVORITES})
+        dispatch({type: Actions.FAVORITES});
-      })
+      });
 
       eSendEvent(eScrollEvent, {name: 'Favorites', type: 'in'});
       updateSearch();
@@ -94,26 +97,33 @@ export const Favorites = ({route, navigation}) => {
   };
 
   return (
-    <SimpleList
+    <>
-      listData={favorites}
+      <ContainerTopSection>
-      type="notes"
+        <SelectionHeader screen="Favorites" />
-      refreshCallback={() => {
+        <Header title="Favorites" isBack={false} screen="Favorites" />
-        dispatch({type: Actions.FAVORITES});
+      </ContainerTopSection>
-      }}
+      <SimpleList
-      loading={loading || localLoad}
+        listData={favorites}
-      placeholderData={{
+        type="notes"
-        heading: 'Your favorites',
+        refreshCallback={() => {
-        paragraph: 'You have not added any notes to favorites yet.',
+          dispatch({type: Actions.FAVORITES});
-        button: null,
+        }}
-        loading: 'Loading your favorites',
+        screen="Favorites"
-      }}
+        loading={loading || localLoad}
-      headerProps={{
+        placeholderData={{
-        heading: 'Favorites',
+          heading: 'Your favorites',
-      }}
+          paragraph: 'You have not added any notes to favorites yet.',
-      focused={() => navigation.isFocused()}
+          button: null,
-      placeholder={<Placeholder type="favorites" />}
+          loading: 'Loading your favorites',
-      placeholderText="Notes you favorite appear here"
+        }}
-    />
+        headerProps={{
+          heading: 'Favorites',
+        }}
+        focused={() => navigation.isFocused()}
+        placeholder={<Placeholder type="favorites" />}
+        placeholderText="Notes you favorite appear here"
+      />
+    </>
   );
 };
 

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

@@ -11,6 +11,9 @@ import {eScrollEvent} from '../../utils/Events';
 import Navigation from '../../services/Navigation';
 import {DDS} from '../../services/DeviceDetection';
 import {InteractionManager} from '../../utils';
+import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import { Header } from '../../components/Header';
+import SelectionHeader from '../../components/SelectionHeader';
 
 export const Folders = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -97,9 +100,19 @@ export const Folders = ({route, navigation}) => {
 
   return (
     <>
+       <ContainerTopSection>
+       <SelectionHeader   screen="Notebooks" />
+        <Header
+          title="Notebooks"
+          isBack={false}
+          screen="Notesbooks"
+          action={_onPressBottomButton}
+        />
+      </ContainerTopSection>
       <SimpleList
         listData={notebooks}
         type="notebooks"
+        screen="Notebooks"
         focused={() => navigation.isFocused()}
         loading={loading}
         placeholderData={{

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

@@ -1,16 +1,19 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
-import { DDS } from '../../services/DeviceDetection';
+import {DDS} from '../../services/DeviceDetection';
-import { eSendEvent } from '../../services/EventManager';
+import {eSendEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { InteractionManager, scrollRef } from '../../utils';
+import {InteractionManager, scrollRef} from '../../utils';
-import { db } from '../../utils/DB';
+import {db} from '../../utils/DB';
-import { eOnLoadNote, eScrollEvent } from '../../utils/Events';
+import {eOnLoadNote, eScrollEvent} from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
+import {tabBarRef} from '../../utils/Refs';
+import {Header} from '../../components/Header/index';
+import SelectionHeader from '../../components/SelectionHeader';
 export const Home = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {loading} = state;
@@ -93,8 +96,6 @@ export const Home = ({route, navigation}) => {
   }, [notes]);
 
   const updateSearch = () => {
-
-    
     SearchService.update({
       placeholder: 'Type a keyword to search in notes',
       data: db?.notes?.all,
@@ -104,7 +105,6 @@ export const Home = ({route, navigation}) => {
   };
 
   const _onPressBottomButton = async () => {
-
     if (!DDS.isLargeTablet()) {
       tabBarRef.current?.goToPage(1);
     } else {
@@ -114,12 +114,23 @@ export const Home = ({route, navigation}) => {
 
   return (
     <>
+      <ContainerTopSection>
+        <SelectionHeader screen="Notes" />
+        <Header
+          title="Notes"
+          isBack={false}
+          screen="Notes"
+          action={_onPressBottomButton}
+        />
+      </ContainerTopSection>
+
       <SimpleList
         listData={notes}
         scrollRef={scrollRef}
         type="notes"
         isHome={true}
         pinned={true}
+        screen="Notes"
         loading={loading || localLoad}
         sortMenuButton={true}
         headerProps={{

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

@@ -1,32 +1,33 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
+import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import { Header } from '../../components/Header';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent,
+  eUnSubscribeEvent
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import {InteractionManager} from '../../utils';
+import { InteractionManager } from '../../utils';
-import {db} from '../../utils/DB';
+import { db } from '../../utils/DB';
 import {
   eOnNewTopicAdded,
   eOpenAddNotebookDialog,
   eOpenAddTopicDialog,
-  eScrollEvent,
+  eScrollEvent
 } from '../../utils/Events';
-import {sleep} from '../../utils/TimeUtils';
 
 export const Notebook = ({route, navigation}) => {
   const [topics, setTopics] = useState(route.params.notebook.topics);
   const [loading, setLoading] = useState(true);
   let params = route.params;
   let pageIsLoaded = false;
-
   let ranAfterInteractions = false;
 
-  const runAfterInteractions = (time = 150) => {
+  const runAfterInteractions = (time = 400) => {
     InteractionManager.runAfterInteractions(() => {
       let notebook = db.notebooks.notebook(params.notebook?.id).data;
       params.notebook = notebook;
@@ -36,14 +37,14 @@ export const Notebook = ({route, navigation}) => {
         if (loading) {
           setLoading(false);
         }
-      },10)
+      }, 10);
       Navigation.routeNeedsUpdate('Notebook', () => {
         onLoad();
       });
       eSendEvent(eScrollEvent, {name: params.title, type: 'in'});
       if (params.menu) {
         navigation.setOptions({
-          animationEnabled: false,
+          animationEnabled: true,
           gestureEnabled: false,
         });
       } else {
@@ -56,13 +57,13 @@ export const Notebook = ({route, navigation}) => {
       ranAfterInteractions = false;
     }, time);
   };
-  const onLoad = (data) => {
+  const onLoad = data => {
     if (data) {
       setLoading(true);
       params = data;
     }
 
-    runAfterInteractions(data ? 150 : 1);
+    runAfterInteractions(data ? 400 : 1);
   };
 
   useEffect(() => {
@@ -125,12 +126,22 @@ export const Notebook = ({route, navigation}) => {
 
   return (
     <>
+      <ContainerTopSection>
+        <SelectionHeader screen="Notebook" />
+        <Header
+          title={params.title}
+          isBack={!params.menu}
+          screen="Notebook"
+          action={_onPressBottomButton}
+        />
+      </ContainerTopSection>
       <SimpleList
         listData={topics}
         type="topics"
         refreshCallback={() => {
           onLoad();
         }}
+        screen="Notebook"
         headerProps={{
           heading: params.title,
           paragraph: 'Edit notebook',

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

@@ -1,6 +1,9 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {Platform} from 'react-native';
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
+import {Header} from '../../components/Header';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -32,7 +35,7 @@ export const Notes = ({route, navigation}) => {
   let pageIsLoaded = false;
   let ranAfterInteractions = false;
 
-  const runAfterInteractions = (time = 150) => {
+  const runAfterInteractions = (time = 400) => {
     InteractionManager.runAfterInteractions(() => {
       Navigation.routeNeedsUpdate('NotesPage', () => {
         init();
@@ -61,7 +64,7 @@ export const Notes = ({route, navigation}) => {
       }
       if (params.menu) {
         navigation.setOptions({
-          animationEnabled: false,
+          animationEnabled: true,
           gestureEnabled: false,
         });
       } else {
@@ -128,7 +131,7 @@ export const Notes = ({route, navigation}) => {
     setActionAfterFirstSave();
     if (!ranAfterInteractions) {
       ranAfterInteractions = true;
-      runAfterInteractions(data ? 150 : 1);
+      runAfterInteractions(data ? 400 : 1);
     }
 
     if (!pageIsLoaded) {
@@ -257,9 +260,19 @@ export const Notes = ({route, navigation}) => {
 
   return (
     <>
+      <ContainerTopSection>
+        <SelectionHeader screen="NotesPage" />
+        <Header
+          title={headerProps.heading}
+          isBack={!params.menu}
+          screen="NotesPage"
+          action={_onPressBottomButton}
+        />
+      </ContainerTopSection>
       <SimpleList
         listData={notes}
         type="notes"
+        screen="NotesPage"
         refreshCallback={_refreshCallback}
         headerProps={headerProps}
         loading={loading || localLoad}

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

@@ -1,4 +1,7 @@
 import React, {useCallback, useEffect} from 'react';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
+import {Header} from '../../components/Header';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -48,13 +51,16 @@ export const Search = ({route, navigation}) => {
     };
   }, []);
 
-  
-
   return (
     <>
+      <ContainerTopSection>
+        <SelectionHeader screen="Search" />
+        <Header title="Search" isBack={true} screen="Search" />
+      </ContainerTopSection>
       <SimpleList
         listData={searchResults}
         type="search"
+        screen="Search"
         focused={() => navigation.isFocused()}
         placeholderText={`Notes you write appear here`}
         jumpToDialog={true}
@@ -68,7 +74,7 @@ export const Search = ({route, navigation}) => {
               SearchService.getSearchInformation().title
             }`,
           button: null,
-          loading:"Searching..."
+          loading: 'Searching...',
         }}
       />
     </>

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

@@ -1,8 +1,7 @@
 import React, {createRef, useCallback, useEffect, useState} from 'react';
-import {Linking} from 'react-native';
 import {
   Appearance,
-  InteractionManager,
+  Linking,
   Platform,
   ScrollView,
   TouchableOpacity,
@@ -13,10 +12,12 @@ import Menu, {MenuItem} from 'react-native-reanimated-material-menu';
 import AnimatedProgress from 'react-native-reanimated-progress-bar';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {Button} from '../../components/Button';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
 import BaseDialog from '../../components/Dialog/base-dialog';
 import DialogButtons from '../../components/Dialog/dialog-buttons';
 import DialogContainer from '../../components/Dialog/dialog-container';
 import DialogHeader from '../../components/Dialog/dialog-header';
+import {Header as TopHeader} from '../../components/Header/index';
 import Input from '../../components/Input';
 import {PressableButton} from '../../components/PressableButton';
 import Seperator from '../../components/Seperator';
@@ -42,10 +43,8 @@ import SettingsService from '../../services/SettingsService';
 import {
   AndroidModule,
   APP_VERSION,
-  dWidth,
+  InteractionManager,
-  getElevation,
   MenuItemsList,
-  setSetting,
   SUBSCRIPTION_PROVIDER,
   SUBSCRIPTION_STATUS_STRINGS,
 } from '../../utils';
@@ -75,7 +74,7 @@ import {sleep, timeConverter} from '../../utils/TimeUtils';
 
 let menuRef = createRef();
 
-const format = (ver) => {
+const format = ver => {
   let parts = ver.toString().split('');
   return `v${parts[0]}.${parts[1]}.${parts[2]}${
     parts[3] === '0' ? '' : parts[3]
@@ -86,20 +85,11 @@ export const Settings = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
   const [version, setVersion] = useState(null);
-
+  const [loading, setLoading] = useState(true);
   let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
     eSendEvent(eScrollEvent, {name: 'Settings', type: 'in'});
-    if (DDS.isLargeTablet()) {
-      dispatch({
-        type: Actions.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          onPress: null,
-        },
-      });
-    }
-
     eSendEvent(eUpdateSearchState, {
       placeholder: '',
       data: [],
@@ -125,13 +115,16 @@ export const Settings = ({navigation}) => {
   }, []);
 
   useEffect(() => {
-    navigation.addListener('focus', onFocus);
+    InteractionManager.runAfterInteractions(() => {
-    db.version()
+      setLoading(false);
-      .then((ver) => {
+      navigation.addListener('focus', onFocus);
-        console.log(ver, 'VERSION');
+      db.version()
-        setVersion(ver);
+        .then(ver => {
-      })
+          console.log(ver, 'VERSION');
-      .catch((e) => console.log(e, 'VER'));
+          setVersion(ver);
+        })
+        .catch(e => console.log(e, 'VER'));
+    });
 
     return () => {
       pageIsLoaded = false;
@@ -243,47 +236,61 @@ export const Settings = ({navigation}) => {
   ];
 
   return (
-    <View
+    <>
-      style={{
+      <ContainerTopSection>
-        height: '100%',
+        <TopHeader title="Settings" isBack={false} screen="Settings" />
-        backgroundColor: colors.bg,
+      </ContainerTopSection>
-      }}>
+      <View
-      <ScrollView
-        onScroll={(e) =>
-          eSendEvent(eScrollEvent, e.nativeEvent.contentOffset.y)
-        }
-        scrollEventThrottle={1}
         style={{
-          paddingHorizontal: 0,
+          height: '100%',
+          backgroundColor: colors.bg,
         }}>
-        {!DDS.isLargeTablet() && (
+        <ScrollView
-          <Header title="Settings" type="settings" messageCard={false} />
+          onScroll={e =>
-        )}
+            eSendEvent(eScrollEvent, {
-        <SettingsUserSection />
+              y:e.nativeEvent.contentOffset.y,
-        <SettingsAppearanceSection />
+              screen:"Settings"
-        <SettingsPrivacyAndSecurity />
+            })
-        <SettingsBackupAndRestore />
+          }
-
+          scrollEventThrottle={1}
-        <SectionHeader title="Other" />
-
-        {otherItems.map((item) => (
-          <CustomButton
-            key={item.name}
-            title={item.name}
-            tagline={item.desc}
-            onPress={item.func}
-          />
-        ))}
-
-        <AccoutLogoutSection />
-
-        <View
           style={{
-            height: 400,
+            paddingHorizontal: 0,
-          }}
+          }}>
-        />
+          {!DDS.isLargeTablet() && (
-      </ScrollView>
+            <Header title="Settings" type="settings" messageCard={false} />
-    </View>
+          )}
+
+          <SettingsUserSection />
+          <SettingsAppearanceSection />
+
+          {!loading && (
+            <>
+              <SettingsPrivacyAndSecurity />
+              <SettingsBackupAndRestore />
+            </>
+          )}
+
+          <SectionHeader title="Other" />
+
+          {otherItems.map(item => (
+            <CustomButton
+              key={item.name}
+              title={item.name}
+              tagline={item.desc}
+              onPress={item.func}
+            />
+          ))}
+
+          <AccoutLogoutSection />
+
+          <View
+            style={{
+              height: 400,
+            }}
+          />
+        </ScrollView>
+      </View>
+    </>
   );
 };
 
@@ -386,7 +393,7 @@ const AccoutLogoutSection = () => {
 
               <Input
                 placeholder="Enter account password"
-                onChangeText={(v) => {
+                onChangeText={v => {
                   passwordValue = v;
                 }}
                 secureTextEntry={true}
@@ -543,7 +550,7 @@ const SettingsUserSection = () => {
       type: 5,
     },
   }; */
-  const getTimeLeft = (t2) => {
+  const getTimeLeft = t2 => {
     let d1 = new Date(Date.now());
     let d2 = new Date(t2);
     let diff = d2.getTime() - d1.getTime();
@@ -816,7 +823,7 @@ const SettingsUserSection = () => {
               },
               desc: 'Setup a new password for your account.',
             },
-          ].map((item) => (
+          ].map(item => (
             <CustomButton
               key={item.name}
               title={item.name}
@@ -920,7 +927,7 @@ const SettingsAppearanceSection = () => {
           '#FF1744',
           '#B71C1C',
           '#ffadad',
-        ].map((item) => (
+        ].map(item => (
           <PressableButton
             key={item}
             customColor={
@@ -1078,7 +1085,7 @@ const SettingsPrivacyAndSecurity = () => {
 
   const checkVaultStatus = useCallback(() => {
     InteractionManager.runAfterInteractions(() => {
-      db.vault.exists().then(async (r) => {
+      db.vault.exists().then(async r => {
         let available = await BiometricService.isBiometryAvailable();
         let fingerprint = await BiometricService.hasInternetCredentials();
 
@@ -1134,7 +1141,7 @@ const SettingsPrivacyAndSecurity = () => {
               paragraph="Select the level of security you want to enable."
             />
             <Seperator />
-            {modes.map((item) => (
+            {modes.map(item => (
               <PressableButton
                 type={
                   settings.appLockMode === item.value ? 'accent' : 'transparent'
@@ -1316,7 +1323,7 @@ const SettingsBackupAndRestore = () => {
     <>
       <SectionHeader title="Backup & restore" />
 
-      {backupItemsList.map((item) => (
+      {backupItemsList.map(item => (
         <CustomButton
           key={item.name}
           title={item.name}
@@ -1373,7 +1380,7 @@ const SettingsBackupAndRestore = () => {
               title: 'Weekly',
               value: 'weekly',
             },
-          ].map((item) => (
+          ].map(item => (
             <TouchableOpacity
               activeOpacity={1}
               onPress={async () => {

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

@@ -1,5 +1,8 @@
 import React, {useCallback, useEffect, useState} from 'react';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
+import {Header} from '../../components/Header';
 import {Placeholder} from '../../components/ListPlaceholders';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -7,7 +10,7 @@ import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { InteractionManager } from '../../utils';
+import {InteractionManager} from '../../utils';
 import {eScrollEvent} from '../../utils/Events';
 
 export const Tags = ({route, navigation}) => {
@@ -17,7 +20,6 @@ export const Tags = ({route, navigation}) => {
   let pageIsLoaded = false;
 
   let ranAfterInteractions = false;
- 
 
   const runAfterInteractions = () => {
     InteractionManager.runAfterInteractions(() => {
@@ -25,33 +27,23 @@ export const Tags = ({route, navigation}) => {
         setLoading(false);
       }
 
-      Navigation.routeNeedsUpdate('Tags',() => {
+      Navigation.routeNeedsUpdate('Tags', () => {
-        dispatch({type:Actions.TAGS})
+        dispatch({type: Actions.TAGS});
-      })
+      });
 
       eSendEvent(eScrollEvent, {name: 'Tags', type: 'in'});
-      if (DDS.isLargeTablet()) {
+    
-        dispatch({
-          type: Actions.CONTAINER_BOTTOM_BUTTON,
-          state: {
-            onPress: null,
-          },
-        });
-      }
       updateSearch();
       ranAfterInteractions = false;
     });
-
-
   };
 
   const onFocus = useCallback(() => {
     if (!ranAfterInteractions) {
-  
       ranAfterInteractions = true;
       runAfterInteractions();
     }
-  
+
     if (!pageIsLoaded) {
       pageIsLoaded = true;
       return;
@@ -75,7 +67,7 @@ export const Tags = ({route, navigation}) => {
     }
     navigation.addListener('focus', onFocus);
     return () => {
-      pageIsLoaded = false;  
+      pageIsLoaded = false;
       ranAfterInteractions = false;
       eSendEvent(eScrollEvent, {name: 'Tags', type: 'back'});
       navigation.removeListener('focus', onFocus);
@@ -93,28 +85,35 @@ export const Tags = ({route, navigation}) => {
       placeholder: 'Search in tags',
       data: tags,
       type: 'tags',
-      title:"Tags"
+      title: 'Tags',
     });
   };
 
   return (
-    <SimpleList
+    <>
-    listData={tags}
+      <ContainerTopSection>
-      type="tags"
+        <SelectionHeader screen="Tags" />
-      headerProps={{
+        <Header title="Tags" isBack={false} screen="Tags" />
-        heading: 'Tags',
+      </ContainerTopSection>
-      }}
+      <SimpleList
-      loading={loading}
+        listData={tags}
-      focused={() => navigation.isFocused()}
+        type="tags"
-      placeholderData={{
+        headerProps={{
-        heading: 'Your tags',
+          heading: 'Tags',
-        paragraph: 'You have not created any tags for your notes yet.',
+        }}
-        button: null,
+        screen="Tags"
-        loading: 'Loading your tags.',
+        loading={loading}
-      }}
+        focused={() => navigation.isFocused()}
-      placeholder={<Placeholder type="tags" />}
+        placeholderData={{
-      placeholderText="Tags added to notes appear here"
+          heading: 'Your tags',
-    />
+          paragraph: 'You have not created any tags for your notes yet.',
+          button: null,
+          loading: 'Loading your tags.',
+        }}
+        placeholder={<Placeholder type="tags" />}
+        placeholderText="Tags added to notes appear here"
+      />
+    </>
   );
 };
 

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

@@ -1,9 +1,12 @@
 import React, {useCallback, useEffect, useState} from 'react';
 
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
 import {simpleDialogEvent} from '../../components/DialogManager/recievers';
 import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/Templates';
+import {Header} from '../../components/Header';
 import {Placeholder} from '../../components/ListPlaceholders';
+import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -33,14 +36,7 @@ export const Trash = ({route, navigation}) => {
       });
 
       eSendEvent(eScrollEvent, {name: 'Trash', type: 'in'});
-      if (DDS.isLargeTablet()) {
+     
-        dispatch({
-          type: Actions.CONTAINER_BOTTOM_BUTTON,
-          state: {
-            onPress: null,
-          },
-        });
-      }
       updateSearch();
       ranAfterInteractions = false;
     });
@@ -101,9 +97,19 @@ export const Trash = ({route, navigation}) => {
 
   return (
     <>
+      <ContainerTopSection>
+        <SelectionHeader screen="Trash" />
+        <Header
+          title="Trash"
+          isBack={false}
+          screen="Trash"
+          action={_onPressBottomButton}
+        />
+      </ContainerTopSection>
       <SimpleList
         listData={trash}
         type="trash"
+        screen="Trash"
         focused={() => navigation.isFocused()}
         loading={loading}
         placeholderData={{