fix: check duplicate names only for immediate nested screens

packages/core/src/BaseNavigationContainer.tsx

@@ -109,7 +109,7 @@ const BaseNavigationContainer = React.forwardRef(
 
     if (!parent.isDefault && !independent) {
       throw new Error(
-        "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them."
+        "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them."
       );
     }
 
@@ -356,8 +356,8 @@ const BaseNavigationContainer = React.forwardRef(
           );
 
           if (duplicateRouteNamesResult.length) {
-            const message = `Found screens with the same name in multiple navigators. Check:\n${duplicateRouteNamesResult.map(
-              ([_, locations]) => `\n${locations.join(', ')}`
+            const message = `Found screens with the same name nested inside one another. 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)) {

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -831,3 +831,85 @@ it('works with state change events in independent nested container', () => {
     type: 'test',
   });
 });
+
+it('warns for duplicate route names nested inside each other', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return (
+      <React.Fragment>
+        {descriptors[state.routes[state.index].key].render()}
+      </React.Fragment>
+    );
+  };
+
+  const TestScreen = () => <></>;
+
+  const spy = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo" component={TestScreen} />
+              <Screen name="baz" component={TestScreen} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    'Found screens with the same name nested inside one another.'
+  );
+
+  render(
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="qux">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo">
+                {() => (
+                  <TestNavigator>
+                    <Screen name="foo" component={TestScreen} />
+                    <Screen name="baz" component={TestScreen} />
+                  </TestNavigator>
+                )}
+              </Screen>
+              <Screen name="bar" component={TestScreen} />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(spy.mock.calls[1][0]).toMatch(
+    'Found screens with the same name nested inside one another.'
+  );
+
+  render(
+    <BaseNavigationContainer>
+      <TestNavigator initialRouteName="bar">
+        <Screen name="foo" component={TestScreen} />
+        <Screen name="bar">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo" component={TestScreen} />
+              <Screen name="baz" component={TestScreen} />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(spy).toHaveBeenCalledTimes(2);
+
+  spy.mockRestore();
+});

packages/core/src/checkDuplicateRouteNames.tsx

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