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!

Can you show your <Header /> component

SGhaleb
– SGhaleb

2018-08-23 16:12:32 +00:00
Commented Aug 23, 2018 at 16:12 — SGhaleb
– SGhaleb, Commented Aug 23, 2018 at 16:12
@SGhaleb Updated - Tnx

MoKhajavi75
– MoKhajavi75

2018-08-23 16:14:39 +00:00
Commented Aug 23, 2018 at 16:14 — MoKhajavi75
– MoKhajavi75, Commented Aug 23, 2018 at 16:14

needsleep · Accepted Answer · 2018-08-23 16:37:58Z

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

answered Aug 23, 2018 at 16:37

needsleep

2,73513 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Navigation navigate to new screen from button in custom header

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related