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. TabNav

Answer 1

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', {});

Answer 2

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>
        )
    }
}