about summary refs log tree commit diff
path: root/src/screens/Profile/Header/GrowableBanner.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens/Profile/Header/GrowableBanner.tsx')
-rw-r--r--src/screens/Profile/Header/GrowableBanner.tsx15
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'}