React Navigation — Cannot read property ‘navigate’ of Undefined

Last night I once again received a lesson that reading the docs is a great place to start, this time with React Navigation.

My project has a chart component (courtesy of Victory Chart, a fantastic charting library), then rendered as a child of a screen component.

The desired behaviour was that tapping on a chart area would then navigate to a detail component — somewhat basic functionality. However, it generated the error: “Cannot read property ‘navigate’ of Undefined in React Navigation.”

After spending an hour or two trying several solutions from Stack Overflow, none of the proposed solutions worked for my particular use case.

An “ah ha” moment … perhaps read the documentation, sure enough, five minutes later and I was back on track, error resolved, the desired behavior implemented.

I followed the documentation and added
import { withNavigation } from ‘react-navigation’; to my child component.

Then added the export to the end of the file, including withNavigation: export default withNavigation(ChartStatePenetrationItem);

The documentation for React Navigation is extremely well done. The Navigation prop reference API documentation took me five minutes to solve the issue — perhaps one day I’ll start with the documentation :)