title: How do I pass navigation props from parent component to header?
body: <p>I have 4 pages:  App.js, HomeScreen.js, Login.js, Toolbar.js</p>
  
  <p>My App page with the StackNavigator:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Platform,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  
  import { StackNavigator, DrawerNavigator } from 'react-navigation';
  
  import Splash from './screens/Splash';
  import HomeScreen from './screens/HomeScreen';
  import Login from './screens/Login';
  import Lobby from './screens/Lobby';
  import Wifi from './screens/Wifi';
  import Toolbar from './components/ToolBar/Toolbar';
  import Mobile from './screens/Mobile';
  
  
  ;
  
  const Navigation = StackNavigator({
    Splash:{screen: Splash},
    HomeScreen:{screen: HomeScreen},
    Login:{screen: Login},
    Lobby:{screen: Lobby},
    Wifi:{screen: Wifi},
    Mobile:{screen:Mobile}
  }, {
    mode: 'modal',
    headerMode: 'none'
  });
  
  
  export default Navigation;
  </code></pre>
  
  <p>I'm importing Toolbar to HomeScreen and would like to pass the navigation props from HomeScreen to Toolbar so that I can access the Login page from both the Toolbar and HomeScreen.  </p>
  
  <p>My Toolbar page:</p>
  
  <pre><code>import React,{Component} from 'react';
  import {Text, View, Button, StyleSheet, TouchableOpacity, 
      Dimensions,
      Image,ScrollView, Picker, FlatList} from 'react-native';
  import { StackNavigator, DrawerNavigator } from 'react-navigation';
  import config from '../../components/config/index';
  
  
  
  
  class Toolbar extends Component{
      constructor(){
          super()
          this.state = {
  
          }
      }
      render(){
      //const {navigate} = this.props.navigation;
          return(
              &lt;View style={styles.mainToolbar}&gt;
                  &lt;View style={styles.containerForThree}&gt;
                      &lt;View style={styles.leftArrowContainer}&gt;
  
                          &lt;TouchableOpacity
                              onPress={()=&gt;navigate('Login')}
                          &gt;
                              &lt;Text&gt;hello&lt;/Text&gt;
  
                          &lt;/TouchableOpacity&gt;
  
                      &lt;/View&gt;
  </code></pre>
  
  <p>As of now, I have const navigate commented out because HomeScreen won't load if it's appears.</p>
  
  <p>HomeScreen:</p>
  
  <pre><code>import React,{Component} from 'react';
  import {
      AppRegistry, StyleSheet, Text, View, Image, ScrollView, Button, TouchableOpacity, Dimensions
      } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import Toolbar from '../components/ToolBar/Toolbar';
  
  export default class HomeScreen extends Component {
      static navigationOptions ={
          title: 'Home Screen'
      };
  
  
      onValueChange(value, idx){
          this.setState({
              language: value
          })
  
          AsyncStorage.setItem('language', value)   
      }
  
      render(){
          var {navigate} = this.props.navigation;
          return(
              &lt;View style={styles.scrollContainer}&gt;
              &lt;Toolbar navigate={navigate}/&gt;
                  &lt;View&gt;
                      &lt;Text&gt;Welcome To the SEcond Page&lt;/Text&gt;
                          &lt;Button
                              onPress={
                                  ()=&gt;navigate("Login")
                              }
                              title="Go to Login"
                          /&gt;
                  &lt;/View&gt;
  </code></pre>
  
  <p>I've attempted to pass navigation props from HomeScreen to Toolbar via 
  </p>
  
  <p>When I press the button, it says can't find variable 'navigate'.  However, when I uncomment out navigate on Toolbar, I get the error TypeError: undefined is not an object(evaulating 'this.props.navigation.navigate')  </p>