[Layout] Bleed profile banner into safe area (#6967)

* bleed profile banner into safe area

(cherry picked from commit 50b3a4d0c6fd94b583ffe4efa65de35c81ae7f4e)

* pointer events none when hidden

(cherry picked from commit bae2c7b2dd6d7f858a98812196628308c0877755)

* fix web

(cherry picked from commit e3f9597170375f2903b6e567b963f008ec95aed1)

* add status bar shadow

* rm log

* rm mini header

* speed up animation

* pass bool rather than int in light status bar

1 files changed, 56 insertions, 0 deletions

diff --git a/src/screens/Profile/Header/StatusBarShadow.tsx b/src/screens/Profile/Header/StatusBarShadow.tsx
new file mode 100644
index 000000000..587b41051
--- /dev/null
+++ b/src/screens/Profile/Header/StatusBarShadow.tsx
@@ -0,0 +1,56 @@
+import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {LinearGradient} from 'expo-linear-gradient'
+
+import {isIOS} from '#/platform/detection'
+import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
+import {atoms as a} from '#/alf'
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+
+export function StatusBarShadow() {
+  const {top: topInset} = useSafeAreaInsets()
+  const pagerContext = usePagerHeaderContext()
+
+  if (isIOS && pagerContext) {
+    const {scrollY} = pagerContext
+    return <StatusBarShadowInnner scrollY={scrollY} />
+  }
+
+  return (
+    <LinearGradient
+      colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
+      style={[
+        a.absolute,
+        a.z_10,
+        {height: topInset, top: 0, left: 0, right: 0},
+      ]}
+    />
+  )
+}
+
+function StatusBarShadowInnner({scrollY}: {scrollY: SharedValue<number>}) {
+  const {top: topInset} = useSafeAreaInsets()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: Math.min(0, scrollY.get()),
+        },
+      ],
+    }
+  })
+
+  return (
+    <AnimatedLinearGradient
+      colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
+      style={[
+        animatedStyle,
+        a.absolute,
+        a.z_10,
+        {height: topInset, top: 0, left: 0, right: 0},
+      ]}
+    />
+  )
+}