React Native: React Navigation StackNavigator not

Question

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

Answer 1

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.