diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16+001+initial.patch
similarity index 100%
rename from patches/@react-navigation+stack+6.3.16.patch
rename to patches/@react-navigation+stack+6.3.16+001+initial.patch
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);
+ }
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index bcb3a02cebb4..47935e117e99 100644
--- a/src/SCREENS.ts
+++ b/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;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 7317306cdbe6..795c5bace1b6 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,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 (
-
- {
- 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..1b2faff8c5e3
--- /dev/null
+++ b/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 (
+
+
+ {/* 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 */}
+
+
+
+
+ );
+}
+
+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 22a181b59c09..f6ea89ecd088 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -1,108 +1,128 @@
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 {withNavigationPropTypes} from '../../../../components/withNavigation';
+import styles from '../../../../styles/styles';
+import Overlay from './Overlay';
+import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
const Stack = createStackNavigator();
-function RightModalNavigator() {
+const propTypes = {
+ ...withNavigationPropTypes,
+};
+
+function RightModalNavigator(props) {
+ const {isSmallScreenWidth} = useWindowDimensions();
+
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {!isSmallScreenWidth && }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
+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..b3e108165c02 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} 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 = {
@@ -26,14 +25,18 @@ const defaultProps = {
};
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 ? (
+ // 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.
+ isSmallScreenWidthRef.current = props.isSmallScreenWidth;
+
+ return (
- ) : (
-
-
-
);
}
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
deleted file mode 100644
index abdc10180252..000000000000
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-import _ from 'underscore';
-import {View} 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';
-import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback';
-import useLocalize from '../../../../hooks/useLocalize';
-
-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});
- const {translate} = useLocalize();
-
- 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 (
-
-
- {/* 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 */}
- props.navigation.goBack()}
- accessibilityLabel={translate('common.close')}
- accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
- />
- props.navigation.goBack()}
- accessibilityLabel={translate('common.close')}
- accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
- noDragArea
- />
-
- {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..a7456fb071b4
--- /dev/null
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -0,0 +1,70 @@
+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,
+ 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: {
+ ...getNavigationModalCardStyle(),
+
+ // This is necessary to cover translated sidebar with overlay.
+ width: isSmallScreenWidth ? '100%' : '200%',
+ // Excess space should be on the left so we need to position from right.
+ right: 0,
+ },
+ },
+
+ homeScreen: {
+ title: CONFIG.SITE_TITLE,
+ ...commonScreenOptions,
+ cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+
+ cardStyle: {
+ ...getNavigationModalCardStyle(),
+ 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
+ fullScreen: {
+ ...commonScreenOptions,
+ cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+ cardStyle: {
+ ...getNavigationModalCardStyle(),
+
+ // This is necessary to cover whole screen. Including translated sidebar.
+ marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
+ },
+ },
+
+ centralPaneNavigator: {
+ title: CONFIG.SITE_TITLE,
+ ...commonScreenOptions,
+ animationEnabled: isSmallScreenWidth,
+ cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+
+ cardStyle: {
+ ...getNavigationModalCardStyle(),
+ paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,
+ },
+ },
+});
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 (
({
- position: 'absolute',
- top: 0,
- right: 0,
- width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
- backgroundColor: 'transparent',
- height: '100%',
-});
-
-export default getBaseNavigationModalCardStyles;
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',
+});
diff --git a/src/styles/getNavigationModalCardStyles/index.ts b/src/styles/getNavigationModalCardStyles/index.ts
index cbfa04a19fe2..8e2bffc1ecfc 100644
--- a/src/styles/getNavigationModalCardStyles/index.ts
+++ b/src/styles/getNavigationModalCardStyles/index.ts
@@ -1,3 +1,3 @@
-import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles';
-
-export default getBaseNavigationModalCardStyles;
+export default () => ({
+ height: '100%',
+});
diff --git a/src/styles/getNavigationModalCardStyles/index.website.ts b/src/styles/getNavigationModalCardStyles/index.website.ts
index 0c47536fc57c..9879e4c1567b 100644
--- a/src/styles/getNavigationModalCardStyles/index.website.ts
+++ b/src/styles/getNavigationModalCardStyles/index.website.ts
@@ -1,14 +1,13 @@
-import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles';
import GetNavigationModalCardStyles from './types';
-const getNavigationModalCardStyles: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({
- ...getBaseNavigationModalCardStyles({isSmallScreenWidth}),
-
+const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
// 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',
});
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d6258da62cbc..6b8799e2065e 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 lodashClamp from 'lodash/clamp';
import fontFamily from './fontFamily';
import addOutlineWidth from './addOutlineWidth';
@@ -1337,13 +1338,12 @@ const styles = {
textDecorationLine: 'none',
},
- leftPanelContainer: {
- maxWidth: variables.sideBarWidth,
- },
-
- rightPanelContainer: {
- width: variables.sideBarWidth,
- },
+ RHPNavigatorContainer: (isSmallScreenWidth) => ({
+ width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+ position: 'absolute',
+ right: 0,
+ height: '100%',
+ }),
onlyEmojisText: {
fontSize: variables.fontSizeOnlyEmojis,
@@ -1513,6 +1513,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',
@@ -2389,6 +2399,9 @@ const styles = {
borderRadius: 88,
},
+ rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
+ RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
+
avatarInnerTextChat: {
color: themeColors.textLight,
fontSize: variables.fontSizeXLarge,