title: global hamburger menu in react-native
body: <p>I'm trying to implement an element that will act as a hamburger menu to toggle my drawer navigator from all screens. However, my hamburger menu (aka MenuToggle) won't appear in any of my interfaces.   Here are 3 files that can reproduce the problem:</p>
  
  <pre><code>// Router.js - the main point of entry for the project
  
  import React, { Component } from 'react';
  import {DrawerNavigator} from 'react-navigation';
  
  import Contact from './Contact';
  
  // Router
  let Router = 
  {
    Contact:{screen:Contact},
  }
  
  const Navigator = DrawerNavigator(Router);
  export default Navigator;
  </code></pre>
  
  <p>Now here's my contact.js</p>
  
  <pre><code>// Contact.js
  import React, { Component } from 'react';
  import {StackNavigator} from 'react-navigation';
  import MenuToggle from './MenuToggle';
  
  class Contact extends Component {
    static navigationOptions = {title:"Contact",drawLabel:"Contact"};
  
    render() {
      return (
        &lt;MenuToggle navigate={this.props.navigation.navigate}/&gt;
      );
    }
  }
  let Router = 
  {
      Contact:{screen:Contact}
  }
  
  const Navigator = StackNavigator(Router);
  export default Navigator;
  </code></pre>
  
  <p>And here is my MenuToggle.js</p>
  
  <pre><code>// MenuToggle.js
  import React, { Component } from 'react';
  
  import {
    View,
    TouchableHighlight
  } from 'react-native';
  
  
  export default class MenuToggle extends Component {
  
      constructor(props)
      {
          super(props);
      }
  
  
    render() {
      const style1 =  {
      backgroundColor:'yellow',
      width:40,
      height:40,
      zIndex:20,
      position:'absolute', // comment out this line to see the menu toggle
      top:5,
      right:-80,
      };
      const style2 = {
          backgroundColor:'yellow',
      }
      return (
            &lt;TouchableHighlight
              onPress={() =&gt; this.props.navigate('DrawerOpen')} style={style1}&gt;
              &lt;View style={style2}&gt;&lt;/View&gt;
            &lt;/TouchableHighlight&gt;
      );
    }
  }
  </code></pre>
  
  <p>My MenuToggle.js never shows up in the contact screen.  If however I comment out <code>position:absolute</code>, then it will appear a underneath my header and a little on the left.  But I need it to appear in the top right of the screen overlaid on top of the header.  </p>
  
  <p>How do I get this hamburger menu to appear on all screens at the top right?</p>