Navigate to different screen from a button in a header

Question

I am using the new React-navigation from react-native. I have the navigation as follows:

StackNavigator:

1. TabNavigator // HomeNavigation
2. TabNavigator // NotificationNavigation

Full 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: <SearchNotification/>     }, };  class SearchNotification extends React.Component {     goToNotification = () => {         this.props.navigate('Notification');     };      render() {         return (             <View style={styles.container}>                 <TouchableOpacity>                     <Icon name="md-search" style={styles.Icon}/>                 </TouchableOpacity>                 <TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}>                     <Icon name="md-notifications" style={styles.Icon}/>                     <Text style={styles.number}>3</Text>                 </TouchableOpacity>             </View>         )     } }  const NotificationNavigation = TabNavigator({     Comment: {         screen: NotificationComment,     },     Follow: {         screen: NotificationFollow,     } }); 

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.

However, if I make changes to the header of HomeNavigation to this way, the SearchNotification is not displayed in the header.

HomeNavigation.navigationOptions = {     title: 'Home',     header: {         tintColor: 'white',         style: {             backgroundColor: '#2ec76e',         },         right: ({navigate}) => <SearchNotification navigate={navigate}/>     }, }; 

How can I navigate to different screen from a button in a header?

Answer 1

So the problem was (I think), inside the navigationOptions instead of using navigations I had to use navigate, and pass it as a props to the child (i.e. the SearchNotification).

So the final code looks like this:

HomeNavigation.navigationOptions = {     title: 'Home',     header: ({navigate}) => ({         right: (             <SearchNotification navigate={navigate}/>         ),     }), }; 

And within the SearchNotification component:

export default class SearchNotification extends React.Component {     goToNotification = () => {         this.props.navigate('Notification');     };      render() {         return (             <View style={styles.container}>                 <TouchableOpacity>                     <Icon name="md-search" style={styles.Icon}/>                 </TouchableOpacity>                 <TouchableOpacity style={styles.notificationWrapper}                                   onPress={() => this.props.navigate('Notification')}>                     <Icon name="md-notifications" style={styles.Icon}/>                     <Text style={styles.number}>3</Text>                 </TouchableOpacity>             </View>         )     } } 

Answer 2

Code that worked for me:

import Header from '../Containers/Header' ......................................... navigationOptions: ({ navigation }) => ({       title: 'Find User',       headerRight: <Header navigation={navigation} />,       headerStyle: styles.header     }) 

And to move to other screen:

this.props.navigation.navigate('UserDetail', {});