react-navigation: have the same state as a previou

Question

Say I have Screen 1 and Screen 2. I navigate from Screen 1 to Screen 2 by pushing. So Screen 1 is still there, and its state is unchanged. But, I want to be able to navigate to a third screen, Screen 3, that has EXACTLY the same state as Screen 1 (a copy), but acts like a push.

Pushing from Screen 1 to Screen 2 gives me a card transition, but I basically want to push from Screen 2 to Screen 3 (another card transition), but have Screen 3 to have the same state as Screen 1, like scrolling is the same, data is the same, etc.

EDIT: Unfortunately, I cannot upload any gifs for clarification because many of them are too large. An example would be from the Reddit app: moving from the tabular view to viewing a post (where the tab view disappears), but then when you click on the subreddit's name, it takes you (with a push animation) to another tab view, but it's the same one.

EDIT 2: Here is a link of a screen recording of what I want.

1. So the first screen shows me scrolling down to a certain area. (tabular view) - Screen 1

2. Then there's a card navigation to a "View Post Screen", where you can see comments, etc. (no tabs) - Screen 2

3. Then I clicked on r/aww, which navigates with a card transition to the subreddit page. (tabular view) - Screen 3

4. The tab for Screen 3 is scrolled to the same place as I scrolled in Screen 1. This is what I meant by "same state".

Pushing another route of the same name doesn't work, because everything is set back to default, and would be bad for user experience. Going back wouldn't work because it would show a card "go back" transition from Screen 2 to Screen 3 - a card "push" transition is more natural.

Answer 1

In react-navigation you can navigate to unlimited - in theory - of same screen. If you wish to change the contents of the screen you can use navigation parameters. You can think instagram app for example.

User(me) -> Followers -> User(Alice) -> Followers -> User(Bob) -> Followers -> User(John)

const Navigator = createStackNavigator({
  Followers: { screen: Followers },
  User: { screen: Profile },
});

/...
this.props.navigation.navigate('User', { user: 'me' });
this.props.navigation.navigate('Followers', { user: 'me' });
this.props.navigation.navigate('User', { user: 'Alice' });
this.props.navigation.navigate('Followers', { user: 'Alice' });
this.props.navigation.navigate('User', { user: 'Bob' });
this.props.navigation.navigate('Followers', { user: 'Bob' });
this.props.navigation.navigate('User', { user: 'John' });

Answer 2

My understanding of your use case scenario is that you want to preserve the styling and structure of a component across different screens. I have two takeaways here:

• If the two screens (Screen1 and Screen3) are exactly the same, then why would you want a duplicate in the first place? Why not show the Screen1 again to keep your stack size small? In your example: User is on Screen1 which is subreddit's homepage. Then they click on a post link which takes them to Screen2. Again, when user clicks on the link to subreddit's homepage, they are not opening a new screen, they are simply going back to the original Screen1.

• If there are slight differences between the two screens, your could simply employ component re-use. Like, if there are two subreddits r/android and r/reactnative, you'll have a single component for both of them: <SubRedditComponent> but their data and styling would be different.