Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header Height jumps with nested navigators

See original GitHub issue

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

Kapture 2020-08-30 at 05 47 11

Actual

Kapture 2020-08-30 at 05 49 15

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:31 (16 by maintainers)

Top GitHub Comments

4reactions

burakgormekcommented, Sep 9, 2021

@a-eid You have to patch react-navigation PR which is not merged yet. https://github.com/react-navigation/react-navigation/pull/9772

3reactions

burakgormekcommented, Jul 23, 2021

@WoLewicki Thanks for the PR.

I’ve tested with the PR and it fixes header jump but only for vertical. Horizontal jumps looks still there. simplified test: https://snack.expo.dev/IYo_xZr5a

Not know if this is another issue or not connected this issue though.

Container
    Screen: Content
    Screen: SecondStack // Causing the problem. Works normally without this stack.
            Screen: Bottom Tab
                Screen: ChildStack > Content

With SecondStack:

screen1