Description
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.