Navigating between screens pressing headers image

Simple question: I am trying to navigate from HomeScreen.js to MessageScreen once pressing the HomeScreen.js header's image.

However, when I press the image an error pops up:

TypeError: navigation.navigate is not a function (In 'navigation-navigate("MessageScreen")', 'navigation.navigate' is undefined)

What is the problem with the navigation? This is the main code from App.js

const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: HomeScreen,
        navigationOptions: (navigation) => ({
            headerShown: true,
            title:'As minhas viagens',
            headerTintColor:'black',
            headerRight: ()=>  
                <TouchableOpacity onPress={() => navigation.navigate("MessageScreen")}>
                    <Image 
                    source={require("./assets/message.png")} 
                    style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>
        })
      },
      MessageScreen: {
        screen: MessageScreen,
        navigationOptions: () => ({
          headerShown: true
        })
      }
    });

Try this:

const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => {
          return {
            headerShown: true,
            title:'As minhas viagens',
            headerTintColor:'black',
            headerRight: () =>  
                <TouchableOpacity onPress={() => navigation.navigate("MessageScreen")}>
                    <Image 
                    source={require("./assets/message.png")} 
                    style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>
          }
        })
      },
      MessageScreen: {
        screen: MessageScreen,
        navigationOptions: () => ({
          headerShown: true
        })
      }
    });