robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import Animated, {
2 type SharedValue,
3 useAnimatedStyle,
4} from 'react-native-reanimated'
5import {useSafeAreaInsets} from 'react-native-safe-area-context'
6import {LinearGradient} from 'expo-linear-gradient'
7
8import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
9import {atoms as a} from '#/alf'
10import {IS_IOS} from '#/env'
11
12const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
13
14export function StatusBarShadow() {
15 const {top: topInset} = useSafeAreaInsets()
16 const pagerContext = usePagerHeaderContext()
17
18 if (IS_IOS && pagerContext) {
19 const {scrollY} = pagerContext
20 return <StatusBarShadowInnner scrollY={scrollY} />
21 }
22
23 return (
24 <LinearGradient
25 colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
26 style={[
27 a.absolute,
28 a.z_10,
29 {height: topInset, top: 0, left: 0, right: 0},
30 ]}
31 />
32 )
33}
34
35function StatusBarShadowInnner({scrollY}: {scrollY: SharedValue<number>}) {
36 const {top: topInset} = useSafeAreaInsets()
37
38 const animatedStyle = useAnimatedStyle(() => {
39 return {
40 transform: [
41 {
42 translateY: Math.min(0, scrollY.get()),
43 },
44 ],
45 }
46 })
47
48 return (
49 <AnimatedLinearGradient
50 colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
51 style={[
52 animatedStyle,
53 a.absolute,
54 a.z_10,
55 {height: topInset, top: 0, left: 0, right: 0},
56 ]}
57 />
58 )
59}