software-mansion / software-mansion/react-native-reanimated
[V3][iOS] Shared element transition repositioning with formSheet/modal presentation screens that have header
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 11k
- Forks
- 1.5k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 172
Description
Description
When using a shared element transition, there is some content repositioning in screens that have their presentation type set to formSheet or modal, and there is a header. With formSheet, the transitioned element goes to the top before "popping" back down into its correct place. With modal, it actually is a bit lower than the header and "pops" up, it's less noticeable on elements that are travelling in an upward motion, but it's there.
Here is a video of the issue with formSheet:
Here is a video of the issue with modal:
As a control, here is a video of the exact same but with the header set to false:
There's not really an exact equivalent on Android, but here's a video of the exact same code on Android (presentation: modal):
Steps to reproduce
- Add a shared transition to a screen that has it's presentation prop set to
formSheetormodal
Snack or a link to a repository
https://github.com/gorbypark/reanimated-with-formSheet
Reanimated version
3.0.0
React Native version
0.71.3
Platforms
iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and compare the iOS shared element transition behavior for screens using formSheet or modal presentation with a header. Investigate the transition's positioning during presentation; done means the element no longer jumps before settling into its correct position, while preserving the header-disabled behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100