Revision history [back]

To permit the use of the same screen names and cycle in nested stack navigator, you can use different keys for each navigation instance. This can be achieved by passing a unique key prop to each nested navigator component.

For example, you can use the following code to create two nested stack navigators with the same screen names:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function FirstStack() {
  return (
    <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

function SecondStack() {
  return (
    <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="First Stack" screenOptions={{ headerShown: false }}>
        <Stack.Screen name="First Stack" component={FirstStack} options={{ title: 'First Stack' }} />
        <Stack.Screen name="Second Stack" component={SecondStack} options={{ title: 'Second Stack' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In this example, the FirstStack and SecondStack components each have their own unique key, which allows them to use the same screen names without conflicting with each other. The NavigationContainer component wraps both nested stack navigators and allows the user to switch between them using the screen names and cycle through them without any issues.