javascript - React Navigation - Go back to a screen in another Navigator

Question

I have a createBottomTabNavigator() in a screen of my createStackNavigator. Basically i have my App.js like this :

const RootStack = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Principal: {
      screen: Principal, 
      navigationOptions: {
        headerShown: false,
      },
    },
  },
  {
    initialRouteName: "Login"
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

And in my "Principal.js" i'm creating a createBottomTabNavigator()

const Tab = createBottomTabNavigator();

class ConnectNavigator extends React.Component {

    (....)
        render() {
            return (
                <NavigationContainer>
                  <Tab.Navigator (....)>
                    <Tab.Screen name="Home" component={CheckPage} />
                    <Tab.Screen name="Settings" component={SettingPage} />
                  </Tab.Navigator>
                </NavigationContainer>
              );
            }
        }

Basically, in my SettingPage, i want to go back in my "Login" screen. But because i have two Navigator, i can't. I know, i'm not very clear, but my question is : "Can i go in my Login Screen when i'm in a Tab.Screen ?"

I have already tried to do this.props.navigation.navigate('Login') in my Settings screen but i have this error

The action 'NAVIGATE' with payload {"name":"Login","params":{"screen":"Login"}} was not handled by any navigator.

Do you have a screen named 'Login'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

question from:https://stackoverflow.com/questions/66064773/react-navigation-go-back-to-a-screen-in-another-navigator

Answer 1

I'm not sure if you tried what's written in the documentation mentioned in the error, but you could try something like this:

navigation.navigate('Home', { screen: 'Login' });

Edit:

You could re-structure it a bit:

const AppNavigation = () => <NavigationContainer>
     <Stack.Navigator initialRouteName={"Login"}>
        <Stack.Screen
          name={"Login"}
          options={{
            headerStyle: styles.loginHeader,
            headerShown: false,
          }}
          component={LaunchScreen}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name={"Principal"}
          component={BottomTabNavigation}
        />
</NavigationContainer>
    
    
    
    
const Tab = createBottomTabNavigator()
const BottomTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName={"Home"}
    >
    <Tab.Screen name="Home" component={CheckPage} />
     <Tab.Screen name="Settings" component={SettingPage} />
 
    </Tab.Navigator>
  )
}