React-native-screens: Header Height jumps with nested navigators

[dotconnor]

When you have a nested navigators like this: NativeStack -> BottomTabs -> NativeStack, it creates issues when rendering the header from the innermost NativeStack. Only appears to happen when there some other navigator anywhere between two NativeStack ones. For example Stack -> BottomTabs -> NativeStack works correctly and NativeStack -> NativeStack work correctly.

This seems to be the same bug as #540.

https://github.com/dotconnor/ScreensHeader

Expected

Actual

[WoLewicki]

Looks like it is the same issue as https://github.com/software-mansion/react-native-screens/issues/564. Am I right?

[dotconnor]

Just tested this, and the issue still happens regardless of the View inside the screen, secondly it also happens regardless if the translucent header option is set or not.

[WoLewicki]

There seem to be some layout issues when having a UIViewController (from ScreenContainer of bottom-tabs) between 2 UINavigationControllers (from ScreenStack of native-stack). As a workaround, you can make the top navigator a normal stack (since you don't use any of the native-stack specific options, right?).

[ArekChr]

There seem to be some layout issues when having a UIViewController (from ScreenContainer of bottom-tabs) between 2 UINavigationControllers (from ScreenStack of native-stack). As a workaround, you can make the top navigator a normal stack (since you don't use any of the native-stack specific options, right?).

I'm using large and blurred headers from native-stack

[WoLewicki]

@ArekChr It is not a solution to the bug, but a workaround, and I know it cannot be applied in many cases.