Handle backTo param

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

@@ -2,10 +2,10 @@ import type {RouterConfigOptions, StackNavigationState} from '@react-navigation/
 import {getPathFromState, StackRouter} from '@react-navigation/native';
 import type {ParamListBase} from '@react-navigation/routers';
 import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
-import getAdaptedStateFromPath from '@libs/Navigation/getAdaptedStateFromPath';
 import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import linkingConfig from '@libs/Navigation/linkingConfig';
+import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath';
 import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';

src/libs/Navigation/linkTo.ts

@@ -7,13 +7,13 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import type {Route} from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import dismissModal from './dismissModal';
-import getMatchingBottomTabRouteForState from './getMatchingBottomTabRouteForState';
-import getMatchingCentralPaneRouteForState from './getMatchingCentralPaneRouteForState';
 import getStateFromPath from './getStateFromPath';
 import getTopmostBottomTabRoute from './getTopmostBottomTabRoute';
 import getTopmostCentralPaneRoute from './getTopmostCentralPaneRoute';
 import getTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
+import getMatchingBottomTabRouteForState from './linkingConfig/getMatchingBottomTabRouteForState';
+import getMatchingCentralPaneRouteForState from './linkingConfig/getMatchingCentralPaneRouteForState';
 import type {NavigationRoot, RootStackParamList, StackNavigationAction, State} from './types';
 
 type ActionPayloadParams = {

src/libs/Navigation/CENTRAL_PANE_TO_RHP_MAPPING.ts → src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -1,5 +1,5 @@
+import type {CentralPaneName} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
-import type {CentralPaneName} from './types';
 
 const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> = {
     [SCREENS.WORKSPACE.OVERVIEW]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY],

src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts → src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -1,5 +1,5 @@
+import type {FullScreenName} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
-import type {FullScreenName} from './types';
 
 const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
     [SCREENS.SETTINGS.PROFILE.ROOT]: [

src/libs/Navigation/TAB_TO_CENTRAL_PANE_MAPPING.ts → src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts

@@ -1,5 +1,5 @@
+import type {BottomTabName, CentralPaneName} from '@navigation/types';
 import SCREENS from '@src/SCREENS';
-import type {BottomTabName, CentralPaneName} from './types';
 
 const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
     [SCREENS.HOME]: [SCREENS.REPORT],

src/libs/Navigation/getAdaptedStateFromPath.ts → src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

@@ -2,14 +2,15 @@
 import type {NavigationState, PartialState} from '@react-navigation/native';
 import {getStateFromPath} from '@react-navigation/native';
 import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getTopmostNestedRHPRoute from '@libs/Navigation/getTopmostNestedRHPRoute';
+import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import CENTRAL_PANE_TO_RHP_MAPPING from './CENTRAL_PANE_TO_RHP_MAPPING';
+import config from './config';
 import FULL_SCREEN_TO_RHP_MAPPING from './FULL_SCREEN_TO_RHP_MAPPING';
 import getMatchingBottomTabRouteForState from './getMatchingBottomTabRouteForState';
 import getMatchingCentralPaneRouteForState from './getMatchingCentralPaneRouteForState';
-import getTopmostNestedRHPRoute from './getTopmostNestedRHPRoute';
-import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from './types';
 
 // The function getPathFromState that we are using in some places isn't working correctly without defined index.
 const getRoutesWithIndex = (routes: NavigationPartialRoute[]) => ({routes, index: routes.length - 1});
@@ -52,6 +53,33 @@ function createFullScreenNavigator(route: NavigationPartialRoute<FullScreenName>
 
 // This function will return CentralPaneNavigator route or FullScreenNavigator route.
 function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): NavigationPartialRoute<typeof NAVIGATORS.CENTRAL_PANE_NAVIGATOR | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR> {
+    // Check for backTo param. One screen with different backTo value may need diferent screens visible under the overlay.
+    if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') {
+        const stateForBackTo = getStateFromPath(route.params.backTo, config);
+        if (stateForBackTo) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);
+
+            const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find(
+                // eslint-disable-next-line @typescript-eslint/no-shadow
+                (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR,
+            );
+
+            // If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen.
+            if (rhpNavigator && rhpNavigator.state) {
+                const topmostNestedRHPRoute = getTopmostNestedRHPRoute(stateForBackTo);
+                if (topmostNestedRHPRoute) {
+                    return getMatchingRootRouteForRHPRoute(topmostNestedRHPRoute);
+                }
+            }
+
+            // If we know that backTo targets the root route (central pane or full screen) we want to use it.
+            if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) {
+                return centralPaneOrFullScreenNavigator as NavigationPartialRoute<typeof NAVIGATORS.CENTRAL_PANE_NAVIGATOR | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR>;
+            }
+        }
+    }
+
     // Check for CentralPaneNavigator
     for (const [centralPaneName, RHPNames] of Object.entries(CENTRAL_PANE_TO_RHP_MAPPING)) {
         if (RHPNames.includes(route.name)) {

src/libs/Navigation/getMatchingBottomTabRouteForState.ts → src/libs/Navigation/linkingConfig/getMatchingBottomTabRouteForState.ts

@@ -1,8 +1,7 @@
-// import CONST from '@src/CONST';
+import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
+import type {BottomTabName, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
-import getTopmostCentralPaneRoute from './getTopmostCentralPaneRoute';
 import {CENTRAL_PANE_TO_TAB_MAPPING} from './TAB_TO_CENTRAL_PANE_MAPPING';
-import type {BottomTabName, NavigationPartialRoute, RootStackParamList, State} from './types';
 
 // Get the route that matches the topmost central pane route in the navigation stack. e.g REPORT -> HOME
 function getMatchingBottomTabRouteForState(state: State<RootStackParamList>): NavigationPartialRoute<BottomTabName> {

src/libs/Navigation/getMatchingCentralPaneRouteForState.ts → src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts

@@ -1,8 +1,8 @@
+import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
+import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
-import getTopmostBottomTabRoute from './getTopmostBottomTabRoute';
 import TAB_TO_CENTRAL_PANE_MAPPING from './TAB_TO_CENTRAL_PANE_MAPPING';
-import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from './types';
 
 /**
  * @param state - react-navigation state

src/libs/Navigation/linkingConfig/index.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type {LinkingOptions} from '@react-navigation/native';
+import type {RootStackParamList} from '@navigation/types';
+import CONST from '@src/CONST';
+import config from './config';
+import getAdaptedStateFromPath from './getAdaptedStateFromPath';
+
+const linkingConfig: LinkingOptions<RootStackParamList> = {
+    getStateFromPath: getAdaptedStateFromPath,
+    prefixes: [
+        'app://-/',
+        'new-expensify://',
+        'https://www.expensify.cash',
+        'https://staging.expensify.cash',
+        'https://dev.new.expensify.com',
+        CONST.NEW_EXPENSIFY_URL,
+        CONST.STAGING_NEW_EXPENSIFY_URL,
+    ],
+    config,
+};
+
+export default linkingConfig;