Allow profile header to overscroll (#5457)

* add allowoverscroll prop

* ensure spinner is visible

* more generic prop for `<List>`

* rename to allowHeaderOverScroll

src/view/com/pager/PagerWithHeader.tsx

@@ -19,8 +19,8 @@ import Animated, {
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {ScrollProvider} from '#/lib/ScrollContext'
-import {isIOS} from 'platform/detection'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {isIOS} from '#/platform/detection'
+import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
 import {ListMethods} from '../util/List'
 import {TabBar} from './TabBar'
 
@@ -41,6 +41,7 @@ export interface PagerWithHeaderProps {
   initialPage?: number
   onPageSelected?: (index: number) => void
   onCurrentPageSelected?: (index: number) => void
+  allowHeaderOverScroll?: boolean
 }
 export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
   function PageWithHeaderImpl(
@@ -53,6 +54,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       initialPage,
       onPageSelected,
       onCurrentPageSelected,
+      allowHeaderOverScroll,
     }: PagerWithHeaderProps,
     ref,
   ) {
@@ -92,6 +94,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
             onSelect={props.onSelect}
             scrollY={scrollY}
             testID={testID}
+            allowHeaderOverScroll={allowHeaderOverScroll}
           />
         )
       },
@@ -106,6 +109,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         onHeaderOnlyLayout,
         scrollY,
         testID,
+        allowHeaderOverScroll,
       ],
     )
 
@@ -216,6 +220,7 @@ let PagerTabBar = ({
   onTabBarLayout,
   onCurrentPageSelected,
   onSelect,
+  allowHeaderOverScroll,
 }: {
   currentPage: number
   headerOnlyHeight: number
@@ -228,14 +233,20 @@ let PagerTabBar = ({
   onTabBarLayout: (e: LayoutChangeEvent) => void
   onCurrentPageSelected?: (index: number) => void
   onSelect?: (index: number) => void
+  allowHeaderOverScroll?: boolean
 }): React.ReactNode => {
-  const headerTransform = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateY: Math.min(Math.min(scrollY.value, headerOnlyHeight) * -1, 0),
-      },
-    ],
-  }))
+  const headerTransform = useAnimatedStyle(() => {
+    const translateY = Math.min(scrollY.value, headerOnlyHeight) * -1
+    return {
+      transform: [
+        {
+          translateY: allowHeaderOverScroll
+            ? translateY
+            : Math.min(translateY, 0),
+        },
+      ],
+    }
+  })
   const headerRef = React.useRef(null)
   return (
     <Animated.View

src/view/com/pager/PagerWithHeader.web.tsx

@@ -4,7 +4,7 @@ import {useAnimatedRef} from 'react-native-reanimated'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
 import {ListMethods} from '../util/List'
 import {TabBar} from './TabBar'