title: "console.error: "the action 'navigate' with payload {"name":"Login"}was not handled by any navigator. "
body: <p><strong>Current Behavior</strong></p>
  
  <p>Currently, I have an overlying stack navigator that contains all the states the user can be in, 
  and the code currently looks like</p>
  
  <pre><code>function GoToButton({ screenName }) {
      const navigation = useNavigation();
  
      return (
        &lt;TouchableOpacity
          onPress={() =&gt; navigation.navigate(screenName)}
        /&gt;
      );
  }
  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;
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>function HomeScreen({navigation}) {
    return (
      &lt;View style={Styles.container}&gt;
        &lt;Text style={Styles.logo}&gt;
          LOGO
        &lt;/Text&gt;
        &lt;TouchableOpacity onPress={()=&gt; {navigation.navigate('Login')}}&gt;
        &lt;Text&gt;Display Login screen&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  
  const Tab = createBottomTabNavigator();
  
  export default function Nav({navigation}){
      return (
        &lt;NavigationContainer&gt;
          &lt;Tab.Navigator initialRouteName="Home"&gt;
            &lt;Tab.Screen name="Contact" component={ContactScreen} /&gt;
            &lt;Tab.Screen name="Home" component = {HomeScreen}/&gt;
            &lt;Tab.Screen name="Profile" component={ProfileScreen} /&gt;
          &lt;/Tab.Navigator&gt;
          &lt;TouchableOpacity onPress={()=&gt; {navigation.navigate('Login')}}&gt;
           &lt;Text&gt; Display Login Screen&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/NavigationContainer&gt;
      );
  }
  </code></pre>
  
  <p>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:</p>
  
  <p>"console.error: "the action 'navigate' with payload {"name":"Login"}was not handled by any navigator. "</p>
  
  <p>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!!!</p>