I need to style the outer most view of the header.

Current behavior

Even when setting custom styles on a header they are still wrapped in a view I need access to.

Expected behavior

In a web environment, simply setting the header to transparent and adjusting the padding isn't sufficient because it places the scroll bar behind the header, resulting in an unpolished appearance. A better solution is to style the outermost view with position: sticky; top: 0, which ensures that the header remains fixed while the content scrolls beneath it, keeping the scroll bar visible and on top (similar to Twitter's sticky 'Post' header).

In the attached screenshot, you can see that applying custom styles to the outer view achieves the desired effect. Additionally, it shows my attempt to style the inner header using Tailwind CSS classes within a custom component via the header prop - however, this doesn't work as intended. As far as I know, there's no documented way to directly access or style the outer view in this scenario.

Reproduction

https://snack.expo.dev/MhSky72WPBtM0_V48FVET

Platform

[ ] Android
[ ] iOS
[X] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[ ] @react-navigation/drawer
[ ] @react-navigation/material-top-tabs
[X] @react-navigation/stack
[ ] @react-navigation/native-stack
[ ] react-native-tab-view

Environment

[] I've removed the packages that I don't use

package	version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn

react-navigation / react-navigation