dealing with headerTransparent on expo-router

[wcastand]

i'm wondering what should be the approach to handle header transparent on expo-router
since it makes p-safe not safe anymore because he doesn't take into account the headerHeight.

Which lead to having to do that on every screen:

const headerHeight = useHeaderHeight()

...
<View className="grow px-6 pb-safe-offset-4 gap-4" style={{ paddingTop: headerHeight }} />

could be a normal ScrollView or just a KeyboardAwareScrollView.
any recommendation other than just make a component Layout
would it be possible to include an utils like p-safe that take the react-navigation header into account? since it's such a popular lib with expo, i feel like it could make sense to have an util class to handle that case, especially since most guide now use header transparent with ios 26 glass stuff.

[jpudysz]

AFAIK, the navigation header is not a native component unless it’s created with createNativeStackNavigator.
Also, keep in mind that there is no header in the web environment, and we’re trying to support things cross-platform.
Last but not least, if you use a different navigation library, it again won’t be queryable unless you have a native component.

Implementing it would be challenging.

[Brentlok]

Like I've already mentioned multiple times - you can create your own utilities and inject anything there using Uniwind.updateCSSVariables API. We don't plan on adding any new dependency

@utility my-custom-utility {
    padding-top: var(--my-magic-injected-variable);
}

Uniwind.updateCSSVariables({
    '--my-magic-injected-variable': headerHeight
})