Replaced custom sidemenu by global react navigation drawer for increased performance

components/BaseContainer.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import {Container} from "native-base";
 import CustomHeader from "./CustomHeader";
-import CustomSideMenu from "./CustomSideMenu";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 import {Platform, StatusBar, View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
@@ -25,7 +24,6 @@ type Props = {
 }
 
 type State = {
-    isOpen: boolean,
     isHeaderVisible: boolean
 }
 
@@ -43,20 +41,12 @@ export default class BaseContainer extends React.Component<Props, State> {
     willBlurSubscription: function;
     willFocusSubscription: function;
     state = {
-        isOpen: false,
         isHeaderVisible: true,
     };
 
     toggle() {
-        this.setState({
+        this.props.navigation.toggleDrawer();
-            isOpen: !this.state.isOpen,
-        });
     }
-
-    updateMenuState(isOpen: boolean) {
-        this.setState({isOpen});
-    }
-
     /**
      * Register for blur event to close side menu on screen change
      */
@@ -87,7 +77,6 @@ export default class BaseContainer extends React.Component<Props, State> {
             () => {
                 if (this.props.enableRotation)
                     ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-                this.setState({isOpen: false});
             }
         );
     }
@@ -128,20 +117,6 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
-        return (
+        return (this.getMainContainer());
-            <View style={{
-                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-                width: '100%',
-                height: '100%'
-            }}>
-                {this.props.hasSideMenu ?
-                    <CustomSideMenu
-                        navigation={this.props.navigation} isOpen={this.state.isOpen}
-                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
-                        {this.getMainContainer()}
-                    </CustomSideMenu> :
-                    this.getMainContainer()}
-            </View>
-        );
     }
 }

components/CustomSideMenu.js

@@ -1,48 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import SideMenu from "react-native-side-menu";
-import SideBar from "./Sidebar";
-import {View} from "react-native";
-
-
-type Props = {
-    navigation: Object,
-    children: React.Node,
-    isOpen: boolean,
-    onChange: Function,
-}
-
-type State = {
-    shouldShowMenu: boolean, // Prevent menu from showing in transitions between tabs
-}
-
-export default class CustomSideMenu extends React.Component<Props, State> {
-
-    state = {
-        shouldShowMenu: this.props.isOpen,
-    };
-
-    // Stop the side menu from being shown while tab transition is playing
-    // => Hide the menu when behind the actual screen
-    onMenuMove(percent: number) {
-        if (percent <= 0)
-            this.setState({shouldShowMenu: false});
-        else if (this.state.shouldShowMenu === false)
-            this.setState({shouldShowMenu: true});
-    }
-
-    render() {
-        return (
-            <SideMenu menu={
-                this.state.shouldShowMenu ?
-                    <SideBar navigation={this.props.navigation}/>
-                    : <View/>}
-                      isOpen={this.props.isOpen}
-                      onChange={this.props.onChange}
-                      onSliding={(percent) => this.onMenuMove(percent)}>
-                {this.props.children}
-            </SideMenu>
-        );
-    }
-}

navigation/AppNavigator.js

@@ -1,56 +1,14 @@
 // @flow
 
-import {createAppContainer, createStackNavigator} from 'react-navigation';
+import {createAppContainer} from 'react-navigation';
-import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
+import {createDrawerNavigatorWithInitialRoute} from './DrawerNavigator';
-import SettingsScreen from '../screens/SettingsScreen';
-import AboutScreen from '../screens/About/AboutScreen';
-import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
-import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
-import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
-import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
-import SelfMenuScreen from '../screens/SelfMenuScreen';
-import TutorInsaScreen from "../screens/Websites/TutorInsaScreen";
-import AmicaleScreen from "../screens/Websites/AmicaleScreen";
-import WiketudScreen from "../screens/Websites/WiketudScreen";
-import ElusEtudScreen from "../screens/Websites/ElusEtudScreen";
-import BlueMindScreen from "../screens/Websites/BlueMindScreen";
-import EntScreen from "../screens/Websites/EntScreen";
-import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
-import DebugScreen from '../screens/DebugScreen';
-import {fromRight} from "react-navigation-transitions";
 
 
 /**
  * Create a stack navigator using the drawer to handle navigation between screens
  */
 function createAppContainerWithInitialRoute(initialRoute: string) {
-    return createAppContainer(
+    return createAppContainer(createDrawerNavigatorWithInitialRoute(initialRoute));
-        createStackNavigator({
-                Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
-                // Drawer: MainDrawerNavigator,
-                ProximoListScreen: {screen: ProximoListScreen},
-                SettingsScreen: {screen: SettingsScreen},
-                AboutScreen: {screen: AboutScreen},
-                AboutDependenciesScreen: {screen: AboutDependenciesScreen},
-                SelfMenuScreen: {screen: SelfMenuScreen},
-                TutorInsaScreen: {screen: TutorInsaScreen},
-                AmicaleScreen: {screen: AmicaleScreen},
-                WiketudScreen: {screen: WiketudScreen},
-                ElusEtudScreen: {screen: ElusEtudScreen},
-                BlueMindScreen: {screen: BlueMindScreen},
-                EntScreen: {screen: EntScreen},
-                AvailableRoomScreen: {screen: AvailableRoomScreen},
-                ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
-                ProximoAboutScreen: {screen: ProximoAboutScreen},
-                DebugScreen: {screen: DebugScreen},
-            },
-            {
-                initialRouteName: "Main",
-                mode: 'card',
-                headerMode: "none",
-                transitionConfig: () => fromRight(),
-            })
-    );
 }
 
 export {createAppContainerWithInitialRoute};

navigation/DrawerNavigator.js

@@ -0,0 +1,58 @@
+// @flow
+
+import { createDrawerNavigator } from 'react-navigation-drawer';
+import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
+import SettingsScreen from '../screens/SettingsScreen';
+import AboutScreen from '../screens/About/AboutScreen';
+import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
+import SelfMenuScreen from '../screens/SelfMenuScreen';
+import TutorInsaScreen from "../screens/Websites/TutorInsaScreen";
+import AmicaleScreen from "../screens/Websites/AmicaleScreen";
+import WiketudScreen from "../screens/Websites/WiketudScreen";
+import ElusEtudScreen from "../screens/Websites/ElusEtudScreen";
+import BlueMindScreen from "../screens/Websites/BlueMindScreen";
+import EntScreen from "../screens/Websites/EntScreen";
+import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
+import DebugScreen from '../screens/DebugScreen';
+import {fromRight} from "react-navigation-transitions";
+import Sidebar from "../components/Sidebar";
+import {createStackNavigator} from "react-navigation";
+
+const AboutStack = createStackNavigator({
+        AboutScreen: {screen: AboutScreen},
+        AboutDependenciesScreen: {screen: AboutDependenciesScreen},
+        DebugScreen: {screen: DebugScreen},
+    },
+    {
+        initialRouteName: "AboutScreen",
+        mode: 'card',
+        headerMode: "none",
+        transitionConfig: () => fromRight(),
+    });
+
+/**
+ * Creates the drawer navigation stack
+ */
+function createDrawerNavigatorWithInitialRoute(initialRoute: string) {
+    return createDrawerNavigator({
+        Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
+        SettingsScreen: {screen: SettingsScreen},
+        AboutScreen: AboutStack,
+        SelfMenuScreen: {screen: SelfMenuScreen},
+        TutorInsaScreen: {screen: TutorInsaScreen},
+        AmicaleScreen: {screen: AmicaleScreen},
+        WiketudScreen: {screen: WiketudScreen},
+        ElusEtudScreen: {screen: ElusEtudScreen},
+        BlueMindScreen: {screen: BlueMindScreen},
+        EntScreen: {screen: EntScreen},
+        AvailableRoomScreen: {screen: AvailableRoomScreen},
+    }, {
+        contentComponent: Sidebar,
+        initialRouteName: 'Main',
+        backBehavior: 'initialRoute',
+        drawerType: 'front',
+        useNativeAnimations: true,
+    });
+}
+
+export {createDrawerNavigatorWithInitialRoute};

navigation/MainTabNavigator.js

@@ -1,13 +1,18 @@
 import * as React from 'react';
+import {createStackNavigator} from 'react-navigation';
 import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
 
 import HomeScreen from '../screens/HomeScreen';
 import PlanningScreen from '../screens/PlanningScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
+import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
 import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
+import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
+import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
+import {fromRight} from "react-navigation-transitions";
 
 const TAB_ICONS = {
     Home: 'triangle',
@@ -17,12 +22,35 @@ const TAB_ICONS = {
     Planex: 'timetable',
 };
 
+const ProximoStack = createStackNavigator({
+        ProximoMainScreen: {screen: ProximoMainScreen},
+        ProximoListScreen: {screen: ProximoListScreen},
+        ProximoAboutScreen: {screen: ProximoAboutScreen},
+    },
+    {
+        initialRouteName: "ProximoMainScreen",
+        mode: 'card',
+        headerMode: "none",
+        transitionConfig: () => fromRight(),
+    });
+
+const ProxiwashStack = createStackNavigator({
+        ProxiwashScreen: {screen: ProxiwashScreen},
+        ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
+    },
+    {
+        initialRouteName: "ProxiwashScreen",
+        mode: 'card',
+        headerMode: "none",
+        transitionConfig: () => fromRight(),
+    });
+
 function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) {
     return createMaterialBottomTabNavigator({
         Home: {screen: HomeScreen},
-        Planning: {screen: PlanningScreen,},
+        Planning: {screen: PlanningScreen},
-        Proxiwash: {screen: ProxiwashScreen,},
+        Proxiwash: ProxiwashStack,
-        Proximo: {screen: ProximoMainScreen,},
+        Proximo: ProximoStack,
         Planex: {
             screen: PlanexScreen,
             navigationOptions: ({navigation}) => {

package.json

@@ -29,12 +29,13 @@
     "react-native-platform-touchable": "^1.1.1",
     "react-native-render-html": "^4.1.2",
     "react-native-screens": "2.0.0-alpha.12",
-    "react-native-side-menu": "^1.1.3",
     "react-native-status-bar-height": "^2.3.1",
     "react-native-webview": "7.4.3",
     "react-navigation": "^3.13.0",
+    "react-navigation-drawer": "^2.3.3",
     "react-navigation-material-bottom-tabs": "^1.1.1",
-    "react-navigation-transitions": "^1.0.12"
+    "react-navigation-transitions": "^1.0.12",
+    "react-native-reanimated": "~1.4.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^8.0.0"