From 89305e402de3dbcf6e9e2aba169d4929f2fc395c Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 7 Jul 2023 18:01:14 +0200 Subject: [PATCH 01/20] switch to style based three pane view --- .../Navigation/AppNavigator/AuthScreens.js | 188 ++++++++--------- .../Navigators/FullScreenNavigator.js | 21 -- .../AppNavigator/Navigators/Overlay.js | 40 ++++ .../Navigators/RightModalNavigator.js | 195 ++++++++++-------- .../CustomRouter.js | 2 +- .../index.js | 23 +-- .../ThreePaneView.js | 88 -------- .../getRootNavigatorScreenOptions.js | 64 ++++++ .../modalCardStyleInterpolator.js | 16 +- src/libs/Navigation/NavigationRoot.js | 16 +- src/libs/Navigation/linkingConfig.js | 6 +- src/styles/cardStyles/index.js | 7 +- src/styles/styles.js | 10 +- 13 files changed, 326 insertions(+), 350 deletions(-) delete mode 100644 src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.js create mode 100644 src/libs/Navigation/AppNavigator/Navigators/Overlay.js rename src/libs/Navigation/AppNavigator/{createResponsiveStackNavigator => createCustomStackNavigator}/CustomRouter.js (97%) rename src/libs/Navigation/AppNavigator/{createResponsiveStackNavigator => createCustomStackNavigator}/index.js (77%) delete mode 100644 src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js create mode 100644 src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index c2fe7d3475e0..2367a665c4b1 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/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 ( - - { - const SidebarScreen = require('../../../pages/home/sidebar/SidebarScreen').default; - return SidebarScreen; - }} - /> - modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props), - }} - component={CentralPaneNavigator} - /> - { - const ValidateLoginPage = require('../../../pages/ValidateLoginPage').default; - return ValidateLoginPage; - }} - /> - { - const LogOutPreviousUserPage = require('../../../pages/LogOutPreviousUserPage').default; - return LogOutPreviousUserPage; - }} - /> - { - const ConciergePage = require('../../../pages/ConciergePage').default; - return ConciergePage; - }} - /> - { - const ReportAttachments = require('../../../pages/home/report/ReportAttachments').default; - return ReportAttachments; - }} - listeners={modalScreenListeners} - /> - - - + + + { + const SidebarScreen = require('../../../pages/home/sidebar/SidebarScreen').default; + return SidebarScreen; + }} + /> + + { + const ValidateLoginPage = require('../../../pages/ValidateLoginPage').default; + return ValidateLoginPage; + }} + /> + { + const LogOutPreviousUserPage = require('../../../pages/LogOutPreviousUserPage').default; + return LogOutPreviousUserPage; + }} + /> + { + const ConciergePage = require('../../../pages/ConciergePage').default; + return ConciergePage; + }} + /> + { + const ReportAttachments = require('../../../pages/home/report/ReportAttachments').default; + return ReportAttachments; + }} + listeners={modalScreenListeners} + /> + + + + ); } } diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.js deleted file mode 100644 index 4ff19e6307b1..000000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import {createStackNavigator} from '@react-navigation/stack'; - -import SCREENS from '../../../../SCREENS'; -import NotFoundPage from '../../../../pages/ErrorPage/NotFoundPage'; - -const Stack = createStackNavigator(); - -function FullScreenNavigator() { - return ( - - - - ); -} - -export default FullScreenNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js new file mode 100644 index 000000000000..a5f7e3206473 --- /dev/null +++ b/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 ( + + + + ); +} + +Overlay.propTypes= propTypes; +Overlay.displayName = 'Overlay'; + +export default Overlay; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 7b22475bc623..d21a65768a0e 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -1,96 +1,123 @@ import React from 'react'; +import {View} from 'react-native'; import {createStackNavigator} from '@react-navigation/stack'; import * as ModalStackNavigators from '../ModalStackNavigators'; import RHPScreenOptions from '../RHPScreenOptions'; +import useWindowDimensions from '../../../../hooks/useWindowDimensions'; +import variables from '../../../../styles/variables'; +import {withNavigationPropTypes} from '../../../../components/withNavigation'; +import styles from '../../../../styles/styles'; +import Overlay from './Overlay'; const Stack = createStackNavigator(); -function RigthModalNavigator() { +const propTypes = { + ...withNavigationPropTypes, +}; + +function RightModalNavigator(props) { + const {isSmallScreenWidth} = useWindowDimensions(); + return ( - - - - - - - - - - - - - - - - - - - - - - + <> + {!isSmallScreenWidth && } + + + + + + + + + + + + + + + + + + + + + + + + + ); } -export default RigthModalNavigator; +RightModalNavigator.propTypes = propTypes; +RightModalNavigator.displayName = 'RightModalNavigator'; + +export default RightModalNavigator; diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/CustomRouter.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js similarity index 97% rename from src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/CustomRouter.js rename to src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js index 369d5061c445..a3d8398a22b0 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/CustomRouter.js +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js @@ -27,7 +27,7 @@ function CustomRouter(options) { ...stackRouter, getRehydratedState(partialState, {routeNames, routeParamList}) { // Make sure that there is at least one CentralPaneNavigator (ReportScreen by default) in the state if this is a wide layout - if (!isAtLeastOneCentralPaneNavigatorInState(partialState) && !options.isSmallScreenWidth) { + if (!isAtLeastOneCentralPaneNavigatorInState(partialState) && !options.getIsSmallScreenWidth()) { // If we added a route we need to make sure that the state.stale is true to generate new key for this route // eslint-disable-next-line no-param-reassign partialState.stale = true; diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/index.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js similarity index 77% rename from src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/index.js rename to src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js index fa2c2d6b0558..80586ed35ddd 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/index.js +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js @@ -1,8 +1,7 @@ -import * as React from 'react'; +import React, {useRef, useEffect} from 'react'; import PropTypes from 'prop-types'; import {useNavigationBuilder, createNavigatorFactory} from '@react-navigation/native'; import {StackView} from '@react-navigation/stack'; -import ThreePaneView from './ThreePaneView'; import CustomRouter from './CustomRouter'; const propTypes = { @@ -25,15 +24,21 @@ const defaultProps = { screenOptions: undefined, }; + function ResponsiveStackNavigator(props) { + const isSmallScreenWidthRef = useRef(props.isSmallScreenWidth); const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder(CustomRouter, { children: props.children, screenOptions: props.screenOptions, initialRouteName: props.initialRouteName, - isSmallScreenWidth: props.isSmallScreenWidth, + getIsSmallScreenWidth: () => isSmallScreenWidthRef.current, }); - return props.isSmallScreenWidth ? ( + useEffect(() => { + isSmallScreenWidthRef.current = props.isSmallScreenWidth; + }, [props.isSmallScreenWidth, isSmallScreenWidthRef]); + + return ( - ) : ( - - - ); } diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js deleted file mode 100644 index d5555b83ea94..000000000000 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import _ from 'underscore'; -import {View, Pressable} from 'react-native'; -import PropTypes from 'prop-types'; -import SCREENS from '../../../../SCREENS'; -import themeColors from '../../../../styles/themes/default'; -import NAVIGATORS from '../../../../NAVIGATORS'; -import * as StyleUtils from '../../../../styles/StyleUtils'; -import {withNavigationPropTypes} from '../../../../components/withNavigation'; -import styles from '../../../../styles/styles'; -import CONST from '../../../../CONST'; - -const propTypes = { - /* State from useNavigationBuilder */ - // eslint-disable-next-line react/forbid-prop-types - state: PropTypes.object.isRequired, - - /* Descriptors from useNavigationBuilder */ - // eslint-disable-next-line react/forbid-prop-types - descriptors: PropTypes.object.isRequired, - - ...withNavigationPropTypes, -}; - -function ThreePaneView(props) { - const lastCentralPaneIndex = _.findLastIndex(props.state.routes, {name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR}); - - return ( - - {_.map(props.state.routes, (route, i) => { - if (route.name === SCREENS.HOME) { - return ( - - {props.descriptors[route.key].render()} - - ); - } - if (route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR) { - return ( - - {props.descriptors[route.key].render()} - - ); - } - if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { - return ( - - props.navigation.goBack()} - /> - {props.descriptors[route.key].render()} - - ); - } - return ( - - {props.descriptors[route.key].render()} - - ); - })} - - ); -} - -ThreePaneView.propTypes = propTypes; -ThreePaneView.displayName = 'ThreePaneView'; - -export default ThreePaneView; diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js new file mode 100644 index 000000000000..eaf68b8993f0 --- /dev/null +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -0,0 +1,64 @@ +import modalCardStyleInterpolator from './modalCardStyleInterpolator'; +import styles from '../../../styles/styles'; +import variables from '../../../styles/variables'; + +const commonScreenOptions = { + headerShown: false, + gestureDirection: 'horizontal', + animationEnabled: true, + cardOverlayEnabled: true, + animationTypeForReplace: 'push', +}; + +export default (isSmallScreenWidth) => ({ + rightModalNavigator: { + ...commonScreenOptions, + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + presentation: 'transparentModal', + + // we want pop in RHP since there are some flows that would work weird otherwise + animationTypeForReplace: 'pop', + cardStyle: { + ...styles.cardStyleNavigator, + + // This is necessary to cover translated sidebar with overlay. + marginLeft: isSmallScreenWidth ? 0 : -2 * variables.sideBarWidth, + }, + }, + + homeScreen: { + title: 'New Expensify', + ...commonScreenOptions, + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + + // Prevent unnecessary scrolling + cardStyle: { + ...styles.cardStyleNavigator, + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + + // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable. + transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}], + ...(isSmallScreenWidth ? {} : styles.borderRight), + }, + }, + // eslint-disable-next-line rulesdir/no-negated-variables + notFoundScreen: { + ...commonScreenOptions, + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), + cardStyle: { + ...styles.cardStyleNavigator, + + // This is necessary to cover whole screen. Including translated sidebar. + marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + }, + }, + + centralPaneNavigator: { + title: 'New Expensify', + ...commonScreenOptions, + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), + + // Prevent unnecessary scrolling + cardStyle: styles.cardStyleNavigator, + }, +}); diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js index d2de1ba23a01..ec442efbba86 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js @@ -1,7 +1,6 @@ import {Animated} from 'react-native'; import variables from '../../../styles/variables'; import getCardStyles from '../../../styles/cardStyles'; -import themeColors from '../../../styles/themes/default'; export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inverted, layouts: {screen}}) => { const translateX = Animated.multiply( @@ -13,12 +12,9 @@ export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inv inverted, ); - const opacity = Animated.multiply(progress, inverted); - const cardStyle = getCardStyles(isSmallScreenWidth, screen.width); + const cardStyle = getCardStyles(screen.width); - if (isFullScreenModal && !isSmallScreenWidth) { - cardStyle.opacity = opacity; - } else { + if (!isFullScreenModal || isSmallScreenWidth) { cardStyle.transform = [{translateX}]; } @@ -27,13 +23,5 @@ export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inv overflow: 'hidden', }, cardStyle, - overlayStyle: { - backgroundColor: themeColors.overlay, - opacity: progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, variables.overlayOpacity], - extrapolate: 'clamp', - }), - }, }; }; diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 23c320eb991c..42d6627d6699 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -52,7 +52,6 @@ function parseAndLogRoute(state) { function NavigationRoot(props) { useFlipper(navigationRef); - const navigationStateRef = useRef(undefined); const firstRenderRef = useRef(true); const {updateCurrentReportID} = useCurrentReportID(); @@ -72,6 +71,14 @@ function NavigationRoot(props) { Navigation.setShouldPopAllStateOnUP(); }, [isSmallScreenWidth]); + useEffect(() => { + if (!navigationRef.isReady()) { + return; + } + // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary. + navigationRef.resetRoot(navigationRef.getRootState()); + }, [isSmallScreenWidth]); + const prevStatusBarBackgroundColor = useRef(themeColors.appBG); const statusBarBackgroundColor = useRef(themeColors.appBG); const statusBarAnimation = useSharedValue(0); @@ -105,11 +112,10 @@ function NavigationRoot(props) { ); }; - const updateSavedNavigationStateAndLogRoute = (state) => { + const handleStateChange = (state) => { if (!state) { return; } - navigationStateRef.current = state; updateCurrentReportID(state); parseAndLogRoute(state); animateStatusBarBackgroundColor(); @@ -117,9 +123,7 @@ function NavigationRoot(props) { return ( Date: Fri, 7 Jul 2023 18:27:32 +0200 Subject: [PATCH 02/20] add temporary patch to never detach HomeScreen --- patches/@react-navigation+stack+6.3.16.patch | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 patches/@react-navigation+stack+6.3.16.patch diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch new file mode 100644 index 000000000000..2cd7f5a30a46 --- /dev/null +++ b/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, From c7e411bb5ff240f74375949a842900972696a971 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 7 Jul 2023 18:28:49 +0200 Subject: [PATCH 03/20] add prettier adjustments --- src/libs/Navigation/AppNavigator/Navigators/Overlay.js | 2 +- .../Navigation/AppNavigator/createCustomStackNavigator/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js index a5f7e3206473..e17576ef2897 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js @@ -34,7 +34,7 @@ function Overlay(props) { ); } -Overlay.propTypes= propTypes; +Overlay.propTypes = propTypes; Overlay.displayName = 'Overlay'; export default Overlay; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js index 80586ed35ddd..59c4f3650c97 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js @@ -24,7 +24,6 @@ const defaultProps = { screenOptions: undefined, }; - function ResponsiveStackNavigator(props) { const isSmallScreenWidthRef = useRef(props.isSmallScreenWidth); const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder(CustomRouter, { From 35a1a5d42af047a54bde7b8933329cfae9c5b1ab Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Mon, 10 Jul 2023 18:02:33 +0200 Subject: [PATCH 04/20] update comments --- .../Navigation/AppNavigator/createCustomStackNavigator/index.js | 1 + .../Navigation/AppNavigator/getRootNavigatorScreenOptions.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js index 59c4f3650c97..e213f0873dd7 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js @@ -33,6 +33,7 @@ function ResponsiveStackNavigator(props) { getIsSmallScreenWidth: () => isSmallScreenWidthRef.current, }); + // Options for useNavigationBuilder won't update on prop change, so we need to pass a getter for the router to have the current state of isSmallScreenWidth. useEffect(() => { isSmallScreenWidthRef.current = props.isSmallScreenWidth; }, [props.isSmallScreenWidth, isSmallScreenWidthRef]); diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index eaf68b8993f0..4c88819009fe 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -16,7 +16,7 @@ export default (isSmallScreenWidth) => ({ cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), presentation: 'transparentModal', - // we want pop in RHP since there are some flows that would work weird otherwise + // We want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', cardStyle: { ...styles.cardStyleNavigator, From 36914d53b045c6816a98c06129860966b00c706f Mon Sep 17 00:00:00 2001 From: Adam Grzybowski <67908363+adamgrzybowski@users.noreply.github.com> Date: Tue, 11 Jul 2023 12:45:47 +0200 Subject: [PATCH 05/20] Update patches/@react-navigation+stack+6.3.16.patch Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com> --- patches/@react-navigation+stack+6.3.16.patch | 3 --- 1 file changed, 3 deletions(-) diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch index 2cd7f5a30a46..cfd8f60a9917 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16.patch @@ -10,9 +10,6 @@ index 95e6871..18bb14d 100644 + if (route.name === 'Home' && isScreenActive !== STATE_ON_TOP) { + isScreenActive = STATE_TRANSITIONING_OR_BELOW_TOP; + } -+ -+ -+ + const { headerShown = true, From 17248f5512409c3587590d62a908584b59fd703f Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Tue, 11 Jul 2023 12:49:18 +0200 Subject: [PATCH 06/20] change name for style object --- .../Navigation/AppNavigator/Navigators/RightModalNavigator.js | 2 +- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 9c6e4643246f..95c32523b362 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -24,7 +24,7 @@ function RightModalNavigator(props) { {!isSmallScreenWidth && } Date: Wed, 12 Jul 2023 12:28:43 +0200 Subject: [PATCH 07/20] fix patch --- patches/@react-navigation+stack+6.3.16.patch | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch index cfd8f60a9917..fe0f735cd325 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16.patch @@ -1,12 +1,12 @@ 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 +index 95e6871..c87c0f6 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 { +@@ -353,6 +353,11 @@ 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; + } From a897f6281e8e01124f0ecd011216623c4e6350f2 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 13 Jul 2023 17:59:49 +0200 Subject: [PATCH 08/20] improve patch for stack --- patches/@react-navigation+stack+6.3.16.patch | 28 +++++++++++++++---- .../getRootNavigatorScreenOptions.js | 1 + 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch index fe0f735cd325..7e63e0f1b45c 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16.patch @@ -1,16 +1,32 @@ 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..c87c0f6 100644 +index 95e6871..5483c93 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,11 @@ export default class CardStack extends React.Component { +@@ -353,6 +353,9 @@ 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 isHomeScreenAndNotOnTop = route.name === 'Home' && isScreenActive !== STATE_ON_TOP; + const { headerShown = true, headerTransparent, +@@ -386,7 +389,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, { +@@ -420,7 +423,7 @@ export default class CardStack extends React.Component { + onTransitionStart: onTransitionStart, + onTransitionEnd: onTransitionEnd, + isNextScreenTransparent: isNextScreenTransparent, +- detachCurrentScreen: detachCurrentScreen ++ detachCurrentScreen: isHomeScreenAndNotOnTop ? false : detachCurrentScreen + })); + })), isFloatHeaderAbsolute ? floatingHeader : null); + } diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 4c88819009fe..8cddc863cc5f 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -56,6 +56,7 @@ export default (isSmallScreenWidth) => ({ centralPaneNavigator: { title: 'New Expensify', ...commonScreenOptions, + animationEnabled: isSmallScreenWidth ? true : false, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), // Prevent unnecessary scrolling From 59650dc7cd44593d06b560d590af2d1bf5cf7f87 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 13 Jul 2023 18:04:25 +0200 Subject: [PATCH 09/20] use better syntax --- .../Navigation/AppNavigator/getRootNavigatorScreenOptions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 8cddc863cc5f..56f7e5bea203 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -56,7 +56,7 @@ export default (isSmallScreenWidth) => ({ centralPaneNavigator: { title: 'New Expensify', ...commonScreenOptions, - animationEnabled: isSmallScreenWidth ? true : false, + animationEnabled: isSmallScreenWidth, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), // Prevent unnecessary scrolling From 7d66ad68a2a012aa261146632c603b572ecb7b92 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 19 Jul 2023 20:13:59 +0200 Subject: [PATCH 10/20] add adjustments --- src/NAVIGATORS.js | 1 - src/SCREENS.js | 2 ++ src/libs/Navigation/AppNavigator/AuthScreens.js | 8 ++++---- .../Navigation/AppNavigator/Navigators/Overlay.js | 15 ++------------- .../createCustomStackNavigator/index.js | 6 ++---- src/styles/cardStyles/index.js | 1 - src/styles/styles.js | 13 +++++++++++++ 7 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/NAVIGATORS.js b/src/NAVIGATORS.js index d9dcf9d3cd52..acc4e26ceace 100644 --- a/src/NAVIGATORS.js +++ b/src/NAVIGATORS.js @@ -5,5 +5,4 @@ export default { CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator', RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator', - FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator', }; diff --git a/src/SCREENS.js b/src/SCREENS.js index 485bb490e5c4..d83d0b50ace5 100644 --- a/src/SCREENS.js +++ b/src/SCREENS.js @@ -9,6 +9,8 @@ export default { REPORT_ATTACHMENTS: 'ReportAttachments', NOT_FOUND: 'not-found', TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps', + VALIDATE_LOGIN: 'ValidateLogin', + CONCIERGE: 'Concierge', SETTINGS: { PREFERENCES: 'Settings_Preferences', }, diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 3357421e8f3b..20e311f228d6 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -31,9 +31,9 @@ import RightModalNavigator from './Navigators/RightModalNavigator'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; import NAVIGATORS from '../../../NAVIGATORS'; import * as SessionUtils from '../../SessionUtils'; -import variables from '../../../styles/variables'; import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; +import styles from '../../../styles/styles' let currentUserEmail; Onyx.connect({ @@ -201,7 +201,7 @@ class AuthScreens extends React.Component { const screenOptions = getRootNavigatorScreenOptions(this.props.isSmallScreenWidth); return ( - + { const ConciergePage = require('../../../pages/ConciergePage').default; diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js index 29d265fca178..f218d1dda472 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js @@ -1,10 +1,8 @@ import React from 'react'; -import {StyleSheet, Animated} from 'react-native'; +import {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'; import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback'; @@ -20,17 +18,8 @@ function Overlay(props) { const {current} = useCardAnimation(); const {translate} = useLocalize(); - const overlayStyles = { - ...StyleSheet.absoluteFillObject, - backgroundColor: themeColors.overlay, - opacity: current.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, variables.overlayOpacity], - extrapolate: 'clamp', - }), - }; return ( - + { - isSmallScreenWidthRef.current = props.isSmallScreenWidth; - }, [props.isSmallScreenWidth, isSmallScreenWidthRef]); + isSmallScreenWidthRef.current = props.isSmallScreenWidth; return ( diff --git a/src/styles/cardStyles/index.js b/src/styles/cardStyles/index.js index a9fe8b718256..d8af8a627ffe 100644 --- a/src/styles/cardStyles/index.js +++ b/src/styles/cardStyles/index.js @@ -7,7 +7,6 @@ export default function getCardStyles(screenWidth) { return { position: 'fixed', width: screenWidth, - right: 0, height: '100%', }; } diff --git a/src/styles/styles.js b/src/styles/styles.js index 750dc3b15437..f5303b245139 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1,4 +1,5 @@ import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/src/styles'; +import {StyleSheet} from 'react-native'; import fontFamily from './fontFamily'; import addOutlineWidth from './addOutlineWidth'; import themeColors from './themes/default'; @@ -1438,6 +1439,16 @@ const styles = { height: variables.optionsListSectionHeaderHeight, }, + overlayStyles: (current) => ({ + ...StyleSheet.absoluteFillObject, + backgroundColor: themeColors.overlay, + opacity: current.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, variables.overlayOpacity], + extrapolate: 'clamp', + }), + }), + appContent: { backgroundColor: themeColors.appBG, overflow: 'hidden', @@ -2313,6 +2324,8 @@ const styles = { borderRadius: 88, }, + rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}), + avatarInnerTextChat: { color: themeColors.textLight, fontSize: variables.fontSizeXLarge, From c312479a1df78a4ceb45a77b34b1b0080184e701 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 19 Jul 2023 20:28:57 +0200 Subject: [PATCH 11/20] move styles to style file --- .../AppNavigator/Navigators/RightModalNavigator.js | 10 +--------- src/styles/styles.js | 6 ++++-- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 95c32523b362..06c26100d70c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -5,7 +5,6 @@ import {createStackNavigator} from '@react-navigation/stack'; import * as ModalStackNavigators from '../ModalStackNavigators'; import RHPScreenOptions from '../RHPScreenOptions'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; -import variables from '../../../../styles/variables'; import {withNavigationPropTypes} from '../../../../components/withNavigation'; import styles from '../../../../styles/styles'; import Overlay from './Overlay'; @@ -22,14 +21,7 @@ function RightModalNavigator(props) { return ( <> {!isSmallScreenWidth && } - + ({ + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, position: 'absolute', right: 0, height: '100%', - }, + }), onlyEmojisText: { fontSize: variables.fontSizeOnlyEmojis, @@ -2325,6 +2326,7 @@ const styles = { }, rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}), + RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}), avatarInnerTextChat: { color: themeColors.textLight, From 2b6f70bfb46444b7c523ce245d3480aba745286a Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 20 Jul 2023 10:45:42 +0200 Subject: [PATCH 12/20] fix prettier --- src/libs/Navigation/AppNavigator/AuthScreens.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 20e311f228d6..b1a7b2cda925 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -33,7 +33,7 @@ import NAVIGATORS from '../../../NAVIGATORS'; import * as SessionUtils from '../../SessionUtils'; import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; -import styles from '../../../styles/styles' +import styles from '../../../styles/styles'; let currentUserEmail; Onyx.connect({ From f3bb2f204c66d76061974dbfb06d257068c2fc98 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Mon, 24 Jul 2023 18:52:42 +0200 Subject: [PATCH 13/20] adjust styling --- .../Navigation/AppNavigator/AuthScreens.js | 2 +- .../getRootNavigatorScreenOptions.js | 18 +++++++++--------- .../getBaseNavigationModalCardStyles.js | 10 ---------- .../getNavigationModalCardStyles/index.js | 6 +++--- .../index.website.js | 6 +----- 5 files changed, 14 insertions(+), 28 deletions(-) delete mode 100644 src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 63c3ed5d2e58..ccc5250a5843 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -198,7 +198,7 @@ class AuthScreens extends React.Component { } render() { - const screenOptions = getRootNavigatorScreenOptions(this.props.isSmallScreenWidth, this.props.windowHeight); + const screenOptions = getRootNavigatorScreenOptions({windowHeight: this.props.windowHeight, isSmallScreenWidth: this.props.isSmallScreenWidth}); return ( diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 56f7e5bea203..0cc70c1c12f3 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -1,6 +1,8 @@ import modalCardStyleInterpolator from './modalCardStyleInterpolator'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; +import getNavigationModalCardStyle from '../../../styles/getNavigationModalCardStyles'; +import CONFIG from '../../../CONFIG'; const commonScreenOptions = { headerShown: false, @@ -10,7 +12,7 @@ const commonScreenOptions = { animationTypeForReplace: 'push', }; -export default (isSmallScreenWidth) => ({ +export default ({isSmallScreenWidth, windowHeight}) => ({ rightModalNavigator: { ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), @@ -19,7 +21,7 @@ export default (isSmallScreenWidth) => ({ // We want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', cardStyle: { - ...styles.cardStyleNavigator, + ...getNavigationModalCardStyle({windowHeight}), // This is necessary to cover translated sidebar with overlay. marginLeft: isSmallScreenWidth ? 0 : -2 * variables.sideBarWidth, @@ -27,13 +29,12 @@ export default (isSmallScreenWidth) => ({ }, homeScreen: { - title: 'New Expensify', + title: CONFIG.SITE_TITLE, ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), - // Prevent unnecessary scrolling cardStyle: { - ...styles.cardStyleNavigator, + ...getNavigationModalCardStyle({windowHeight}), width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable. @@ -46,7 +47,7 @@ export default (isSmallScreenWidth) => ({ ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), cardStyle: { - ...styles.cardStyleNavigator, + ...getNavigationModalCardStyle({windowHeight}), // This is necessary to cover whole screen. Including translated sidebar. marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, @@ -54,12 +55,11 @@ export default (isSmallScreenWidth) => ({ }, centralPaneNavigator: { - title: 'New Expensify', + title: CONFIG.SITE_TITLE, ...commonScreenOptions, animationEnabled: isSmallScreenWidth, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), - // Prevent unnecessary scrolling - cardStyle: styles.cardStyleNavigator, + cardStyle: getNavigationModalCardStyle({windowHeight}), }, }); diff --git a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js deleted file mode 100644 index bddb639655a0..000000000000 --- a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js +++ /dev/null @@ -1,10 +0,0 @@ -import variables from '../variables'; - -export default ({isSmallScreenWidth}) => ({ - position: 'absolute', - top: 0, - right: 0, - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, - backgroundColor: 'transparent', - height: '100%', -}); diff --git a/src/styles/getNavigationModalCardStyles/index.js b/src/styles/getNavigationModalCardStyles/index.js index cbfa04a19fe2..8e2bffc1ecfc 100644 --- a/src/styles/getNavigationModalCardStyles/index.js +++ b/src/styles/getNavigationModalCardStyles/index.js @@ -1,3 +1,3 @@ -import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; - -export default getBaseNavigationModalCardStyles; +export default () => ({ + height: '100%', +}); diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index c975d29301fb..ee06d34f63c8 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -1,8 +1,4 @@ -import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; - -export default ({windowHeight, isSmallScreenWidth}) => ({ - ...getBaseNavigationModalCardStyles({isSmallScreenWidth}), - +export default ({windowHeight}) => ({ // This height is passed from JavaScript, instead of using CSS expressions like "100%" or "100vh", to work around // Safari issues: // https://github.com/Expensify/App/issues/12005 From 59ec44ca5d52b3df368d18f98059c151a4ffe8c0 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Tue, 25 Jul 2023 16:59:00 +0200 Subject: [PATCH 14/20] fix patch conflicts v2 --- patches/@react-navigation+stack+6.3.16.patch | 34 ++++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch index a7c31ea19068..b371feaee4cb 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16.patch @@ -60,7 +60,7 @@ index 0000000..668d198 +export const resetExpectingTouchendWithDelay = () => {}; +export const maybeInitializeEdgeDragGestureMonitor = () => {}; 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 548ba79..4bedb81 100644 +index 548ba79..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 @@ -4,6 +4,7 @@ import * as React from 'react'; @@ -76,7 +76,7 @@ index 548ba79..4bedb81 100644 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, @@ -90,7 +90,7 @@ index 548ba79..4bedb81 100644 if (closing) { onClose(); 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..7558eb3 100644 +index 95e6871..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 @@ -4,6 +4,7 @@ import * as React from 'react'; @@ -110,3 +110,31 @@ index 95e6871..7558eb3 100644 this.state = { routes: [], scenes: [], +@@ -353,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, +@@ -386,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, { +@@ -420,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); + } From ddf015ecdedb9a05be49b0ac6140abd2e4a8ce06 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 2 Aug 2023 19:19:38 +0200 Subject: [PATCH 15/20] fix problem with safari --- patches/@react-navigation+stack+6.3.16.patch | 29 ++++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch index b371feaee4cb..dd7f794d9bfa 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16.patch @@ -27,15 +27,15 @@ index 0000000..d8284fc + isInitialized = true; + let timer; + -+ // Gestures that would trigger navigation forward are broken on iOS safari. -+ // They don't have touchend event fired so we can look at expectingTouchEnd flag to detect if we should run animation. ++ // Gestures that would trigger navigation forward are broken on iOS safari. ++ // They don't have touchend event fired so we can look at expectingTouchEnd flag to detect if we should run animation. + const handleTouchStart = () => { + expectingTouchend = true; + }; + const handleTouchEnd = e => { + var _e$changedTouches$; + const pageX = (_e$changedTouches$ = e.changedTouches[0]) === null || _e$changedTouches$ === void 0 ? void 0 : _e$changedTouches$.pageX; -+ // PageX for gesture that would trigger navigation back is negative. ++ // PageX for gesture that would trigger navigation back is negative. + if (pageX < 0) { + if (timer) { + clearTimeout(timer); @@ -89,6 +89,29 @@ index 548ba79..155d87f 100644 if (finished) { if (closing) { onClose(); +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..b4df3ec 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 { StyleSheet, View, Platform } 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 95e6871..b7bb75e 100644 --- a/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js From dbece001c3018e605bdd062d8eec92d765c8406c Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 3 Aug 2023 13:44:17 +0200 Subject: [PATCH 16/20] add NoDropZone for RigtModalNavigator --- .../AppNavigator/Navigators/RightModalNavigator.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 06c26100d70c..c2fcfb99df6c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -8,6 +8,7 @@ import useWindowDimensions from '../../../../hooks/useWindowDimensions'; import {withNavigationPropTypes} from '../../../../components/withNavigation'; import styles from '../../../../styles/styles'; import Overlay from './Overlay'; +import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; const Stack = createStackNavigator(); @@ -19,7 +20,7 @@ function RightModalNavigator(props) { const {isSmallScreenWidth} = useWindowDimensions(); return ( - <> + {!isSmallScreenWidth && } @@ -109,7 +110,7 @@ function RightModalNavigator(props) { /> - + ); } From 09fa219c740eaa48167a1e6bb929ad11f7a0ae36 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 11 Aug 2023 17:33:05 +0200 Subject: [PATCH 17/20] adjustment for position fixed --- src/libs/Navigation/AppNavigator/AuthScreens.js | 2 +- .../getRootNavigatorScreenOptions.js | 17 +++++++++++------ .../index.website.js | 2 ++ 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 01d35a89b60d..09e09afa036f 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -205,7 +205,7 @@ class AuthScreens extends React.Component { } render() { - const screenOptions = getRootNavigatorScreenOptions({windowHeight: this.props.windowHeight, isSmallScreenWidth: this.props.isSmallScreenWidth}); + const screenOptions = getRootNavigatorScreenOptions(this.props.isSmallScreenWidth); return ( diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 0cc70c1c12f3..81c02e8c7942 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -12,7 +12,7 @@ const commonScreenOptions = { animationTypeForReplace: 'push', }; -export default ({isSmallScreenWidth, windowHeight}) => ({ +export default (isSmallScreenWidth) => ({ rightModalNavigator: { ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), @@ -21,10 +21,12 @@ export default ({isSmallScreenWidth, windowHeight}) => ({ // We want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', cardStyle: { - ...getNavigationModalCardStyle({windowHeight}), + ...getNavigationModalCardStyle(), // This is necessary to cover translated sidebar with overlay. - marginLeft: isSmallScreenWidth ? 0 : -2 * variables.sideBarWidth, + width: isSmallScreenWidth ? '100%' : '200%', + // Excess space should be on the left so we need to position from right. + right: 0, }, }, @@ -34,7 +36,7 @@ export default ({isSmallScreenWidth, windowHeight}) => ({ cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), cardStyle: { - ...getNavigationModalCardStyle({windowHeight}), + ...getNavigationModalCardStyle(), width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable. @@ -47,7 +49,7 @@ export default ({isSmallScreenWidth, windowHeight}) => ({ ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), cardStyle: { - ...getNavigationModalCardStyle({windowHeight}), + ...getNavigationModalCardStyle(), // This is necessary to cover whole screen. Including translated sidebar. marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, @@ -60,6 +62,9 @@ export default ({isSmallScreenWidth, windowHeight}) => ({ animationEnabled: isSmallScreenWidth, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), - cardStyle: getNavigationModalCardStyle({windowHeight}), + cardStyle: { + ...getNavigationModalCardStyle(), + paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth, + }, }, }); diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index d11e8dcbcf01..54c9790253d6 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -4,5 +4,7 @@ export default () => ({ // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824 // https://github.com/Expensify/App/issues/20709 + width: '100%', + height: '100%', position: 'fixed', }); From ad6d7aa0d3c435d3110a5af9c5c28ce113d8f810 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 16 Aug 2023 18:05:02 +0200 Subject: [PATCH 18/20] make styles for navigation modal card the same on desktop and web --- .../getNavigationModalCardStyles/index.desktop.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/styles/getNavigationModalCardStyles/index.desktop.js diff --git a/src/styles/getNavigationModalCardStyles/index.desktop.js b/src/styles/getNavigationModalCardStyles/index.desktop.js new file mode 100644 index 000000000000..54c9790253d6 --- /dev/null +++ b/src/styles/getNavigationModalCardStyles/index.desktop.js @@ -0,0 +1,10 @@ +export default () => ({ + // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM. + // Safari issues: + // https://github.com/Expensify/App/issues/12005 + // https://github.com/Expensify/App/issues/17824 + // https://github.com/Expensify/App/issues/20709 + width: '100%', + height: '100%', + position: 'fixed', +}); From c1b09190c844be286681909373ead3ad01ded8db Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 18 Aug 2023 13:48:40 +0200 Subject: [PATCH 19/20] adjust screen in auth screens --- src/SCREENS.js | 1 + src/libs/Navigation/AppNavigator/AuthScreens.js | 6 +++--- .../AppNavigator/getRootNavigatorScreenOptions.js | 2 +- src/libs/Navigation/linkingConfig.js | 4 ++-- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/SCREENS.js b/src/SCREENS.js index cfcfb21ea503..13410731d613 100644 --- a/src/SCREENS.js +++ b/src/SCREENS.js @@ -17,4 +17,5 @@ export default { }, SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', + DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', }; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 985dfe00f505..48af7e29327e 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -273,7 +273,7 @@ class AuthScreens extends React.Component { /> diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 81c02e8c7942..a7456fb071b4 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -45,7 +45,7 @@ export default (isSmallScreenWidth) => ({ }, }, // eslint-disable-next-line rulesdir/no-negated-variables - notFoundScreen: { + fullScreen: { ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), cardStyle: { diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index f5e325967cad..65867d008fdb 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -12,10 +12,10 @@ export default { ValidateLogin: ROUTES.VALIDATE_LOGIN, UnlinkLogin: ROUTES.UNLINK_LOGIN, [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS, - Concierge: ROUTES.CONCIERGE, + [SCREENS.CONCIERGE]: ROUTES.CONCIERGE, AppleSignInDesktop: ROUTES.APPLE_SIGN_IN, GoogleSignInDesktop: ROUTES.GOOGLE_SIGN_IN, - DesktopSignInRedirect: ROUTES.DESKTOP_SIGN_IN_REDIRECT, + [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT, [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS, SaaStrHome: ROUTES.SAASTR_HOME, From 450aa714f0b3db91ab9e300c41d8b75cc5ca0da7 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Tue, 22 Aug 2023 18:34:53 +0200 Subject: [PATCH 20/20] split patch --- ...navigation+stack+6.3.16+001+initial.patch} | 63 ++--------------- ...on+stack+6.3.16+002+dontDetachScreen.patch | 68 +++++++++++++++++++ 2 files changed, 74 insertions(+), 57 deletions(-) rename patches/{@react-navigation+stack+6.3.16.patch => @react-navigation+stack+6.3.16+001+initial.patch} (64%) create mode 100644 patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16+001+initial.patch similarity index 64% rename from patches/@react-navigation+stack+6.3.16.patch rename to patches/@react-navigation+stack+6.3.16+001+initial.patch index dd7f794d9bfa..a7c31ea19068 100644 --- a/patches/@react-navigation+stack+6.3.16.patch +++ b/patches/@react-navigation+stack+6.3.16+001+initial.patch @@ -27,15 +27,15 @@ index 0000000..d8284fc + isInitialized = true; + let timer; + -+ // Gestures that would trigger navigation forward are broken on iOS safari. -+ // They don't have touchend event fired so we can look at expectingTouchEnd flag to detect if we should run animation. ++ // Gestures that would trigger navigation forward are broken on iOS safari. ++ // They don't have touchend event fired so we can look at expectingTouchEnd flag to detect if we should run animation. + const handleTouchStart = () => { + expectingTouchend = true; + }; + const handleTouchEnd = e => { + var _e$changedTouches$; + const pageX = (_e$changedTouches$ = e.changedTouches[0]) === null || _e$changedTouches$ === void 0 ? void 0 : _e$changedTouches$.pageX; -+ // PageX for gesture that would trigger navigation back is negative. ++ // PageX for gesture that would trigger navigation back is negative. + if (pageX < 0) { + if (timer) { + clearTimeout(timer); @@ -60,7 +60,7 @@ index 0000000..668d198 +export const resetExpectingTouchendWithDelay = () => {}; +export const maybeInitializeEdgeDragGestureMonitor = () => {}; 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 548ba79..155d87f 100644 +index 548ba79..4bedb81 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 @@ -4,6 +4,7 @@ import * as React from 'react'; @@ -76,7 +76,7 @@ index 548ba79..155d87f 100644 animation(gesture, { ...spec.config, + // Detecting if the user used swipe gesture on iOS safari to trigger navigation in the browser history. -+ duration: getIsEdgeDragGesture() ? 0 : spec.config.duration, ++ duration: getIsEdgeDragGesture() ? 0 : undefined, velocity, toValue, useNativeDriver, @@ -89,31 +89,8 @@ index 548ba79..155d87f 100644 if (finished) { if (closing) { onClose(); -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..b4df3ec 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 { StyleSheet, View, Platform } 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 95e6871..b7bb75e 100644 +index 95e6871..7558eb3 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 @@ -4,6 +4,7 @@ import * as React from 'react'; @@ -133,31 +110,3 @@ index 95e6871..b7bb75e 100644 this.state = { routes: [], scenes: [], -@@ -353,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, -@@ -386,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, { -@@ -420,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); - } diff --git a/patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch b/patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch new file mode 100644 index 000000000000..d64fc4fecf74 --- /dev/null +++ b/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); + }