diff options
Diffstat (limited to 'src/screens/Profile/Header/GrowableBanner.tsx')
-rw-r--r-- | src/screens/Profile/Header/GrowableBanner.tsx | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/src/screens/Profile/Header/GrowableBanner.tsx b/src/screens/Profile/Header/GrowableBanner.tsx index 7f5a3cd6e..3d2830439 100644 --- a/src/screens/Profile/Header/GrowableBanner.tsx +++ b/src/screens/Profile/Header/GrowableBanner.tsx @@ -10,6 +10,7 @@ import Animated, { useAnimatedReaction, useAnimatedStyle, } from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import {BlurView} from 'expo-blur' import {useIsFetching} from '@tanstack/react-query' @@ -32,7 +33,7 @@ export function GrowableBanner({ }) { const pagerContext = usePagerHeaderContext() - // pagerContext should only be present on iOS, but better safe than sorry + // plain non-growable mode for Android/Web if (!pagerContext || !isIOS) { return ( <View style={[a.w_full, a.h_full]}> @@ -60,6 +61,7 @@ function GrowableBannerInner({ backButton?: React.ReactNode children: React.ReactNode }) { + const {top: topInset} = useSafeAreaInsets() const isFetching = useIsProfileFetching() const animateSpinner = useShouldAnimateSpinner({isFetching, scrollY}) @@ -104,7 +106,7 @@ function GrowableBannerInner({ const animatedBackButtonStyle = useAnimatedStyle(() => ({ transform: [ { - translateY: interpolate(scrollY.get(), [-150, 60], [-150, 60], { + translateY: interpolate(scrollY.get(), [-150, 10], [-150, 10], { extrapolateRight: Extrapolation.CLAMP, }), }, @@ -128,7 +130,14 @@ function GrowableBannerInner({ animatedProps={animatedBlurViewProps} /> </Animated.View> - <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}> + <View + style={[ + a.absolute, + a.inset_0, + {top: topInset - (isIOS ? 15 : 0)}, + a.justify_center, + a.align_center, + ]}> <Animated.View style={[animatedSpinnerStyle]}> <ActivityIndicator key={animateSpinner ? 'spin' : 'stop'} |