React Native: React Navigation Stacknavigator Not Working. Getting Error: "undefined Is Not An Object (evaluating 'this.props.navigation.navigate')"

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

Solution 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).

<Cardnavigation={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.