Animating Header During Navigation Causes Screen Breaks/Jumps

Current behavior

Hi,

I'm trying to create a header navigation with a height minimization animation during page transitions.

Everything works well, but I noticed an issue: during the transition to the next screen, the container height of the new screen doesn’t adjust along with the header height change. This causes noticeable jumps on the screen.

In other words, native screen layout measurements during the transition are frozen, which causes jumps in the end.

I tried with @react-navigation/stack but still the same result.

To make it easier to observe, I set the background color to red in the navigator theme.

Please check the attached video for reference.

https://github.com/user-attachments/assets/e763ee34-ab4d-440a-9351-9652d8760818

Expected behavior

The screen container height should be increased according to the header height decrease.
In other word screen should be in sync with header height modification.

I dropped a Snack link, so that you can check the structure that I have for the screen.

Reproduction

https://snack.expo.dev/@beqram0/blessed-yellow-turkish-delight

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

I tried to update react-navigation. reanimated, gesture-handler but still the same result.

Begin with the linked Snack and reproduce the behavior on Android and iOS using the listed native-stack and bottom-tabs packages. Trace how the animated header height affects the native screen container during navigation; done means the screen expands as the header shrinks without visible jumps.