Route not updating state from navigation params

Question

So I have this screen that show product details, it works like a template because only the data coming navigation params changes, I am having the issue because there's no reload, it works fine when going back and mounting it again, that's not the case here since I have related products showing on that same screen, I'll need a way to be able to either reload the current route or update the state

I have checked with console.log nothing shows up on second click

constructor (props) {
  super(props)
  this.state = {
    product: this.props.route.params.product,
    id: this.props.route.params.product.id,
  }
}

To navigate to use to the route I use on both the screen itself or in another route

viewProduct = (product) => {
  this.props.navigation.navigate('SingleProduct', { product: product })
}

I have tried setState inside of both componentDidMount and UNSAFE_componentWillReceiveProps but the results only shows after an additional click

Can you please let me know version of react-navigation and react-native ? — rashi jain, Jun 22 '20 at 23:01
Does this answer your question? [Refresh previous screen on goBack()](https://stackoverflow.com/questions/46504660/refresh-previous-screen-on-goback) — Irfan wani, Jan 24 '21 at 10:43
Here is the link of answer: https://stackoverflow.com/a/65869570/13789135 — Irfan wani, Jan 24 '21 at 10:45

score 3 · Accepted Answer · answered Jun 22 '20 at 23:11

3

You can use the following function to navigate from singleProduction screen to the same screen with the different params.

this.props.navigation.replace('SingleProduct', { product: product })

answered Jun 22 '20 at 23:11

rashi jain

474
3
9

score 1 · Answer 2 · answered Apr 25 '23 at 08:36

1

navigation.setParams({
   query: 'someText',
});

Taken from react navigation docs

answered Apr 25 '23 at 08:36

Aliaksei

1,094
11
20

score 0 · Answer 3 · answered Feb 02 '21 at 04:10

use the route.params?.product directly and mention change in useEffect array.

  useEffect(() => {

    return () => {
      // Clean up the subscription
      
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [route.params?.product]);

Route not updating state from navigation params

3 Answers3