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

chapeljuice
  • 856
  • 1
  • 11
  • 21

1 Answers1

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.

Kerumen
  • 4,193
  • 2
  • 19
  • 33
  • 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 May 17 '17 at 16:26
  • 1
    @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. – Kerumen May 18 '17 at 14:21