Header jump when animation is set for bottom tab navigator

[matinzd]

Description

Moving this issue from react-navigation/react-navigation#12273.

I can't repro this on JS stack, and the headerTopInsetEnabled prop for screens is always set to true. So it seems to be an issue with react-native-screens.

The header will have an initial jump when animation is set for tab navigator. It doesn't matter if it's set to fade or shift.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-18.at.14.15.22.mp4

Expected behavior

The header should not flicker or have jumps.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-18.at.14.15.10.mp4

Steps to reproduce

Set bottom tab animation to fade or shift.

Snack or a link to a repository

https://github.com/matinzd/ReactNavigationHeaderFlicker

Screens version

4.1.0

React Native version

0.76.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[lucasmrl]

@matinzd After almost 4 hours on this bug, this hack fixed the issue for me: #1779 (comment)

This doesn't fix the issue.

[matinzd]

That is the same issue but it's not caused by the same thing. Now the new tab animation is causing this issue which is not the same as that one.

The workaround may work but it's not a correct solution. I also usually use scroll view with automatic inset adjustment so that I don't need to take care of the header height.

[lucasmrl]

I agree with you. And that hack actually doesn't fix the issue.

[hirbod]

Alright, I could pretty much narrow it down. It is indeed related to the new animation I guess, and in my case it was triggered because we enabled fullScreenGestureEnabled, which under the hood switches to simple_push.

It's now also reproducible in the Expo Snack using stock react navigation v7. https://snack.expo.dev/@hirbod/native-stack-navigator-header-to-non-header

I suspect this PR caused it: https://github.com/software-mansion/react-native-screens/pull/2477
@kkafar

ScreenRecording_12-05-2024.03-40-32_1.MP4

EDIT: 100% isolated reproducible with react-native-screens alone.
Here is the issue for it: #2550