Passing React Navigation to Child of Child Component

Question

I'm dynamically building my "screen" with the use of child "row" and "button" components. I'm only using this method because I can't find a flex-flow property available for react-native.

So basically I'm mapping through an array of arrays to build each row, and within the row, mapping through each array to build each button. Because the onPress needs to be set in the button, I'm passing the URL for each onPress{() => this.props.navigation.navigate({navigationURL})

as a prop, first to the row, and then to the button. The problem is I keep getting the error 'Cannot read property 'navigation' of undefined. I'm sure this is because only the actual "screens" within the navigator have access to the navigation props. I've also tried passing

navigation={this.props.navigation}

but had no success. I've looked through all of the documentation and can't seem to find anything helpful. Anyone else encountered a similar situation?

Answer 1

If you want to access the navigation object from a component which is not part of navigator, then wrap that component in withNavigation HOC. Within the wrapped component you can access navigation using this.props.navigation. Take a look at the official document

Sample

import { withNavigation } from 'react-navigation';
...
class CustomButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { 
      this.props.navigation.goBack() }} />;
    }
}

export default withNavigation(CustomButton);

Hope this will help!