react-native-screens
react-native-screens copied to clipboard
Elements with `position: absolute` disappear during screen transition
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)
https://github.com/react-navigation/react-navigation/assets/1332314/335ad0d5-bd83-4fd1-8c55-e90449ecbb60
Absolute Header (position: absolute; top: 0
)
https://github.com/react-navigation/react-navigation/assets/1332314/b6f354a8-487d-4e1c-8929-42acac7b8076
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: absolute
styling 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