Pass navigation.navigate to Child Component

Question

Building an app using react-navigation. I have a parent component that pulls from firebase and renders data in a listview. The listview render component \'ListName\' has an onRo

Answer 1

One way is to have a onPress handler in your ProvideScreen component that is passed down to your list item component and thus in ProvideScreen's onRowPress function, you will have access to this.props.navigation.

In ProvideScreen:

class ProvideScreen extends Component {
  ...
  onRowPress(someRowData) {
    this.props.navigation.navigate('Feedback', { someRowData });
  }
  ...

  renderRow(user) {
    return ;
  }
}

In ListName:

class ListName extends Component {
  ...
  onRowPress() {
    this.props.onRowPress(someData);
  }
  ...
}

Of course, don't forget about binding the functions to this scope when you are using event handlers. e.g. in constructor:

this.onRowPress = this.onRowPress.bind(this);

An alternative define onRowPress with an arrow functions:

onRowPress = () => {
 this.props.navigation.navigate...
}