CODEWITHSUNDEEP
react-nativereact-navigation
kojow7
kojow7

Reputation: 11384

Passing updated state to react-navigation screen

How can I pass new state to a React Navigation function?

My code currently looks like this:

Simplified view of my parent class:

constructor(props){
    super(props)

    this.state = {
        code: "aaa"
    }

    this.refresh = this.refresh.bind(this)
}


refresh() {
    this.setState({
        code: "bbb"
    })
}

async componentDidMount(){
    const {navigate} = this.props.navigation

    navigate("Child", {screen: "Screen Two", code: this.state.code, refresh: this.refresh})

}

In the child class I then do the following:

this.props.navigation.state.params.refresh()

The issue I am facing:

Option 1: If I have the code as it currently is, it will not pass the new state value to the navigator because it is not in the render function

Option 2: If I place the code in the render function, it gives me the warning: "Cannot update during an existing state transition".

What am I doing wrong and how can I fix this?

Further details I am using this main screen to load some of the details from an API on the web and store them in state. I want to be able to pass a refresh function to the second screen that I will be able to use to reload data from the API onto the main screen. Once the data is loaded back into the state on the main screen it should propagate back down to the second screen. This seems easy to do without using a navigator, but I am not sure how to do it with a navigator.

I am not currently wanting to use redux due to the learning curve, but would like to look into it some time in the future.

Upvotes: 1

Views: 4007

Answers (1)

csath
csath

Reputation: 1316

So you are trying to call refresh() method inside your child component. If you use this inside render function the refresh() method will be called repeatedly and it will give a warning: "Cannot update during an existing state transition".

If you keep the code as it is, it will update the parent class state. But that update will not be reflected when you accessing this.props.navigation.state.params.code. This will only give the value 'aaa'.

Option 1;

You can use redux and easily handle this scenario.

Option 2;

If you really want to know the value of the parent class state you can pass a function as navigation params to child which will return the value of the state.

Parent class.

 constructor(props){
    super(props)

    this.state = {
        code: "aaa"
    }

    this.refresh = this.refresh.bind(this);
    this.getState = this.getState.bind(this)
 }

 refresh() {
     this.setState({ code: "bbb" })
 }

 getState() {
     return this.state.code;
 }

 async componentDidMount(){
     const {navigate} = this.props.navigation

     navigate("Child", {screen: "Screen Two", code: this.state.code, refresh: this.refresh, getState: this.getState })
 }

Inside your child class use the following code to get the parent class state.

 let parentClassState = this.props.navigation.state.params.getState();

Upvotes: 1

Related Questions