Samuel Newman
ffc63dc85f
* 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
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
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},
|
|
]}
|
|
/>
|
|
)
|
|
}
|