CODEWITHSUNDEEP
javascriptreactjsreact-native
Youssef
Youssef

Reputation: 645

Route not updating state from navigation params

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

Upvotes: 5

Views: 4590

Answers (3)

Aliaksei Litsvin
Aliaksei Litsvin

Reputation: 1261

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

Taken from react navigation docs

Upvotes: 3

prisar
prisar

Reputation: 3195

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]);

Upvotes: 0

rashi jain
rashi jain

Reputation: 484

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

Upvotes: 4

Related Questions