Add beforeRemoveReportOpenedFromSearchRHP

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)}
                             />
                         );
                     })}

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<RootStackParamList>;
+
+    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;

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;

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<RootStackParamList>)?.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);
         },
     };