Bug: Navigation to the same route glitches

I’ve been able to get the transitions working by navigating between different pages. For example navigating from home to an article detail page.

Now I have the following use case: There are some related articles on the article detail page and when the user clicks on one of these articles it should navigate to the same route again (articleDetail -> articleDetail) but with different parameters (different article item).

To get this to work I set a unique key for this page:

this.props.navigation.navigate({
    routeName: 'ArticleDetail',
    params: {
        item,
    },
    key: `article-detail-${item.id}`,
});

When doing this the transitions don’t start and both pages overlap each other for a small amount of time.

I think the scene.key should be integrated somewhere to avoid fromRoute and toRoute to be the same while they are not when it comes to the transition.

Thanks!

Update: Here is a expo snack that shows the issue: https://snack.expo.io/HkkzasfU7

[chrfalch]

Hi @bsnelder (and @ZiedBeta). After investigating and reproducing this issue I’ll try to explain what happens and what causes your issue.

What happens when doing this transition is that both screen1 and screen2 register their shared transition elements as the from and to routes in the current transition. When you try to transition further, the same transition element in screen2 should now be the from (instead of to) route from screen2 -> screen3 - this won’t work and I haven’t found an easy solution for this yet.

I’ll put this on the list as a feature request and will continue to investigate. Also feel free to fork the repo and see if you can find a solution and submit a PR.

[chrfalch]

I can see the problem now, thanks for the repro. Will take a look and see if I can find a solution for this. Thanks for the repro!