IjzerenHein / IjzerenHein/react-navigation-shared-element

Navigating back to Details screen from Details screen doesn't animate

Open
#220 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

Hi there, Love this library!

When you have a details screen that you navigate to and from, the library doesn't know how to animate "backwards" to a previous details screen one at a time. This means the animation correctly runs when you navigate forward to a new details screen, but once you go backwards, every single previous details screen in the stack with the same name animates at the same time, and after that there are no more animations going backwards because they all animated on the first "backwards" navigation.

I found the root causes, fixed them, and made a pull request.

There are 2 reasons:
1. This line uses `route.name` to determine whether to animate a scene, but should use `route.key`: https://github.com/IjzerenHein/react-navigation-shared-element/blob/9fc6720a6c1a6f0b06dbf82321143a881a33f814/src/createSharedElementScene.tsx#L59 Note that `route.key` is used elsewhere:https://github.com/IjzerenHein/react-navigation-shared-element/blob/9fc6720a6c1a6f0b06dbf82321143a881a33f814/src/SharedElementRendererData.ts#L275 When `route.name` is used, if you navigate to a "Details" screen, all existing, rendered "Details" screens on the stack believe they are the active route and will transition, even though you only want the one with the matching key to transition. This is a bug.
2. Line 319 and 322 hardcodes "true" and "false" values to be send to the screen's `sharedElement` function as the `showing` variable.https://github.com/IjzerenHein/react-navigation-shared-element/blob/9fc6720a6c1a6f0b06dbf82321143a881a33f814/src/SharedElementRendererData.ts#L315-L324 However, when screens are the same name, `true` is always sent regardless of whether the screen is showing or not. What should really be sent is the `closing` value from the event: https://github.com/IjzerenHein/react-navigation-shared-element/blob/9fc6720a6c1a6f0b06dbf82321143a881a33f814/src/createSharedElementScene.tsx#L112 This is stored under `isTransitionClosing` https://github.com/IjzerenHein/react-navigation-shared-element/blob/9fc6720a6c1a6f0b06dbf82321143a881a33f814/src/SharedElementRendererData.ts#L110 And that's the variable that should be sent to `sharedElements` as showing.

I've created an example that shows navigation working backwards and forwards to screens of the same name.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in src/createSharedElementScene.tsx and src/SharedElementRendererData.ts, focusing on the referenced route matching, transition-closing state, and sharedElements handling. Review the linked example showing forward and backward navigation between same-named screens. Done means backward navigation animates only the matching details screen one at a time and continues working on subsequent transitions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.