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

You can also pass the navigation prop from the parent to the child directly by doing this:

renderRow(user) {
    return <ListName name={user[0]} navigation={this.props.navigation}/>;
}

This will allow you to use react-navigation's navigate method in ListName.

Info also from this page: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 2

import {withNavigation} from 'react-navigation';

class Parent extends Component{
  <Child {...this.props}/>
}

class Child extends Component {
  <TouchableOpacity onPress={()=>this.props.navigation.navigate("Screen")}>
    <V><T>
     {PRESS ME}
    </V></T>
  </TouchableOpacity>
}

export default withNavigation(Parent);

Answer 3

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 <ListName name={user[0]} onRowPress={this.onRowPress} />;
  }
}

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...
}

Answer 4

i just add this prop from parent and it worked:

<AppFooter navigation={this.props.navigation}  />

Answer 5

Pass all props like

Form

{...this.props}

here <Form> is my child components

other wise.

import { withNavigation } from 'react-navigation';

Then in the end

export default withNavigation(<ChildComponentName>);

Answer 6

Base on React Navigation: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

You just need to import withNavigation into child component only.

import { withNavigation } from 'react-navigation';

then export:

export default withNavigation(<YourChildComponent>);