Support headerBackground prop

[elan]

When using regular stack navigator, it's possible to pass a headerBackground prop. We use this to create a blurred header effect by making the header transparent, and then tying a background component to scroll position and animating to good effect.

However, this prop isn't available when using createNativeStackNavigator, even though you can make the header transparent. It's possible to fake it by doing some ugly absolute positioning of a header background component, but obviously it would be much nicer if you could use it directly with the native navigator, and nicest of all would be supporting it via the navigation.setOptions(...) call so any screen can imperatively configure it.

Thanks for a great library!

[andreialecu]

The lack of headerBackground support is the only thing stopping us from adopting the native stack navigator as well. We use a gradient for the header and it seems there's no easy way to replicate it using the native stack.

Indeed we're considering using some absolute positioning with a transparent header.

Is this something that cannot be supported due to platform limitations?

[WoLewicki]

There is blurEffect prop on iOS: https://github.com/software-mansion/react-native-screens/blob/6c87d7749ec62fbb51fb4ec50af1fa8733ebae86/native-stack/README.md#headerstyle, which should work well with translucent header. As for other options of modifying it, we are open for PRs and suggestions. It would be best to give examples of such behaviors from libraries using native headers, like react-native-navigation, since we can replicate them easier then. There will for sure be limitations compared to pure JS implementations of the header since we are bound to options available on the platform when using native ones.

[andreialecu]

I don't use react-native-navigation, but their documentation seems to explicitly mention this: https://wix.github.io/react-native-navigation/api/options-background#component

[elan]

The issue with blurEffect is it only works on Android, and we are looking for a cross-platform solution.

We were able to work around by absolutely positioning an element under the header (which we made transparent), so I assume it would be fairly straightforward to do this "behind the scenes" without needing support at the native layer. Among other things, it would increase compatibility with the regular stack navigator in react navigation.

[WoLewicki]

Based on https://github.com/react-navigation/react-navigation/blob/main/packages/native-stack/src/views/HeaderConfig.tsx#L150, it looks like v6 native-stack added the option to have a headerBackground. Can you check if it is what you need?

[elan]

Yes, it certainly seems like it, thanks so much!