From d7ef2bf4ce77d1405c46d51fd2f375802c0768c4 Mon Sep 17 00:00:00 2001
From: Joshua Kaplan <yhkaplan@gmail.com>
Date: Sun, 12 Feb 2023 19:17:02 +0100
Subject: [PATCH] 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},
          ]}
        />
      ),
```
---
 packages/native-stack/src/views/HeaderConfig.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
index 9df30fec09..1d93ca9fee 100644
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -279,6 +279,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 1,
+    elevation: 1,
   },
   background: {
     overflow: 'hidden',