Wrong back button behavior in react native

Question

guys I have a question about navigation in react native. So I mainly use TabNavigator. I have 2 main stack navigators in the app

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

In my ProfileStack screen, I have also two pages: MyProfile and UsersProfile:

const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen({route, navigation}) {
  return (
    <ProfileStack.Navigator initialRouteName="MyProfile">
      <ProfileStack.Screen name="MyProfile" component={MyProfilePage} />
      <ProfileStack.Screen name="UserProfile" component={UserProfilePage} options={{
        headerLeft: () => (<View>
            <Button title="back" onPress={() => {navigation.goBack()}}/>
          </View>)
      }}/>
    </ProfileStack.Navigator>
  );
}

Now I want to navigate from the HomeScreen to the UserProfilePage and pass params to this screen. I'm doing it like this:

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen this</Text>
      <Button
        title="Go to another user profile"
        onPress={() => navigation.navigate('Profile', {screen: 'UserProfile', params: {userId: 1235}})}
      />
    </View>
  );
}

So now, when I come to the page UserProfile I see that it loads also the Profile page, and just for a second I see blinking of ProfilePage and its UI that is not cool, and should it be like so? I guess not. Then if I press the BACK button on UsersProfilePage , I'm navigating back to HomeScreen - and this is ok! This is what I expect!

But now, If I will press ProfileTab I see only UsersProfilePage but not MyProfilePage . When I press the BACK button again, I go back to the HomeScreen that is weird for me. Can u explain why it happens? Why I don't get back to the MyProfilePage .

I prepared a stack here . You can reproduce this behavior.

Answer 1

This is because you're navigating to a screen in a nested navigator. It is ignoring the initial route. Then when you press the tab again it is still mounted and will still have the previous route state, which is just the screen without the initial screen.

By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. This behaviour is different from the React Navigation 4.

If you need to render the initial route specified in the navigator, you can disable the behaviour of using the specified screen as the initial screen by setting initial: false:

navigation.navigate('Root', {
  screen: 'Settings', 
  initial: false,
});

See https://reactnavigation.org/docs/nesting-navigators/#rendering-initial-route-defined-in-the-navigator and https://reactnavigation.org/docs/navigation-lifecycle/