'React navigation props doesn't seem to refresh when returning back up the stack
The issue I'm having with react-navigation is down to the props that are being passed through to the child element doesn't change if I go back.
https://github.com/CMarshall92/PostMate-Rest-App
For example, if I click on one of the elements within the ScrollView it will navigate to the component CollectionOverview with the correct id needed to fetch information based on that collection. If I was to navigate back to the home view and click on a different element within the scroll view it will again navigate to the CollectionOverview component but the id from the first navigation transition will be present within that which is incorrect.
Am I doing something wrong? I've had no success searching the web so far.
HomeScreen:
<ScrollView style={styles.containerList}>
{
...
onPress={() => {
navigation.navigate('CollectionOverView', {
collectionId: l.id
})
...
}
</ScrollView>
CollectionOverView:
this.state = {
...
collectionId: navigation.getParam('collectionId', ''),
...
}
Nav to the first collection then be able to return and nav to the second item with the correct nav props being passed to the component.
Solution 1:[1]
I've found that React navigation can't automatically differentiate between routes in the stack navigator. For instance, if you use the code above but:
navigation.navigate({
routeName: `CollectionOverView${i}`,
params: { collectionId: l.id }
})
Then in the stackNavigator add two routes ie.
CollectionOverView0: {
screen: CollectionOverView
},
CollectionOverView1: {
screen: CollectionOverView
},
This seems to allow you to diff the data between routes. Apparently adding a unique key to this will allow only one route in the stack nav.
navigation.navigate({
key: uuidv4(),
routeName: `CollectionOverView${i}`,
params: { collectionId: l.id }
})
CollectionOverView: {
screen: CollectionOverView
},
but for some reason this isn't working for me, and I am not sure what I'm doing wrong.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | halfer |
