React-Navigation go to same route with different params

Gerharddc picture Gerharddc · Nov 1, 2017 · Viewed 10.8k times · Source

I am using a React-Navigation screen with the name "User" to show info about a particular user. When navigating to this route I pass the param "id" which tells the screen what user it is dealing with. When viewing a user it is possible to click something that will let you view another user.

At the moment this works and the new param makes the other user's details show up. The problem is that it does not navigate to a new screen for the other user and instead just changes the current screen. The problem is that when you navigate back it does not take you to the screen for the initial user but whatever was before it. You also get no visual cue that you navigated.

I would thus like to know how I can force it to navigate to another version of the same route.

If it makes any difference, I am working with Redux and navigate by dispatching generated actions like:

Answer

tnemesis picture tnemesis · Jun 25, 2018

You are looking for push instead of navigate. When you use navigate, it look for a route with that name, and if it exists navigate to it. When you use push, you go to a new route, adding a new navigation to the stack.

See the documentation here https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

In your case, you should do:

NavigationActions.push({ routeName: 'User', params: {userId} }) 

or through your props (make sure your props has 'navigation'):

this.props.navigation.push('User', {userId:'paramValue'})