"console.error: "the action 'navigate' with payload {"name":"Login"}was not handled by any navigator. "

Question

Current Behavior

Currently, I have an overlying stack navigator that contains all the states the user can be in, and the code currently looks like

function GoToButton({ screenName }) {
    const navigation = useNavigation();

    return (
      <TouchableOpacity
        onPress={() => navigation.navigate(screenName)}
      />
    );
}
const AppNavigator = createStackNavigator({
    Login: {screen: Login},
    SignUp: {screen: SignUp},
    Nav: {screen: Nav},
    ConfirmEmail: {screen: ConfirmEmail},
    Onboard: {screen: Onboard},
    Map: {screen: Map}

    },{ headerMode: 'none' },
    {
        // Specifing Initial Screen
        initalRoute: 'Login'
    }
);
const App = createAppContainer(AppNavigator);

export default App;

However in one of the states, the Nav state that's bolded, it contains a tab navigator that contains another three states. Here is the following code:

function HomeScreen({navigation}) {
  return (
    <View style={Styles.container}>
      <Text style={Styles.logo}>
        LOGO
      </Text>
      <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
      <Text>Display Login screen</Text>
      </TouchableOpacity>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function Nav({navigation}){
    return (
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Home">
          <Tab.Screen name="Contact" component={ContactScreen} />
          <Tab.Screen name="Home" component = {HomeScreen}/>
          <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
        <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
         <Text> Display Login Screen</Text>
        </TouchableOpacity>
      </NavigationContainer>
    );
}

In that tab navigator in any of the tab screens, I want a button that allows me to navigate back to the login screen which is part of the stack navigator and that works fine in the following code in the export default function Nav({navigation}) outside of the tab navigator where I did {navigation.navigate('Login')}}>. However within the tab navigator say, for example, function HomeScreen({navigation}), when I try to run the same code to navigate to the login screen it gives this error:

"console.error: "the action 'navigate' with payload {"name":"Login"}was not handled by any navigator. "

I know it has something to do with nested navigator problems but I have been trying to figure this out and fixing it all day to no avail. I am convinced that I need to pass {navigation} into the Tab. Screen components but I am not particularly sure how to do that. If anyone knows how to fix this, please let me know. Thank you!!!

Answer 1

<NavigationContainer>
    <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Contact" component={ContactScreen} />
        <Tab.Screen name="Home" component = {HomeScreen}/>
        <Tab.Screen name="Profile" component={ProfileScreen} />
   </Tab.Navigator>

   //NavigationContainer doesn't recognize the below code.
   <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
      <Text> Display Login Screen</Text>
   </TouchableOpacity>
</NavigationContainer>

The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment. It takes care of platform specific integration and provides various useful functionality. But It doesn't handle layout components.

The better option would be to have a login button on the header of the Nav screen where you can implement navigate()