title: Making navigation available to all components in React Native app
body: <p>I'm using <code>React Navigation 5</code> in my <code>React Native</code> app and I'm not exactly clear about how to make navigation available to all components. I also want to mention that my app uses <code>Redux</code> for state management but I didn't integrate <code>React Navigation</code> with <code>Redux</code> -- maybe I should!</p>
  
  <p>My <code>App.js</code> renders my <code>Navigator.js</code> component which looks like below. BTW, my app requires authentication and one of the key functions of the navigator function is to redirect unauthenticated users to login screen.</p>
  
  <pre><code>class Navigator extends Component {
  
     render() {
          return (
              &lt;NavigationContainer&gt;
                  {
                     this.props.isAuthenticated
                     ? &lt;MainMenuDrawer.Navigator drawerContent={(navigation) =&gt; &lt;DrawerContent member={this.props.member} navigation={navigation} drawerActions={DrawerActions} handleClickLogOut={this.handleClickLogOut} /&gt;}&gt;
                         &lt;MainMenuDrawer.Screen name="Home" component={HomeStack} /&gt;
                         &lt;MainMenuDrawer.Screen name="ToDoList" component={ToDoListStack} /&gt;
                       &lt;/MainMenuDrawer.Navigator&gt;
                     : &lt;SignInStack /&gt;
                  }
              &lt;/NavigationContainer&gt;
          );
        }
  }
  </code></pre>
  
  <p>Then in my <code>HomeStack</code>, I have my <code>Dashboard</code> component which happens to be a class component that needs to access <code>navigation</code>. Here's my <code>HomeStack</code>:</p>
  
  <pre><code>const HomeStackNav = new createStackNavigator();
  
  const HomeStack = () =&gt; {
  
     return(
        &lt;HomeStackNav.Navigator screenOptions={{ headerShown: false }}&gt;
           &lt;HomeStackNav.Screen name="DashboardScreen" component={Dashboard} /&gt;
           &lt;HomeStackNav.Screen name="SomeOtherScreen" component={SomeOtherComponent} /&gt;
        &lt;/HomeStackNav.Navigator&gt;
     );
  }
  
  export default HomeStack;
  </code></pre>
  
  <p>Say, my <code>Dashboard</code> component looks like below. How do I make <code>navigation</code> available to this component?</p>
  
  <pre><code>class Dashboard extends Component {
  
     handleNav() {
  
        // Need to use navigation here...
     }
  
     render() {
        return (
           &lt;Text&gt;Welcome to Dashboard&lt;/Text&gt;
           &lt;Button onPress={() =&gt; this.handleNav()}&gt;Go somewhere&lt;/Button&gt;
        );
     }
  }
  
  function mapStateToProps(state) {
      return {
          member: state.app.member
      };
  }
  
  function mapDispatchToProps(dispatch) {
  
      return {
          actions: bindActionCreators(appActions, dispatch)
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
  </code></pre>
  
  <p>Do I need to pass <code>navigation</code> manually to each component? That seems too repetitive and prone to error. How do I make <code>navigation</code> available throughout my app?</p>