title: Navigate to different screen from a button in a header
body: <p>I am using the new <a href="https://github.com/react-community/react-navigation" rel="noreferrer">React-navigation</a> from react-native. I have the navigation as follows:</p>
  
  <p>StackNavigator:</p>
  
  <ol>
  <li>TabNavigator // HomeNavigation</li>
  <li>TabNavigator // NotificationNavigation</li>
  </ol>
  
  <p>Full code:</p>
  
  <pre><code>const MainNavigation = StackNavigator({
      Home: {
          screen: HomeNavigation,
      },
      Notification: {
          screen: NotificationNavigation,
      }
  });
  
  const HomeNavigation = TabNavigator({
      AllPost: {
          screen: All,
      },
      ArticlePost: {
          screen: Article,
      },
      BusinessPost: {
          screen: Job,
      },
  });
  
  HomeNavigation.navigationOptions = {
      title: 'Home',
      header: {
          right: &lt;SearchNotification/&gt;
      },
  };
  
  class SearchNotification extends React.Component {
      goToNotification = () =&gt; {
          this.props.navigate('Notification');
      };
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Icon name="md-search" style={styles.Icon}/&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}&gt;
                      &lt;Icon name="md-notifications" style={styles.Icon}/&gt;
                      &lt;Text style={styles.number}&gt;3&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const NotificationNavigation = TabNavigator({
      Comment: {
          screen: NotificationComment,
      },
      Follow: {
          screen: NotificationFollow,
      }
  });
  </code></pre>
  
  <p>HomeNavigation has a header, and the header has a right component of SearchNotification. SearchNotification has an icon which on press I would like to go to the NotificatoinNavigation.</p>
  
  <p>However, if I make changes to the header of HomeNavigation to this way, the SearchNotification is not displayed in the header.</p>
  
  <pre><code>HomeNavigation.navigationOptions = {
      title: 'Home',
      header: {
          tintColor: 'white',
          style: {
              backgroundColor: '#2ec76e',
          },
          right: ({navigate}) =&gt; &lt;SearchNotification navigate={navigate}/&gt;
      },
  };
  </code></pre>
  
  <p>How can I navigate to different screen from a button in a header?</p>