feat: warn on duplicate screen names across navigators

packages/core/src/BaseNavigationContainer.tsx

@@ -20,6 +20,7 @@ import useOptionsGetters from './useOptionsGetters';
 import useEventEmitter from './useEventEmitter';
 import useSyncState from './useSyncState';
 import checkSerializable from './checkSerializable';
+import checkDuplicateRouteNames from './checkDuplicateRouteNames';
 import type {
   NavigationContainerEventMap,
   NavigationContainerRef,
@@ -32,6 +33,7 @@ const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
 
 const serializableWarnings: string[] = [];
+const duplicateNameWarnings: string[] = [];
 
 try {
   /**
@@ -294,15 +296,17 @@ const BaseNavigationContainer = React.forwardRef(
     });
 
     React.useEffect(() => {
+      const hydratedState = getRootState();
+
       if (process.env.NODE_ENV !== 'production') {
-        if (state !== undefined) {
-          const result = checkSerializable(state);
+        if (hydratedState !== undefined) {
+          const serializableResult = checkSerializable(hydratedState);
 
-          if (!result.serializable) {
-            const { location, reason } = result;
+          if (!serializableResult.serializable) {
+            const { location, reason } = serializableResult;
 
             let path = '';
-            let pointer: Record<any, any> = state;
+            let pointer: Record<any, any> = hydratedState;
             let params = false;
 
             for (let i = 0; i < location.length; i++) {
@@ -344,13 +348,28 @@ const BaseNavigationContainer = React.forwardRef(
               console.warn(message);
             }
           }
+
+          const duplicateRouteNamesResult = checkDuplicateRouteNames(
+            hydratedState
+          );
+
+          if (duplicateRouteNamesResult.length) {
+            const message = `Found screens with the same name in multiple navigators. Check:\n${duplicateRouteNamesResult.map(
+              ([_, locations]) => `\n${locations.join(', ')}`
+            )}\n\nThis can cause confusing behavior during navigation. Consider using unique names for each screen instead.`;
+
+            if (!duplicateNameWarnings.includes(message)) {
+              duplicateNameWarnings.push(message);
+              console.warn(message);
+            }
+          }
         }
       }
 
       emitter.emit({ type: 'state', data: { state } });
 
       if (!isFirstMountRef.current && onStateChangeRef.current) {
-        onStateChangeRef.current(getRootState());
+        onStateChangeRef.current(hydratedState);
       }
 
       isFirstMountRef.current = false;

packages/core/src/checkDuplicateRouteNames.tsx

@@ -0,0 +1,38 @@
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+export default function checkDuplicateRouteNames(state: NavigationState) {
+  const allRouteNames = new Map<string, string[]>();
+
+  const getRouteNames = (
+    location: string,
+    state: NavigationState | PartialState<NavigationState>
+  ) => {
+    state.routeNames?.forEach((name) => {
+      const current = allRouteNames.get(name);
+      const currentLocation = location ? `${location} > ${name}` : name;
+
+      if (current) {
+        current.push(currentLocation);
+      } else {
+        allRouteNames.set(name, [currentLocation]);
+      }
+    });
+
+    state.routes.forEach((route: typeof state.routes[0]) => {
+      if (route.state) {
+        getRouteNames(
+          location ? `${location} > ${route.name}` : route.name,
+          route.state
+        );
+      }
+    });
+  };
+
+  getRouteNames('', state);
+
+  const duplicates = Array.from(allRouteNames.entries()).filter(
+    ([_, value]) => value.length > 1
+  );
+
+  return duplicates;
+}

packages/core/src/fromEntries.tsx

@@ -0,0 +1,13 @@
+// Object.fromEntries is not available in older iOS versions
+export default function fromEntries<K extends string, V>(
+  entries: (readonly [K, V])[]
+) {
+  return entries.reduce((acc, [k, v]) => {
+    if (acc.hasOwnProperty(k)) {
+      throw new Error(`A value for key '${k}' already exists in the object.`);
+    }
+
+    acc[k] = v;
+    return acc;
+  }, {} as Record<K, V>);
+}

packages/core/src/getPathFromState.tsx

@@ -4,6 +4,7 @@ import type {
   PartialState,
   Route,
 } from '@react-navigation/routers';
+import fromEntries from './fromEntries';
 import type { PathConfig, PathConfigMap } from './types';
 
 type Options = { initialRouteName?: string; screens: PathConfigMap };
@@ -227,17 +228,6 @@ export default function getPathFromState(
   return path;
 }
 
-// Object.fromEntries is not available in older iOS versions
-const fromEntries = <K extends string, V>(entries: (readonly [K, V])[]) =>
-  entries.reduce((acc, [k, v]) => {
-    if (acc.hasOwnProperty(k)) {
-      throw new Error(`A value for key '${k}' already exists in the object.`);
-    }
-
-    acc[k] = v;
-    return acc;
-  }, {} as Record<K, V>);
-
 const getParamName = (pattern: string) =>
   pattern.replace(/^:/, '').replace(/\?$/, '');