IjzerenHein / IjzerenHein/react-navigation-shared-element
Navigating back to Details screen from Details screen doesn't animate
- 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