CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
learningAngular
learningAngular

Reputation: 321

How do I pass state between pages using react navigation?

I'm trying to pass state from main page to a details page. The details page changes the parent state successfully by calling function (via props). However, a re-render is not triggered and the details page is not updated (despite it having updated props correctly). How can I pass state to a child page (details) such that it will trigger it to re-render?

It seems like a similar question is asked here but I don't quite understand it. I'm not using redux as this is a small app.

//Navigator Setup
const AppNavigator = createStackNavigator({
    Home: {
        screen: Home} 
    Details: {
        screen: Details}
);

//Home page:
this.props.navigation.navigate("Details", {
    changeDetails: this.changeDetails
    details: this.state.details})
}

//Details page
let details = props.navigation.getParam("details", "n/a");
let changeDetails = props.navigation.getParam("changeDetails", "n/a");

//change things
//render stuff

Upvotes: 2

Views: 7080

Answers (3)

amirhosein
amirhosein

Reputation: 921

as document say:

this.props.navigation.navigate('YOUR TARGET NAME', {
          itemId: 86,
          otherParam: 'anything you want here',
        });

here is the full example,good luck

edit : in child component in componentDidUpdate() method you must check that if props are changed set new props to state,then component will be re-rendered with new state's:

componentDidUpdate(){
      if ('YOUR DATA FROM PARENT' != 'PREVIOUS DATA FROM PARENT SAVED IN STATE'){
                this.setState({yourState: 'YOUR DATA FROM PARENT'})
       }

Upvotes: 0

Mounir Dhahri
Mounir Dhahri

Reputation: 214

Passing the data with navigation.navigate won't trigger a re-render since it is passing a copy of the props. You will need to find an other way to send the props so that your component gets aware of the changes. You can for example connect your component to your redux state (assuming you're using redux). If you are not using redux, you can send a refresh fucntion from your parent component navigate('Child', { refresh: refreshFunction } to the Child

You can then access this function in the child ( via something like this.props.navigation.state.params.refresh();or const refresh() = this.props.navigation.getParam('regresh') ) before the back action. This will trigger updating the parent state to update.

I hope this help you

Upvotes: 2

Ashutosh Patel
Ashutosh Patel

Reputation: 111

You have pass the data in correct way but while extracting the data you went wrong let details = props.navigation.getParam("details", "n/a"); just put this.props like this console.log(props.navigation.getParam.changeDetails); console.log(props.navigation.getParam.details) console.log is just for debugging purpose you can assign it to any variable And you will receive the data in object form or in json form.set this in constructor, render() or where you want to use this data

Upvotes: 0

Related Questions