1

I am trying to use React Navigation and StackNavigator to navigate around my app.

I have a button with onPress={() => navigate('DetailsScreen'), and I was hoping that would take me to the DetailsScreen, but I'm getting the following error:

E ReactNativeJS: undefined is not an object (evaluating 'this.props.navigation.navigate')

What do I need to add in order to get this working?

See my code here: https://gist.github.com/chapeljuice/bef4b0a4dedef2994c81f3634b81aa43

Improve this question

1 Answer 1

Reset to default
4

You component is not navigation aware (it's not a screen). Hence, you have 2 common solutions here:

Use the parent

Pass the navigation prop from your parent component (if it's a screen).

<Card navigation={navigation} />

This is the simplest solution.

Use the Higher-Order component withNavigation

If the parent component is not navigation aware or if it's too complex to pass down the props, you can use the HOC withNavigation:

export default withNavigation(connect(mapStateToProps)(Card))

You will then have the navigation prop available.

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

2 Comments

Thank you so much! The parent of Card is not a screen, so I went with the HOC withNavigation option. I do have a question though - since the parent of Card is not a screen ... is there a way to keep passing the navigation prop down multiple child levels? Do I just keep using your first method on each parent / child? Thanks again for your help!
@chapeljuice That's how React works. You must pass down the prop on each level. You don't have any other solutions and that's why they created the HOC, specifically for this use-case: very nested child.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.