make sure menu does not rerender on swipe

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

@@ -1,13 +1,9 @@
 import React from 'react';
-import {ScrollView, StatusBar, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
-import {ColorSection} from './ColorSection';
-import {MenuListItem} from './MenuListItem';
-import {TagsSection} from './TagsSection';
-import {UserSection} from './UserSection';
-import Seperator from '../Seperator';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {DDS} from '../../services/DeviceDetection';
 import {
   ACCENT,
   COLOR_SCHEME,
@@ -15,19 +11,32 @@ import {
   COLOR_SCHEME_LIGHT,
   setColorScheme,
 } from '../../utils/Colors';
-import {MenuItemsList} from "../../utils/index"
+import {MenuItemsList} from '../../utils/index';
 import {MMKV} from '../../utils/mmkv';
+import {SIZE} from '../../utils/SizeUtils';
+import Seperator from '../Seperator';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
+import {ColorSection} from './ColorSection';
+import {MenuListItem} from './MenuListItem';
+import {TagsSection} from './TagsSection';
+import {UserSection} from './UserSection';
 
-export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
+export const Menu = React.memo(
+  () => {
     const [state, dispatch] = useTracked();
     const {colors} = state;
     const insets = useSafeAreaInsets();
-
+    const noTextMode = DDS.isTab && !DDS.isSmallTab;
     function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
       let newColors = setColorScheme(colors, accent);
       dispatch({type: Actions.THEME, colors: newColors});
     }
 
+    React.useEffect(() => {
+      console.log('rerendering drawer');
+    });
+
     const BottomItemsList = [
       {
         name: 'Night mode',
@@ -56,7 +65,6 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
       <View
         style={{
           height: '100%',
-        opacity: hide ? 0 : 1,
           width: '100%',
           backgroundColor: colors.bg,
           paddingTop: insets.top,
@@ -67,9 +75,9 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
           alwaysBounceVertical={false}
           contentContainerStyle={{
             minHeight: '50%',
+            flexGrow: 1,
           }}
           showsVerticalScrollIndicator={false}>
-
           {MenuItemsList.map((item, index) => (
             <MenuListItem
               testID={item.name}
@@ -82,6 +90,24 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
 
           {noTextMode ? null : <TagsSection />}
           <ColorSection noTextMode={noTextMode} />
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexGrow: 1,
+              paddingHorizontal: '10%',
+            }}>
+            <Heading style={{marginBottom: 2.5}} size={SIZE.sm}>
+              Your Pins
+            </Heading>
+            <Paragraph
+              style={{textAlign: 'center'}}
+              color={colors.icon}
+              size={SIZE.xs}>
+              You have not pinned anything yet. You can pin notebook topics and
+              tags here.
+            </Paragraph>
+          </View>
         </ScrollView>
 
         <View
@@ -113,4 +139,6 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
         </View>
       </View>
     );
-};
+  },
+  () => true,
+);

apps/mobile/src/navigation/Drawer.js

@@ -1,14 +1,14 @@
-import * as React from "react";
-import {eSubscribeEvent, eUnSubscribeEvent} from "../services/EventManager";
-import {eCloseSideMenu, eOpenSideMenu} from "../utils/Events";
-import {NavigationContainer} from "@react-navigation/native";
-import {sideMenuRef} from "../utils/Refs";
-import {Dimensions} from "react-native";
-import {NavigatorStack} from "./NavigatorStack";
-import {Menu} from "../components/Menu";
-import NavigationService from "../services/Navigation";
+import * as React from 'react';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../services/EventManager';
+import {eCloseSideMenu, eOpenSideMenu} from '../utils/Events';
+import {NavigationContainer} from '@react-navigation/native';
+import {sideMenuRef} from '../utils/Refs';
+import {Dimensions} from 'react-native';
+import {NavigatorStack} from './NavigatorStack';
+import {Menu} from '../components/Menu';
+import NavigationService from '../services/Navigation';
 import {createDrawerNavigator} from '@react-navigation/drawer';
-import {DDS} from "../services/DeviceDetection";
+import {DDS} from '../services/DeviceDetection';
 
 const Drawer = createDrawerNavigator();
 
@@ -39,7 +39,8 @@ export const NavigationStack = ({component = NavigatorStack}) => {
           swipeEnabled: locked ? false : true,
         }}
         drawerStyle={{
-                    width: DDS.isTab && !DDS.isSmallTab
+          width:
+            DDS.isTab && !DDS.isSmallTab
               ? Dimensions.get('window').width * 0.05
               : DDS.isSmallTab
               ? '40%'
@@ -50,19 +51,16 @@ export const NavigationStack = ({component = NavigatorStack}) => {
         drawerType={DDS.isTab || DDS.isSmallTab ? 'permanent' : 'slide'}
         drawerContent={DrawerComponent}
         initialRouteName="Main">
-                <Drawer.Screen name="Main" component={component}/>
+        <Drawer.Screen name="Main" component={component} />
       </Drawer.Navigator>
     </NavigationContainer>
   );
 };
 
-const DrawerComponent = (props) => {
+
+
+const DrawerComponent = () => {
   return (
-        <Menu
-            menuProps={props}
-            hide={false}
-            noTextMode={DDS.isTab && !DDS.isSmallTab}
-            close={() => NavigationService.closeDrawer()}
-        />
+    <Menu/>
   );
 };