add allowHeaderOverscroll prop

src/view/com/pager/PagerWithHeader.tsx

@@ -1,26 +1,27 @@
 import * as React from 'react'
 import {
   LayoutChangeEvent,
+  NativeScrollEvent,
   ScrollView,
   StyleSheet,
   View,
-  NativeScrollEvent,
 } from 'react-native'
 import Animated, {
-  useAnimatedStyle,
+  AnimatedRef,
-  useSharedValue,
   runOnJS,
   runOnUI,
   scrollTo,
-  useAnimatedRef,
-  AnimatedRef,
   SharedValue,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+
-import {TabBar} from './TabBar'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {ListMethods} from '../util/List'
 import {ScrollProvider} from '#/lib/ScrollContext'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {ListMethods} from '../util/List'
+import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
@@ -39,6 +40,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(
@@ -51,6 +53,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       initialPage,
       onPageSelected,
       onCurrentPageSelected,
+      allowHeaderOverscroll,
     }: PagerWithHeaderProps,
     ref,
   ) {
@@ -90,6 +93,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
             onSelect={props.onSelect}
             scrollY={scrollY}
             testID={testID}
+            allowHeaderOverscroll={allowHeaderOverscroll}
           />
         )
       },
@@ -104,6 +108,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         onHeaderOnlyLayout,
         scrollY,
         testID,
+        allowHeaderOverscroll,
       ],
     )
 
@@ -213,6 +218,7 @@ let PagerTabBar = ({
   onTabBarLayout,
   onCurrentPageSelected,
   onSelect,
+  allowHeaderOverscroll,
 }: {
   currentPage: number
   headerOnlyHeight: number
@@ -225,11 +231,15 @@ 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),
+        translateY: Math.min(
+          Math.min(scrollY.value, headerOnlyHeight) * -1,
+          allowHeaderOverscroll ? Infinity : 0,
+        ),
       },
     ],
   }))

src/view/com/posts/Feed.tsx

@@ -63,6 +63,7 @@ let Feed = ({
   desktopFixedHeightOffset,
   ListHeaderComponent,
   extraData,
+  progressViewOffset,
 }: {
   feed: FeedDescriptor
   feedParams?: FeedParams
@@ -81,6 +82,7 @@ let Feed = ({
   desktopFixedHeightOffset?: number
   ListHeaderComponent?: () => JSX.Element
   extraData?: any
+  progressViewOffset?: number
 }): React.ReactNode => {
   const theme = useTheme()
   const {track} = useAnalytics()
@@ -338,6 +340,7 @@ let Feed = ({
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}
+        progressViewOffset={progressViewOffset}
         contentContainerStyle={{
           minHeight: Dimensions.get('window').height * 1.5,
         }}

src/view/com/util/List.tsx

@@ -1,11 +1,12 @@
 import React, {memo} from 'react'
 import {FlatListProps, RefreshControl} from 'react-native'
-import {FlatList_INTERNAL} from './Views'
-import {addStyle} from 'lib/styles'
-import {useScrollHandlers} from '#/lib/ScrollContext'
 import {runOnJS, useSharedValue} from 'react-native-reanimated'
+
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useScrollHandlers} from '#/lib/ScrollContext'
+import {addStyle} from 'lib/styles'
+import {FlatList_INTERNAL} from './Views'
 
 export type ListMethods = FlatList_INTERNAL
 export type ListProps<ItemT> = Omit<
@@ -30,6 +31,7 @@ function ListImpl<ItemT>(
     onRefresh,
     headerOffset,
     style,
+    progressViewOffset,
     ...props
   }: ListProps<ItemT>,
   ref: React.Ref<ListMethods>,
@@ -70,7 +72,7 @@ function ListImpl<ItemT>(
         onRefresh={onRefresh}
         tintColor={pal.colors.text}
         titleColor={pal.colors.text}
-        progressViewOffset={headerOffset}
+        progressViewOffset={progressViewOffset ?? headerOffset}
       />
     )
   }

src/view/screens/Profile.tsx

@@ -347,7 +347,8 @@ function ProfileScreenLoaded({
         items={sectionTitles}
         onPageSelected={onPageSelected}
         onCurrentPageSelected={onCurrentPageSelected}
-        renderHeader={renderHeader}>
+        renderHeader={renderHeader}
+        allowHeaderOverscroll>
         {showFiltersTab
           ? ({headerHeight, scrollElRef}) => (
               <ProfileLabelsSection