Compatible with screens in different stacks?

[jfbn]

I am looking to implement shared element transitions in our application.

I want to navigate from a screen in one stack, to a screen in another stack. The stacks are each in their own tab screen, like so:

Tab Navigator

• Tab 1
• • Stack 1
• • • Screen 1
• Tab 2
• • Stack 2
• • • Screen 2

I want to navigate from Screen 1 to Screen 2 using a shared element. Is this possible? I cannot find any mention of this use case or any other issues which could address the navigation between different stacks.

What are my options?

[eikhunter]

+1

[fmtjava]

+1

[jfbn]

I guess the answer is no for the time being. What a shame :(

[thisisgit]

Hi @jfbn, I'm not sure if you have already found the solution to that but here's the workaround (and a comment pointing to that solution)

Basically you need to have shared element stack as the parent of tab navigator, and the stacks in each tab screen should be shared element stack as well:

• Shared Element Stack Navigator
  • Tab Navigator
  • Shared Element Stack Navigator
    • Screen 1 (with shared element)
  • Shared Element Stack Navigator
    • Screen 2 (with shared element)
  • Some other navigator

For those who are looking for ListScreen<>DetailScreen interaction, you may want to check this issue for reference.

[jfbn]

Hi @thisisgit, Thank you so much for tagging me in your comment. This sounds really great. I'm going to try and implement this during the week and will report back with an update.

[IjzerenHein]

So, in short, I think what you're saying here is that you want to transitions to happen when switching tabs (correct me if I'm wrong). And inside the tabs there are stack navigators. Switching (bottom/top) tabs usually does not cause an animation to run in react-navigation, so I'm not sure how you expect shared elements to run in that case.

[Pietro-Putelli]

Hi @jfbn, I'm not sure if you have already found the solution to that but here's the workaround (and a comment pointing to that solution)

Basically you need to have shared element stack as the parent of tab navigator, and the stacks in each tab screen should be shared element stack as well:

• Shared Element Stack Navigator

  • Tab Navigator

  • Shared Element Stack Navigator

    • Screen 1 (with shared element)

  • Shared Element Stack Navigator

    • Screen 2 (with shared element)

  • Some other navigator

For those who are looking for ListScreen<>DetailScreen interaction, you may want to check this issue for reference.

In react navigation v.6 this solve the issue. Thank you.