Elements with position: absolute disappear during screen transition

[RBrNx]

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)

normalheader_yut8OkV2.mp4

Absolute Header (position: absolute; top: 0)

absoluteheader_KdD3kyd0.mp4

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

1. Create a simple stack navigator with @react-navigation/native-stack
2. Create a screen with at least one component that has position: absolute styling applied
3. Navigate from home screen to screen created in previous step
4. 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

[purrseus]

I am also facing this issue on Android.