From babc3c90edb3090ee24ac2b48f0d16680f82ac04 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 11 Sep 2024 17:21:11 +0200 Subject: [PATCH 1/3] Pop home screen when going back to Search RHP --- .../CustomRouter.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 5b3cefb63a2d..f5713c6657f8 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -131,6 +131,31 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) { if (shouldPreventReset(state, action)) { return state; } + + /** + * When we go back from the chat opened in the Chats section to the chat opened in the Search RHP we have to pop the Home screen from the Bottom tab navigator to display correctly Search page under RHP on native platform. + * It fixes this issue: https://github.com/Expensify/App/issues/48882 + */ + if (action.type === 'GO_BACK' || action.type === 'POP') { + const shouldPopHome = + state.routes.length >= 3 && + state.routes.at(-1)?.name === SCREENS.REPORT && + state.routes.at(-2)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && + getTopmostBottomTabRoute(state as State)?.name === SCREENS.HOME; + + if (!shouldPopHome) { + return stackRouter.getStateForAction(state, action, configOptions); + } + + const bottomTabState = state.routes.at(0)?.state; + const newBottomTabState = {...bottomTabState, routes: bottomTabState?.routes?.slice(0, -1), index: (bottomTabState?.index ?? 0) - 1}; + + const newState = {...state}; + newState.routes[0].state = newBottomTabState as State; + + return stackRouter.getStateForAction(state, action, configOptions); + } + return stackRouter.getStateForAction(state, action, configOptions); }, }; From 83ccc2ef640f47d365b9c8966357430407f9705a Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 18 Sep 2024 14:39:06 +0200 Subject: [PATCH 2/3] Add beforeRemoveReportOpenedFromSearchRHP --- .../Navigation/AppNavigator/AuthScreens.tsx | 10 +++++ .../index.native.ts | 41 +++++++++++++++++++ .../index.ts | 4 ++ .../CustomRouter.ts | 24 ----------- 4 files changed, 55 insertions(+), 24 deletions(-) create mode 100644 src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.native.ts create mode 100644 src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.ts diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index b68b9441c38c..5a84657d1677 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -50,6 +50,7 @@ import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; +import beforeRemoveReportOpenedFromSearchRHP from './beforeRemoveReportOpenedFromSearchRHP'; import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; @@ -107,6 +108,14 @@ function getCentralPaneScreenInitialParams(screenName: CentralPaneName, initialR return undefined; } +function getCentralPaneScreenListeners(screenName: CentralPaneName) { + if (screenName === SCREENS.REPORT) { + return {beforeRemove: beforeRemoveReportOpenedFromSearchRHP}; + } + + return {}; +} + function initializePusher() { Pusher.init({ appKey: CONFIG.PUSHER.APP_KEY, @@ -556,6 +565,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie initialParams={getCentralPaneScreenInitialParams(centralPaneName, initialReportID)} getComponent={componentGetter} options={CentralPaneScreenOptions} + listeners={getCentralPaneScreenListeners(centralPaneName)} /> ); })} diff --git a/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.native.ts b/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.native.ts new file mode 100644 index 000000000000..fd31b6e6022f --- /dev/null +++ b/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.native.ts @@ -0,0 +1,41 @@ +import {StackActions} from '@react-navigation/native'; +import type {EventArg} from '@react-navigation/native'; +import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; +import Navigation from '@libs/Navigation/Navigation'; +import navigationRef from '@libs/Navigation/navigationRef'; +import type {RootStackParamList, State} from '@libs/Navigation/types'; +import NAVIGATORS from '@src/NAVIGATORS'; +import SCREENS from '@src/SCREENS'; + +/** + * When we go back from the chat opened in the Chats section to the chat opened in the Search RHP we have to pop the Home screen from the Bottom tab navigator to display correctly Search page under RHP on native platform. + * It fixes this issue: https://github.com/Expensify/App/issues/48882 + */ +function beforeRemoveReportOpenedFromSearchRHP(event: EventArg<'beforeRemove', true>) { + if (!navigationRef.current) { + return; + } + + const state = navigationRef.current?.getRootState() as State; + + if (!state) { + return; + } + + const shouldPopHome = + state.routes?.length >= 3 && + state.routes.at(-1)?.name === SCREENS.REPORT && + state.routes.at(-2)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && + getTopmostBottomTabRoute(state)?.name === SCREENS.HOME; + + if (!shouldPopHome) { + return; + } + + event.preventDefault(); + const bottomTabState = state?.routes?.at(0)?.state; + navigationRef.dispatch({...StackActions.pop(), target: bottomTabState?.key}); + Navigation.goBack(); +} + +export default beforeRemoveReportOpenedFromSearchRHP; diff --git a/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.ts b/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.ts new file mode 100644 index 000000000000..b5d8f835ab43 --- /dev/null +++ b/src/libs/Navigation/AppNavigator/beforeRemoveReportOpenedFromSearchRHP/index.ts @@ -0,0 +1,4 @@ +/** The issue fixed by this handler is related to navigating back on native platforms. For more information, see the index.native.ts file in this folder */ +function beforeRemoveReportOpenedFromSearchRHP() {} + +export default beforeRemoveReportOpenedFromSearchRHP; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 04df97d11af8..022d1dbb3905 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -136,30 +136,6 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) { return state; } - /** - * When we go back from the chat opened in the Chats section to the chat opened in the Search RHP we have to pop the Home screen from the Bottom tab navigator to display correctly Search page under RHP on native platform. - * It fixes this issue: https://github.com/Expensify/App/issues/48882 - */ - if (action.type === 'GO_BACK' || action.type === 'POP') { - const shouldPopHome = - state.routes.length >= 3 && - state.routes.at(-1)?.name === SCREENS.REPORT && - state.routes.at(-2)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && - getTopmostBottomTabRoute(state as State)?.name === SCREENS.HOME; - - if (!shouldPopHome) { - return stackRouter.getStateForAction(state, action, configOptions); - } - - const bottomTabState = state.routes.at(0)?.state; - const newBottomTabState = {...bottomTabState, routes: bottomTabState?.routes?.slice(0, -1), index: (bottomTabState?.index ?? 0) - 1}; - - const newState = {...state}; - newState.routes[0].state = newBottomTabState as State; - - return stackRouter.getStateForAction(state, action, configOptions); - } - return stackRouter.getStateForAction(state, action, configOptions); }, }; From 40bd73fb1727f4947e07d2fd5c365b02fe7cb7cd Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 18 Sep 2024 18:33:42 +0200 Subject: [PATCH 3/3] Cleanup CustomRouter changes --- .../AppNavigator/createCustomStackNavigator/CustomRouter.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 022d1dbb3905..411cbf1d26b0 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -135,7 +135,6 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) { if (shouldPreventReset(state, action)) { return state; } - return stackRouter.getStateForAction(state, action, configOptions); }, };