React Native: render to the same screen with diferent params

Viewed 67

What I want is to render the same screen with different params, if I use push action from react-navigation, this replaces all screens with the same params data on the other hand If I use replace I lost the navigation history. user flow:

  • product details screen(this screen receive product ID)
  • got to the similar products and tab on a product, this open a product details screen again with the new ID info
  • Each screen must keep the information rendered with specific id

stack:

- product-detail-screen(ID)
  |_ tab on similar product
    |_ product-detail-screen(ID)
       |_ tab on similar product
         |_ product-detail-screen(ID)
1 Answers

You have to pass parameters to from the screen your in to screen your navigating to , in your case the parameter is id

when navigating send params like below

onPress={()=>navigation.navigate('ProductDetailsScreen',{id:id})}

receive params in next screen

const { id }=route.params;

use this id with your request

for more info read this doc about passing params in react navigation

https://reactnavigation.org/docs/params/

Related