title: How to pass navigator to hamburger menu component?
body: <p>I'm trying to implement a custom navigation drawer using react-navigation and react-native-elements. I also want all my screens to have a header (that has a hamburger from which I can control the drawer). The problem I'm facing is that the screen includes the header, while the drawer includes the screen, yet the header needs the drawer for its click event. So how do I pass the drawer object to my hamburger (inside the header component)?</p>
  
  <p>The header in the file <code>UniversalHeader.js</code> is as follows</p>
  
  <pre><code>    export default class UniversalHeader extends React.Component {
      render() {
      return (
        &lt;Header
            leftComponent={{ icon: 'menu', color: '#ea0', onPress: () =&gt; this.props.navigation.navigate('DrawerToggle'), size: 50}}
  
            centerComponent={{ text: this.props.label, style: { color: '#fff' } }}
        /&gt;
      );
       }
     } 
  </code></pre>
  
  <p>In my home screen, I have</p>
  
  <pre><code>import UniversalHeader from './UniversalHeader'
  
  export default class HomeScreen extends React.Component {
    render() {
      return (
        &lt;View&gt;
          &lt;UniversalHeader /&gt;
          &lt;Text&gt; cards go here &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Then in the compiling script collating the screens, I have</p>
  
  <pre><code>import  HomeScreen  from './home';
      class customNav extends React.Component {
  
    render() {
      return (
          &lt;View&gt;
              &lt;Avatar rounded xlarge source={require('./images/logo.png')} /&gt;
  
              &lt;DrawerNavigatorItems navigation={{state: [{routeName: 'Home', key: '0'}]}}
                  items={['Home', 'Discussions', 'Podcasts', 'Sermons', 'Events']}
                  onItemPress={route =&gt; this.props.navigation.navigate(route)}
  
                  renderIcon={(routeIcon) =&gt; (
                      &lt;Image source={{uri: `./images/${routeIcon}.png`}} style={[styles.icon, {/*tintColor: tintColor*/}]} /&gt;
                  )}
                  getLabel={route =&gt; route.toString()}
              /&gt;
          &lt;/View&gt;
      )
    }
  } 
  
  
  const MyApp = DrawerNavigator({
      Home: {
          screen: HomeScreen
      }
  }, {drawerBackgroundColor: '#000', contentComponent:  customNav}); 
  </code></pre>
  
  <p>The onPress method in Header leftComponent has no idea of who navigator is but I don't know how to get it across either from the screen 'home.js' or from the 'UniversalHeader.js'.</p>