software-mansion / software-mansion/react-native-screens
Elements with `position: absolute` disappear during screen transition
@maciekstosio is already working on this.
Since Jun 4, 2024.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
Originally posted this issue in the react-navigation repo, but was asked to post it here as well.
I'm currently building an app and I've noticed that when using a Native Stack, along with elements that have position: absolute; top: 0 styling applied, the elements vanish off screen as soon as a backwards transition starts.
I've created a snack which reproduces the issue here, although its a little hard to see at full speed. So I've also created some slowed down videos to showcase the issue
Normal Header (no absolute position)
Absolute Header (position: absolute; top: 0)
In my example I've chosen to use the Header from @react-navigation/elements as this directly replicates what I was trying to do in my own app, however it can be replaced with any regular absolutely position view. I should also note that its not too jarring in my example due to the lack of other elements on the page; but in a real world scenario with content underneath the header, its quite noticeable.
Steps to reproduce
- Create a simple stack navigator with
@react-navigation/native-stack - Create a screen with at least one component that has
position: absolutestyling applied - Navigate from home screen to screen created in previous step
- Press the back button / navigate to the previous screen
Snack or a link to a repository
https://snack.expo.dev/eaGSwDnMMu9vYdg9taYAx
Screens version
3.22.0
React Native version
0.72.6
Platforms
Android
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
Real device
Device model
Samsung Galaxy S23 Ultra (Android 14) & Samsung Galaxy S10+ (Android 12)
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.
Assessment
This issue has not been assessed yet.