title: How to use navigation.navigate from a component outside the stack.navigation
body: <p>I have an application using React native where I am using react-navigation (5.2.9). </p>
  
  <p>I built a Stack.Navigator where I've got my screens but I want the Footer component to be outside so it renders in all screens. The problem is, I can't navigate from the footer, which is what I need to do as the footer has a few buttons that should be changing the screen:</p>
  
  <pre><code>const Stack = createStackNavigator();
  
  const App = () =&gt; {    
    return (
      &lt;Provider store={store}&gt;
        &lt;NavigationContainer&gt;
          &lt;Header /&gt;
          &lt;Stack.Navigator&gt;
            &lt;Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{
              headerShown: false
            }}
            /&gt;
            &lt;Stack.Screen
              name="Login"
              component={LoginScreen}
              options={{
              headerShown: false
            }}
            /&gt;
          &lt;/Stack.Navigator&gt;
          &lt;Footer /&gt;
        &lt;/NavigationContainer&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  
  <p>How do I pass the navigation prop to the footer component?</p>