Header back button missing when navigating from root to a nested stack where root-stack has `headerShown` set to false

Description

Hi @WoLewicki, I have following issue.

Following scenario (pseudo):

   RootStack (headerShown: false)
       BottomTabsNavigator
       StackNavigator1 (headerShown: true, since I want to maintain the own stack)
       StackNavigator2 (headerShown: true, since I want to maintain the own stack)
       StackNavigator3 (headerShown: true, since I want to maintain the own stack)

These stacks are placed inside root stack but not in BottomTabs, since we want them to be placed above the BottomTabs

No issues so far. The real issue is that since we’ve disabled headerShown for RootStack, because our child stacks need to maintain there own header, the back button is missing when I navigate to StackNavigator1, 2 or 3.

I made some tests (canGoBack() and goBack/pop). All methods work, canGoBack returns true. The navigator is actually aware that it CAN go back, but you’re disabling the back button at this place. I also talked with @satya164 and tested the JSStack and it is handled correctly there, where the back button won’t be removed.

Currently, I am forced to use headerLeft and insert my own back button. While basically no big deal, the real issue is that headerLeft position is not the exact same position as the native back button (native back button is like 8px from left, while headerLeft starts at around 20px) and that when you try to achieve the same look across the app, you would need to to apply a left: -12. The problem with that is again, that the back button gets cut-off while animating the header between navigation. Thats an issue for itself but this also describes why I don’t want to add headerLeft manually.

The issue does not appear when we enable the header in RootStack, but that is not what we want. We want that each child-nest-stack to handle its own header and logic.

Screenshots

Steps To Reproduce

1. I already described everything
2. There is a snack available

Expected behavior

Native back button should appear, should be handled like in the JS-Stack.

Actual behavior

Back button is hidden, even though canGoBack returns true

Reproduction

https://snack.expo.dev/@hirbod/native-stack-header-issues---back-button-missing

I made this snack interactive. Please click through it and take notes on the text. While reproducible in web as well, please also test on iOS and Android, there are extra issues.

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.68.2
@react-navigation/native	6
@react-navigation/native-stack	6
react-native-screens	3.13
react-native-safe-area-context	4.2.4
react-native-gesture-handler	2.4.2
react-native-reanimated	2.8.0
expo	45

[satya164]

The stack is aware that it can return, even gestures do work

The gesture likely works because the screen the stack is nested in is aware that it can go back with a gesture and it handles the gesture, but the nested stack itself isn’t aware.

[WoLewicki]

I will try to look into it as fast as possible, hopefully all Fabric issues in the repo are gone soon 😅 It was great to meet one of the main contributors to the library too!