React Navigation navigate to new screen from button in custom header

Question

I'm using React-Navigation and i created my custom header. I used:

navigationOptions: {
    header: <Header />
}

Which <Header /> is imported from the path.

I have an TouchableOpacity inside header which i want to use to navigate to another tab! I tried to use this.props.navigation.navigate("_TabTwo") but i get an error:

can't find variable navigate

I also looked at this question but it's about the default header! The point is my <Header /> is a custom component !

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

Thanks in advance!

Answer 1

Use navigationOptions like so and pass the navigation as prop to the Header component

navigationOptions: ({ navigation }) => ({ 
  header: <Header navigation={navigation} />
})

The Header component is not a screen but a part of the navigationOptions so it doesn't inherit the navigation prop, you need to pass it manually