react-navigation/react-navigation.github.io

Found screens with the same name nested inside one another

hoanghcmus opened this issue · 2 comments

I am using react-navigation 6
I create a HomeStack :
const HomeStack = createNativeStackNavigator()
I create HomeNavigator:

const HomeNavigator = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name={ScreenTypes.Home} component={HomeScreen} />
    </HomeStack.Navigator>

I create another RootNavigator with include HomeNavigator:

const RootNavigator = () => (
  <RootStack.Navigator
    screenOptions={{
      headerShown: false,
      animation: 'fade',
    }}
  >
    <RootStack.Screen name={ScreenTypes.Home} component={HomeNavigator} />
  </RootStack.Navigator>
)

When I run app, I got following warning issue

Found screens with the same name nested inside one another. Check:

Home, Home > Home

This can cause confusing behavior during navigation. Consider using unique names for each screen instead.