Dynamically add more screens to stackNavigator on react navigation

Question

Hi I am trying to create a stack navigation to navigate users' profile pages on top of each other. For example, user goes to Jake's profile and from that profile taps on the Ellen's profile link and goes to there and from there goes to Tom's profile and so on... Just like instagram profile navigations.

Do you think this is achievable with react navigation and react native?

Answer 1

You can create a route called Profile that renders data based on the navigation props that are passed to it. With this explanation, more likely you would try to do;

this.props.navigation.navigate("Profile", {profileData: ellenProfile})

However, calling navigation.navigate won't work. What you can do is call navigation.push as mentioned in the docs like this:

this.props.navigation.push("Profile", {profileData: ellenProfile})

This will push the Profile tab on top of the stack, even if you are currently at Profile with jakeProfile as data, with ellenProfile, achieving what you are looking for.