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

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

@@ -0,0 +1,19 @@
+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 95e6871..18bb14d 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
+@@ -353,6 +353,14 @@ export default class CardStack extends React.Component {
+           extrapolate: 'clamp'
+         }) : STATE_TRANSITIONING_OR_BELOW_TOP;
+       }
++      
++      if (route.name === 'Home' && isScreenActive !== STATE_ON_TOP) {
++        isScreenActive = STATE_TRANSITIONING_OR_BELOW_TOP;
++      }
++
++      
++
++
+       const {
+         headerShown = true,
+         headerTransparent,

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,9 +30,10 @@ 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 styles from '../../../styles/styles';
 import * as SessionUtils from '../../SessionUtils';
+import variables from '../../../styles/variables';
+import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage';
+import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 
 let currentUserEmail;
 Onyx.connect({
@@ -67,7 +68,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
@@ -190,109 +191,84 @@ 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: styles.navigationModalCard(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_FROM_OLD_DOT}
-                    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.Navigator>
+            <View style={{marginLeft: this.props.isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}}>
+                <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="ValidateLogin"
+                        options={{
+                            headerShown: false,
+                            title: 'New Expensify',
+                        }}
+                        getComponent={() => {
+                            const ValidateLoginPage = require('../../../pages/ValidateLoginPage').default;
+                            return ValidateLoginPage;
+                        }}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.TRANSITION_FROM_OLD_DOT}
+                        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={SCREENS.NOT_FOUND}
+                        options={screenOptions.notFoundScreen}
+                        component={NotFoundPage}
+                    />
+                    <RootStack.Screen
+                        name={NAVIGATORS.RIGHT_MODAL_NAVIGATOR}
+                        options={screenOptions.rightModalNavigator}
+                        component={RightModalNavigator}
+                        listeners={modalScreenListeners}
+                    />
+                </RootStack.Navigator>
+            </View>
         );
     }
 }

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import {Pressable, StyleSheet, Animated} from 'react-native';
+import {useCardAnimation} from '@react-navigation/stack';
+
+import PropTypes from 'prop-types';
+import variables from '../../../../styles/variables';
+import themeColors from '../../../../styles/themes/default';
+import styles from '../../../../styles/styles';
+
+const propTypes = {
+    /* Callback to close the modal */
+    onPress: PropTypes.func.isRequired,
+};
+
+function Overlay(props) {
+    const {current} = useCardAnimation();
+
+    const overlayStyles = {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: themeColors.overlay,
+        opacity: current.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, variables.overlayOpacity],
+            extrapolate: 'clamp',
+        }),
+    };
+    return (
+        <Animated.View style={overlayStyles}>
+            <Pressable
+                onPress={props.onPress}
+                style={styles.flex1}
+            />
+        </Animated.View>
+    );
+}
+
+Overlay.propTypes = propTypes;
+Overlay.displayName = 'Overlay';
+
+export default Overlay;