Elements with position: absolute disappear during screen transition

[RBrNx]

Current behavior

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.

This issue does not seem to present itself when using @react-navigation/stack.

Expected behavior

All elements on the screen should stay in their current position while the navigation animation is playing.

Reproduction

https://snack.expo.dev/eaGSwDnMMu9vYdg9taYAx

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	^6.1.0
@react-navigation/native-stack	^6.9.12
react-native-safe-area-context	4.6.3
react-native-screens	~3.22.0
react-native	0.72.6
expo	^49.0.16
node	18.17.1
npm	9.6.7

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.0, latest: 6.1.16)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[RBrNx]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.0, latest: 6.1.16)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Can confirm the issue still exists on 6.1.16

[github-actions]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.