title: Custom close button inside the header of StackNavigator of React Navigation
body: <p>I'm currently working with React Native and there I've got a question about React Navigation and the <code>StackNavigator</code>. I would like to add a custom close button to the header, but I'm not sure how to do this. </p>
  
  <p>It's just possible for me to navigate to the screens, but not for example to go back or dispatch something. </p>
  
  <p>On my example the <code>navigationOptions</code> for the <code>HomeScreen</code> is working. The drawer opens and the <code>SettingsButton</code> navigates to the settings screen. But I've got problems with the <code>navigationOptions</code> of the <code>EntryScreen</code>. There I build a <code>CloseButton</code> to go back, but I need access to the navigation object. </p>
  
  <p>With <code>navigate</code> it's possible to navigate to other screens, but I need access to the parent object <code>navigation</code>. For example on the class for the drawer it's possible to get access through <code>props.navigation</code> (For example <code>props.navigation.navigate('Home')</code> or <code>props.navigation.goBack(null)</code>)</p>
  
  <p>This is a part of my current code. Of course it's currently not working because of the missing access to <code>navigation</code>:</p>
  
  <pre><code>const Stack = StackNavigator({
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        header: ({ navigate }) =&gt; ({
          left: &lt;DrawerButton navigate={navigate} /&gt;,
          right: &lt;SettingsButton navigate={navigate} /&gt;
        })
      }
    },
    Entry: {
      screen: EntryScreen,
      navigationOptions: {
        header: ({ navigation }) =&gt; ({
          right: &lt;CloseButton navigate={navigation } /&gt;
        })
      }
    }
  })
  
  export const Drawer = DrawerNavigator({
    Home: {
      screen: Stack
    }},
    {
      contentComponent: HamburgerMenu
    }
  )
  </code></pre>
  
  <p>These are the buttons:</p>
  
  <pre><code>export const CloseButton = (props) =&gt; {
    let testButton = &lt;TouchableHighlight onPress={() =&gt; props.navigation.goBack(null)}&gt;
      &lt;Icon name='close' style={styles.headerButtonIcon} /&gt;
    &lt;/TouchableHighlight&gt;
    return testButton 
  }
  
  export const SettingsButton = (props) =&gt; (
    &lt;TouchableHighlight onPress={() =&gt; props.navigate('Settings')}&gt;
      &lt;Icon name='more-vert' style={styles.headerButtonIcon} /&gt;
    &lt;/TouchableHighlight&gt;
  )
  </code></pre>
  
  <p>Maybe you can help me there. Thanks in advance!</p>