Fix: back handler for Drawer

config/webpack/webpack.common.js

@@ -26,6 +26,7 @@ const includeModules = [
 
 const webpackConfig = {
     entry: {
+        polyfill: 'babel-polyfill',
         app: './index.js',
     },
     output: {

package.json

@@ -52,10 +52,11 @@
     "@react-native-masked-view/masked-view": "^0.2.4",
     "@react-native-picker/picker": "^1.9.11",
     "@react-navigation/compat": "^5.3.15",
-    "@react-navigation/drawer": "6.1.4",
-    "@react-navigation/native": "6.0.2",
-    "@react-navigation/stack": "6.0.7",
+    "@react-navigation/drawer": "6.1.7",
+    "@react-navigation/native": "6.0.5",
+    "@react-navigation/stack": "6.0.10",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-polyfill": "^6.26.0",
     "dotenv": "^8.2.0",
     "electron-context-menu": "^2.3.0",
     "electron-log": "^4.3.5",
@@ -92,7 +93,7 @@
     "react-native-permissions": "^3.0.1",
     "react-native-picker-select": "8.0.4",
     "react-native-plaid-link-sdk": "^7.1.0",
-    "react-native-reanimated": "^2.3.0-alpha.1",
+    "react-native-reanimated": "^2.3.0-beta.3",
     "react-native-render-html": "6.0.0-beta.8",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",

src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js → src/libs/Navigation/AppNavigator/DrawerNavigator/BaseDrawerNavigator.js

@@ -1,43 +1,21 @@
 import React from 'react';
 import _ from 'underscore';
-import PropTypes from 'prop-types';
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {View} from 'react-native';
-import styles, {getNavigationDrawerStyle, getNavigationDrawerType} from '../../../styles/styles';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import Navigation from '../Navigation';
+import styles, {getNavigationDrawerStyle, getNavigationDrawerType} from '../../../../styles/styles';
+import Navigation from '../../Navigation';
+import {propTypes, defaultProps} from './drawerNavigatorPropTypes';
 
-const propTypes = {
-    /** Screens to be passed in the Drawer */
-    screens: PropTypes.arrayOf(PropTypes.shape({
-        /** Name of the Screen */
-        name: PropTypes.string.isRequired,
-
-        /** Component for the Screen */
-        component: PropTypes.elementType.isRequired,
-
-        /** Optional params to be passed to the Screen */
-        // eslint-disable-next-line react/forbid-prop-types
-        initialParams: PropTypes.object,
-    })).isRequired,
-
-    /** Drawer content Component */
-    drawerContent: PropTypes.elementType.isRequired,
-
-    /** If it's the main screen, don't wrap the content even if it's a full screen modal. */
-    isMainScreen: PropTypes.bool,
-
-    /** Window Dimensions props */
-    ...windowDimensionsPropTypes,
-};
 const Drawer = createDrawerNavigator();
 
 const BaseDrawerNavigator = (props) => {
     const content = (
         <Drawer.Navigator
+            backBehavior="none"
             defaultStatus={Navigation.getDefaultDrawerState(props.isSmallScreenWidth)}
             sceneContainerStyle={styles.navigationSceneContainer}
             drawerContent={props.drawerContent}
+            useLegacyImplementation={props.useLegacyImplementation}
             screenOptions={{
                 cardStyle: styles.navigationScreenCardStyle,
                 headerShown: false,
@@ -71,5 +49,6 @@ const BaseDrawerNavigator = (props) => {
 };
 
 BaseDrawerNavigator.propTypes = propTypes;
+BaseDrawerNavigator.defaultProps = defaultProps;
 BaseDrawerNavigator.displayName = 'BaseDrawerNavigator';
-export default withWindowDimensions(BaseDrawerNavigator);
+export default BaseDrawerNavigator;

src/libs/Navigation/AppNavigator/DrawerNavigator/drawerNavigatorPropTypes.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
+
+const propTypes = {
+    /** Screens to be passed in the Drawer */
+    screens: PropTypes.arrayOf(PropTypes.shape({
+        /** Name of the Screen */
+        name: PropTypes.string.isRequired,
+
+        /** Component for the Screen */
+        component: PropTypes.elementType.isRequired,
+
+        /** Optional params to be passed to the Screen */
+        // eslint-disable-next-line react/forbid-prop-types
+        initialParams: PropTypes.object,
+    })).isRequired,
+
+    /** Drawer content Component */
+    drawerContent: PropTypes.elementType.isRequired,
+
+    /** Whether use the legacy implementation of Drawer */
+    useLegacyImplementation: PropTypes.bool,
+
+    /** If it's the main screen, don't wrap the content even if it's a full screen modal. */
+    isMainScreen: PropTypes.bool,
+
+    /** Window Dimensions props */
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    useLegacyImplementation: false,
+};
+
+export {
+    propTypes,
+    defaultProps,
+};

src/libs/Navigation/AppNavigator/DrawerNavigator/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import withWindowDimensions from '../../../../components/withWindowDimensions';
+import BaseDrawerNavigator from './BaseDrawerNavigator';
+import {propTypes, defaultProps} from './drawerNavigatorPropTypes';
+
+const DrawerNavigator = props => (
+    <BaseDrawerNavigator
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+
+        // Drawer's implementaion is buggy. Modern implementaion does not work on mobile web and legacy breaks the layout on Desktop while resizing.
+        // For some reason, drawer never closes when opening the Drawer screen on mobile web.
+        // So we will switch between implementations based on the device width.
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        useLegacyImplementation={props.isSmallScreenWidth}
+    />
+);
+
+DrawerNavigator.propTypes = propTypes;
+DrawerNavigator.defaultProps = defaultProps;
+DrawerNavigator.displayName = 'DrawerNavigator';
+export default withWindowDimensions(DrawerNavigator);

src/libs/Navigation/AppNavigator/DrawerNavigator/index.native.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import withWindowDimensions from '../../../../components/withWindowDimensions';
+import BaseDrawerNavigator from './BaseDrawerNavigator';
+import {propTypes, defaultProps} from './drawerNavigatorPropTypes';
+
+const DrawerNavigator = props => (
+    <BaseDrawerNavigator
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        useLegacyImplementation={false}
+    />
+);
+
+DrawerNavigator.propTypes = propTypes;
+DrawerNavigator.defaultProps = defaultProps;
+DrawerNavigator.displayName = 'DrawerNavigator';
+export default withWindowDimensions(DrawerNavigator);

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -11,7 +11,7 @@ import Permissions from '../../Permissions';
 // Screens
 import ReportScreen from '../../../pages/home/ReportScreen';
 import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
-import BaseDrawerNavigator from './BaseDrawerNavigator';
+import DrawerNavigator from './DrawerNavigator';
 import {findLastAccessedReport} from '../../reportUtils';
 
 const propTypes = {
@@ -56,7 +56,7 @@ const MainDrawerNavigator = (props) => {
     // This way routing information is updated (if needed) based on the initial report ID resolved.
     // This is usually needed after login/create account and re-launches
     return (
-        <BaseDrawerNavigator
+        <DrawerNavigator
             drawerContent={() => <SidebarScreen />}
             screens={[
                 {

src/libs/Navigation/CustomActions.js

@@ -74,8 +74,13 @@ function pushDrawerRoute(screenName, params, navigationRef) {
         }
 
         const screenRoute = {type: 'route', name: screenName};
-        const history = _.map([...(state.history || [])], () => screenRoute);
-        history.push(screenRoute);
+        const history = _.map([...(state.history || [screenRoute])], () => screenRoute);
+
+        // Force drawer to close and show the report screen
+        history.push({
+            type: 'drawer',
+            status: 'closed',
+        });
         return CommonActions.reset({
             ...state,
             routes: [{