Animating Header During Navigation Causes Screen Breaks/Jumps

[beqramo]

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.

Untitledasdfasdf.mov

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

package	version
@react-navigation/native	6.1.17
@react-navigation/bottom-tabs	6.5.20
@react-navigation/native-stack	~6.9.26
react-native-screens	3.29
react-native-gesture-handler	2.12.1
react-native-reanimated	3.6.0
react-native	0. 71.18

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

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

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

• @react-navigation/native (found: 6.1.17, latest: 7.0.3)
• @react-navigation/bottom-tabs (found: 6.5.20, latest: 7.0.6)

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

[beqramo]

I think the root cause is the same for this issue too: #12273