CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6react-navigation
MoKhajavi75
MoKhajavi75

Reputation: 2702

React Navigation navigate to new screen from button in custom header

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!

Upvotes: 0

Views: 239

Answers (1)

needsleep
needsleep

Reputation: 2715

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

Upvotes: 1

Related Questions