Merge pull request #48990 from software-mansion-labs/fix/search-rhp-n…

…ative-go-back

[Search v2.1] Android & iOS - Search icon is not responsive after returning to LHN from thread

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;