containedModal presentation with transparent header has useHeaderHeight value of 0 on iOS

[jstheoriginal]

Current behavior

Recent changes to native-stack and how the transparent headers work has caused one scenario to have issues still (the other scenarios were recently fixed):

On iOS, a modal screen presented as a 'containedModal' presentation type that has a transparent header has a header height of 0 returned from useHeaderHeight. On Android, it's returning the correct height.

The correct height height was being returned in native-stack version 6.2.5. Then in 6.3.0 it became 0.
The issue was corrected for all but this one scenario in 6.4.1. The issue still happens in 6.4.1/6.5.0 (latest) for this specific presentation mode.

6.2.5 iOS ✅:

6.5.0 iOS ❌:

6.5.0 Android ✅:

Snack provided shows the issue.

Expected behavior

A non-zero header height should be returned for iOS when a transparent header is presented as containedModal.

Reproduction

https://snack.expo.dev/@jstheoriginal/containedmodal-transparent-header-height-0

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• I've removed the packages that I don't use

package	version
react-native-screens	~3.8.0
@react-navigation/native	6.0.8
@react-navigation/elements	1.3.1
@react-navigation/native-stack	6.5.0
react-native-safe-area-context	3.3.2
expo	43.0.0

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[jstheoriginal]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

All good. not used.

[klandell]

I'm having this issue too, though I am seeing the problem for presentation modal, fullScreenModal, and containedModal . I use the useHeaderHeight hook in a relatively low-level component of my app, so this bug is affecting any screens that use one of these presentation modes. It might affect the transparent modals too, but I don't use them in my app, so I'm not sure. They all work in 6.2.5.

[henrik-d]

I'm having a similar issue.

"@react-navigation/elements": "^1.3.3",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1"

When showing a Screen inside a native StackNavigator using presentation: 'modal', useHeaderHeight() returns 0:

<Stack.Screen
    name={'Address'}
    options={{
      presentation: 'modal',
    }}
    component={AddressScreen} // useHeaderHeight returns 0 in AddressScreen
  />

Whats interesting, when calling useHeaderHeight()from a nested StackNavigator that is presented as a modal, it returns the correct value:

<Stack.Screen
    options={{ presentation: 'modal', headerShown: false }}
    name={'Auth'}
    component={AuthNavigator} // useHeaderHeight in screens of AuthNavigator return correct value
  />

[gomo]

This issue is still there in 6.6.2.

As @klandell said, when I downgrade my @react-navigation/native-stack to 6.2.5, I get a non-zero value. I get 0 in 6.3.0 and later versions.

[saikojosh]

Is there any workaround for this? I've resorted to hardcoding a value if the useHeaderHeight() hook returns 0.