[Bug]: `@react-navigation/stack` header draws over an open sheet on iOS

[kilarsky]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I render a BottomSheetModal next to NavigationContainer and open it at
snapPoints={['90%']}, so it reaches the top of the screen. The
@react-navigation/stack header keeps drawing on top of the sheet. Everything else on
the screen goes under it.

The header in the reproduction is semi-transparent and borderless, so you can see the
sheet's list items through it. The sheet reaches that area and gets painted underneath,
instead of stopping short of the header.

Android renders the same build correctly, with the sheet above the header.

Reproduction steps

https://github.com/kilarsky/GorhomStackHeaderReanimated3

The sheet is a sibling of the navigator rather than a child of a screen, so it spans
the window and its top edge passes the header:

<BottomSheetModalProvider>
  <NavigationContainer>
    <Stack.Navigator>…</Stack.Navigator>
  </NavigationContainer>

  <BottomSheetModal ref={sheetRef} snapPoints={['90%']}>
    <BottomSheetFlatList data={DATA} … />
  </BottomSheetModal>
</BottomSheetModalProvider>

The content is a BottomSheetFlatList of 30 items. No extra props, no wrapper.

1. Launch the app.
2. Tap Open sheet.
3. Look at the top edge of the sheet where it meets the navigation header.

Expected

The sheet covers the header the same way it covers the rest of the screen.

Actual

The header draws over the sheet, with the sheet's list visible through the
semi-transparent header.

Workaround

Setting containerStyle={{ zIndex: 1 }} on the BottomSheetModal puts the sheet above
the header.

Reproduction sample

https://snack.expo.dev/@kilarsky/ios-stack-header-draws-over-an-open-gorhom-bottomsheet

Relevant log output

[likeSo]

Changing the headerMode of the navigator to screen should solve your problem. Don't ask me why, I spent a long time on this issue last time 😂
See https://reactnavigation.org/docs/8.x/stack-navigator/#headermode