@react-navigation/core 7.3.0 → 7.4.0

package/src/getActionFromState.tsx

@@ -65,10 +65,35 @@ export function getActionFromState(
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
-  const payload = route
+  const payload:
+    | {
+        name: string;
+        params: NavigatorScreenParams<ParamListBase>;
+        path?: string;
+        pop?: boolean;
+      }
+    | undefined = route
     ? { name: route.name, path: route.path, params }
     : undefined;
 
+  // If the screen contains a navigator, pop other screens to navigate to it
+  // This avoid pushing multiple instances of navigators onto a stack
+  //
+  // For example:
+  // - RootStack
+  //   - BottomTabs
+  //   - SomeScreen
+  //
+  // In this case, if deep linking to `BottomTabs`, we should pop `SomeScreen`
+  // Otherwise, we'll end up with 2 instances of `BottomTabs` in the stack
+  //
+  // There are 2 ways we can detect if a screen contains a navigator:
+  // - The route contains nested state in `route.state`
+  // - Nested screens are defined in the config
+  if (payload && config?.screens && Object.keys(config.screens).length) {
+    payload.pop = true;
+  }
+
   while (current) {
     if (current.routes.length === 0) {
       return undefined;
@@ -108,6 +133,7 @@ export function getActionFromState(
 
     if (route.state) {
       params.params = { ...route.params };
+      params.pop = true;
       params = params.params as NavigatorScreenParams<ParamListBase>;
     } else {
       params.path = route.path;
@@ -116,6 +142,14 @@ export function getActionFromState(
 
     current = route.state;
     config = config?.screens?.[route.name];
+
+    if (config?.screens && Object.keys(config.screens).length) {
+      params.pop = true;
+    }
+  }
+
+  if (payload?.params.screen || payload?.params.state) {
+    payload.pop = true;
   }
 
   if (!payload) {

package/src/types.tsx

@@ -271,7 +271,11 @@ type NavigationHelpersCommon<
   /**
    * Navigate to a route in current navigation tree.
    *
-   * @param options Object with `name` for the route to navigate to, and a `params` object.
+   * @param options.name Name of the route to navigate to.
+   * @param [options.params] Params object for the route.
+   * @param [options.path] Path to associate the route with (e.g. for deep links).
+   * @param [options.merge] Whether to merge the params onto the route.
+   * @param [options.pop] Whether to pop routes in a stack to go back to the matching route.
    */
   navigate<RouteName extends keyof ParamList>(
     options: {
@@ -280,6 +284,7 @@ type NavigationHelpersCommon<
         params: ParamList[Screen];
         path?: string;
         merge?: boolean;
+        pop?: boolean;
       };
     }[RouteName]
   ): void;
@@ -950,6 +955,7 @@ export type NavigatorScreenParams<ParamList extends {}> =
       screen?: never;
       params?: never;
       initial?: never;
+      pop?: never;
       path?: string;
       state: PartialState<NavigationState> | NavigationState | undefined;
     }
@@ -960,6 +966,7 @@ export type NavigatorScreenParams<ParamList extends {}> =
             params?: ParamList[RouteName];
             initial?: boolean;
             path?: string;
+            pop?: boolean;
             state?: never;
           }
         : {
@@ -967,6 +974,7 @@ export type NavigatorScreenParams<ParamList extends {}> =
             params: ParamList[RouteName];
             initial?: boolean;
             path?: string;
+            pop?: boolean;
             state?: never;
           };
     }[keyof ParamList];

package/src/useNavigationBuilder.tsx

@@ -538,6 +538,7 @@ export function useNavigationBuilder<
         name: route.params.screen,
         params: route.params.params,
         path: route.params.path,
+        pop: route.params.pop,
       });
     }
 

package/src/useScheduleUpdate.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
  * However, navigation state is in the root component and React won't let us update it from a child.
@@ -17,5 +19,5 @@ export function useScheduleUpdate(callback: () => void) {
   // However, since we are using sync store, it might be fine
   scheduleUpdate(callback);
 
-  React.useEffect(flushUpdates);
+  useIsomorphicLayoutEffect(flushUpdates);
 }