[navigation-refactor] Style based approach for the three pane layout

patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch

@@ -0,0 +1,68 @@
+diff --git a/node_modules/@react-navigation/stack/lib/module/views/Stack/Card.js b/node_modules/@react-navigation/stack/lib/module/views/Stack/Card.js
+index 4bedb81..155d87f 100644
+--- a/node_modules/@react-navigation/stack/lib/module/views/Stack/Card.js
++++ b/node_modules/@react-navigation/stack/lib/module/views/Stack/Card.js
+@@ -123,7 +123,7 @@ export default class Card extends React.Component {
+     animation(gesture, {
+       ...spec.config,
+       // Detecting if the user used swipe gesture on iOS safari to trigger navigation in the browser history.
+-      duration: getIsEdgeDragGesture() ? 0 : undefined,
++      duration: getIsEdgeDragGesture() ? 0 : spec.config.duration,
+       velocity,
+       toValue,
+       useNativeDriver,
+diff --git a/node_modules/@react-navigation/stack/lib/module/views/Stack/CardContainer.js b/node_modules/@react-navigation/stack/lib/module/views/Stack/CardContainer.js
+index b595af8..870be65 100644
+--- a/node_modules/@react-navigation/stack/lib/module/views/Stack/CardContainer.js
++++ b/node_modules/@react-navigation/stack/lib/module/views/Stack/CardContainer.js
+@@ -1,7 +1,7 @@
+ import { getHeaderTitle, HeaderBackContext, HeaderHeightContext, HeaderShownContext } from '@react-navigation/elements';
+ import { useTheme } from '@react-navigation/native';
+ import * as React from 'react';
+-import { StyleSheet, View } from 'react-native';
++import { Platform, StyleSheet, View } from 'react-native';
+ import ModalPresentationContext from '../../utils/ModalPresentationContext';
+ import useKeyboardManager from '../../utils/useKeyboardManager';
+ import Card from './Card';
+@@ -215,7 +215,8 @@ function CardContainer(_ref) {
+       display:
+       // Hide unfocused screens when animation isn't enabled
+       // This is also necessary for a11y on web
+-      animationEnabled === false && isNextScreenTransparent === false && detachCurrentScreen !== false && !focused ? 'none' : 'flex'
++      animationEnabled === false && isNextScreenTransparent === false && detachCurrentScreen !== false && !focused ? 'none' : 'flex',
++      zIndex: Platform.OS === 'web' ? 'auto' : undefined,
+     }, StyleSheet.absoluteFill]
+   }, /*#__PURE__*/React.createElement(View, {
+     style: styles.container
+diff --git a/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js b/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js
+index 7558eb3..b7bb75e 100644
+--- a/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js
++++ b/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js
+@@ -356,6 +356,9 @@ export default class CardStack extends React.Component {
+           extrapolate: 'clamp'
+         }) : STATE_TRANSITIONING_OR_BELOW_TOP;
+       }
++      
++      const isHomeScreenAndNotOnTop = route.name === 'Home' && isScreenActive !== STATE_ON_TOP;
++
+       const {
+         headerShown = true,
+         headerTransparent,
+@@ -389,7 +392,7 @@ export default class CardStack extends React.Component {
+         key: route.key,
+         style: StyleSheet.absoluteFill,
+         enabled: detachInactiveScreens,
+-        active: isScreenActive,
++        active: isHomeScreenAndNotOnTop ? STATE_TRANSITIONING_OR_BELOW_TOP : isScreenActive,
+         freezeOnBlur: freezeOnBlur,
+         pointerEvents: "box-none"
+       }, /*#__PURE__*/React.createElement(CardContainer, {
+@@ -423,7 +426,7 @@ export default class CardStack extends React.Component {
+         onTransitionStart: onTransitionStart,
+         onTransitionEnd: onTransitionEnd,
+         isNextScreenTransparent: isNextScreenTransparent,
+-        detachCurrentScreen: detachCurrentScreen
++        detachCurrentScreen: isHomeScreenAndNotOnTop ? false : detachCurrentScreen,
+       }));
+     })), isFloatHeaderAbsolute ? floatingHeader : null);
+   }

src/SCREENS.ts

@@ -9,10 +9,13 @@ export default {
     REPORT_ATTACHMENTS: 'ReportAttachments',
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
+    VALIDATE_LOGIN: 'ValidateLogin',
+    CONCIERGE: 'Concierge',
     SETTINGS: {
         PREFERENCES: 'Settings_Preferences',
         WORKSPACES: 'Settings_Workspaces',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
+    DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect',
 } as const;

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {View} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import CONST from '../../../CONST';
 import compose from '../../compose';
@@ -20,8 +21,7 @@ import Navigation from '../Navigation';
 import * as User from '../../actions/User';
 import * as Modal from '../../actions/Modal';
 import * as Report from '../../actions/Report';
-import modalCardStyleInterpolator from './modalCardStyleInterpolator';
-import createResponsiveStackNavigator from './createResponsiveStackNavigator';
+import createCustomStackNavigator from './createCustomStackNavigator';
 import SCREENS from '../../../SCREENS';
 import defaultScreenOptions from './defaultScreenOptions';
 import * as App from '../../actions/App';
@@ -30,11 +30,11 @@ import * as Session from '../../actions/Session';
 import RightModalNavigator from './Navigators/RightModalNavigator';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import NAVIGATORS from '../../../NAVIGATORS';
-import FullScreenNavigator from './Navigators/FullScreenNavigator';
 import DesktopSignInRedirectPage from '../../../pages/signin/DesktopSignInRedirectPage';
 import styles from '../../../styles/styles';
 import * as SessionUtils from '../../SessionUtils';
-import getNavigationModalCardStyle from '../../../styles/getNavigationModalCardStyles';
+import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage';
+import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 
 let timezone;
 let currentAccountID;
@@ -75,7 +75,7 @@ Onyx.connect({
     },
 });
 
-const RootStack = createResponsiveStackNavigator();
+const RootStack = createCustomStackNavigator();
 
 // We want to delay the re-rendering for components(e.g. ReportActionCompose)
 // that depends on modal visibility until Modal is completely closed and its focused
@@ -211,116 +211,89 @@ class AuthScreens extends React.Component {
     }
 
     render() {
-        const commonScreenOptions = {
-            headerShown: false,
-            gestureDirection: 'horizontal',
-            animationEnabled: true,
-            cardStyleInterpolator: (props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props),
-            cardOverlayEnabled: true,
-            animationTypeForReplace: 'push',
-        };
-
-        const rightModalNavigatorScreenOptions = {
-            ...commonScreenOptions,
-            // we want pop in RHP since there are some flows that would work weird otherwise
-            animationTypeForReplace: 'pop',
-            cardStyle: getNavigationModalCardStyle({
-                isSmallScreenWidth: this.props.isSmallScreenWidth,
-            }),
-        };
+        const screenOptions = getRootNavigatorScreenOptions(this.props.isSmallScreenWidth);
 
         return (
-            <RootStack.Navigator
-                isSmallScreenWidth={this.props.isSmallScreenWidth}
-                mode="modal"
-                // We are disabling the default keyboard handling here since the automatic behavior is to close a
-                // keyboard that's open when swiping to dismiss a modal. In those cases, pressing the back button on
-                // a header will briefly open and close the keyboard and crash Android.
-                // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                keyboardHandlingEnabled={false}
-            >
-                <RootStack.Screen
-                    name={SCREENS.HOME}
-                    options={{
-                        ...commonScreenOptions,
-                        title: 'New Expensify',
-
-                        // Prevent unnecessary scrolling
-                        cardStyle: styles.cardStyleNavigator,
-                    }}
-                    getComponent={() => {
-                        const SidebarScreen = require('../../../pages/home/sidebar/SidebarScreen').default;
-                        return SidebarScreen;
-                    }}
-                />
-                <RootStack.Screen
-                    name={NAVIGATORS.CENTRAL_PANE_NAVIGATOR}
-                    options={{
-                        ...commonScreenOptions,
-                        title: 'New Expensify',
-
-                        // Prevent unnecessary scrolling
-                        cardStyle: styles.cardStyleNavigator,
-                        cardStyleInterpolator: (props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props),
-                    }}
-                    component={CentralPaneNavigator}
-                />
-                <RootStack.Screen
-                    name="ValidateLogin"
-                    options={{
-                        headerShown: false,
-                        title: 'New Expensify',
-                    }}
-                    getComponent={() => {
-                        const ValidateLoginPage = require('../../../pages/ValidateLoginPage').default;
-                        return ValidateLoginPage;
-                    }}
-                />
-                <RootStack.Screen
-                    name={SCREENS.TRANSITION_BETWEEN_APPS}
-                    options={defaultScreenOptions}
-                    getComponent={() => {
-                        const LogOutPreviousUserPage = require('../../../pages/LogOutPreviousUserPage').default;
-                        return LogOutPreviousUserPage;
-                    }}
-                />
-                <RootStack.Screen
-                    name="Concierge"
-                    options={defaultScreenOptions}
-                    getComponent={() => {
-                        const ConciergePage = require('../../../pages/ConciergePage').default;
-                        return ConciergePage;
-                    }}
-                />
-                <RootStack.Screen
-                    name={SCREENS.REPORT_ATTACHMENTS}
-                    options={{
-                        headerShown: false,
-                        presentation: 'transparentModal',
-                    }}
-                    getComponent={() => {
-                        const ReportAttachments = require('../../../pages/home/report/ReportAttachments').default;
-                        return ReportAttachments;
-                    }}
-                    listeners={modalScreenListeners}
-                />
-                <RootStack.Screen
-                    name={NAVIGATORS.FULL_SCREEN_NAVIGATOR}
-                    options={defaultScreenOptions}
-                    component={FullScreenNavigator}
-                />
-                <RootStack.Screen
-                    name={NAVIGATORS.RIGHT_MODAL_NAVIGATOR}
-                    options={rightModalNavigatorScreenOptions}
-                    component={RightModalNavigator}
-                    listeners={modalScreenListeners}
-                />
-                <RootStack.Screen
-                    name="DesktopSignInRedirect"
-                    options={defaultScreenOptions}
-                    component={DesktopSignInRedirectPage}
-                />
-            </RootStack.Navigator>
+            <View style={styles.rootNavigatorContainerStyles(this.props.isSmallScreenWidth)}>
+                <RootStack.Navigator
+                    isSmallScreenWidth={this.props.isSmallScreenWidth}
+                    mode="modal"
+                    // We are disabling the default keyboard handling here since the automatic behavior is to close a
+                    // keyboard that's open when swiping to dismiss a modal. In those cases, pressing the back button on
+                    // a header will briefly open and close the keyboard and crash Android.
+                    // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                    keyboardHandlingEnabled={false}
+                >
+                    <RootStack.Screen
+                        name={SCREENS.HOME}
+                        options={screenOptions.homeScreen}
+                        getComponent={() => {
+                            const SidebarScreen = require('../../../pages/home/sidebar/SidebarScreen').default;
+                            return SidebarScreen;
+                        }}
+                    />
+                    <RootStack.Screen
+                        name={NAVIGATORS.CENTRAL_PANE_NAVIGATOR}
+                        options={screenOptions.centralPaneNavigator}
+                        component={CentralPaneNavigator}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.VALIDATE_LOGIN}
+                        options={{
+                            headerShown: false,
+                            title: 'New Expensify',
+                        }}
+                        getComponent={() => {
+                            const ValidateLoginPage = require('../../../pages/ValidateLoginPage').default;
+                            return ValidateLoginPage;
+                        }}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.TRANSITION_BETWEEN_APPS}
+                        options={defaultScreenOptions}
+                        getComponent={() => {
+                            const LogOutPreviousUserPage = require('../../../pages/LogOutPreviousUserPage').default;
+                            return LogOutPreviousUserPage;
+                        }}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.CONCIERGE}
+                        options={defaultScreenOptions}
+                        getComponent={() => {
+                            const ConciergePage = require('../../../pages/ConciergePage').default;
+                            return ConciergePage;
+                        }}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.REPORT_ATTACHMENTS}
+                        options={{
+                            headerShown: false,
+                            presentation: 'transparentModal',
+                        }}
+                        getComponent={() => {
+                            const ReportAttachments = require('../../../pages/home/report/ReportAttachments').default;
+                            return ReportAttachments;
+                        }}
+                        listeners={modalScreenListeners}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.NOT_FOUND}
+                        options={screenOptions.fullScreen}
+                        component={NotFoundPage}
+                    />
+                    <RootStack.Screen
+                        name={NAVIGATORS.RIGHT_MODAL_NAVIGATOR}
+                        options={screenOptions.rightModalNavigator}
+                        component={RightModalNavigator}
+                        listeners={modalScreenListeners}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.DESKTOP_SIGN_IN_REDIRECT}
+                        options={screenOptions.fullScreen}
+                        component={DesktopSignInRedirectPage}
+                    />
+                </RootStack.Navigator>
+            </View>
         );
     }
 }

src/libs/Navigation/AppNavigator/Navigators/Overlay.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Animated, View} from 'react-native';
+import {useCardAnimation} from '@react-navigation/stack';
+
+import PropTypes from 'prop-types';
+import styles from '../../../../styles/styles';
+
+import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback';
+import useLocalize from '../../../../hooks/useLocalize';
+import CONST from '../../../../CONST';
+
+const propTypes = {
+    /* Callback to close the modal */
+    onPress: PropTypes.func.isRequired,
+};
+
+function Overlay(props) {
+    const {current} = useCardAnimation();
+    const {translate} = useLocalize();
+
+    return (
+        <Animated.View style={styles.overlayStyles(current)}>
+            <View style={[styles.flex1, styles.flexColumn]}>
+                {/* In the latest Electron version buttons can't be both clickable and draggable. 
+                    That's why we added this workaround. Because of two Pressable components on the desktop app 
+                    we have 30px draggable ba at the top and the rest of the dimmed area is clickable. On other devices,
+                    everything behaves normally like one big pressable */}
+                <PressableWithoutFeedback
+                    style={[styles.draggableTopBar]}
+                    onPress={props.onPress}
+                    accessibilityLabel={translate('common.close')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                />
+                <PressableWithoutFeedback
+                    style={[styles.flex1]}
+                    onPress={props.onPress}
+                    accessibilityLabel={translate('common.close')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    noDragArea
+                />
+            </View>
+        </Animated.View>
+    );
+}
+
+Overlay.propTypes = propTypes;
+Overlay.displayName = 'Overlay';
+
+export default Overlay;