Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: make headerBackground visible with transparent header (#11109)
**Motivation** Currently, using a transparent header on native-stack shows the headerBackground with iOS, but **not** with Android, resulting in a completely transparent background and headerBackground not visible. It might not be clear when this is useful, but opacity interpolation based on scroll position is one use-case where this is needed. ### Without fix (Android) https://user-images.githubusercontent.com/25879490/208209362-04d4aef9-53d8-4e2e-9187-4000bd7153b8.mov ### With fix (Android) https://user-images.githubusercontent.com/25879490/208209359-5eed0cfc-71e6-4d94-96b8-4ae344ed620f.mov ### iOS https://user-images.githubusercontent.com/25879490/208209361-9db44bf8-b68d-4afb-83e5-8f67449e4fe2.mov ### Example code ```ts useLayoutEffect(() => { const transparencyInterpolation = scrollOffset.interpolate({ inputRange: [NAVIGATION_START_FADE_Y, NAVIGATION_FINISH_FADE_Y], outputRange: [0, 1], }); navigation.setOptions({ headerTransparent: true, headerBackground: () => ( // <- Isn't visibly rendered on Android without this fix; Is visible on iOS <Animated.View style={[ headerStyle, {opacity: transparencyInterpolation}, ]} /> ), ```
- Loading branch information