diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index aa110682a2..7a02fa38cb 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/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, - useSharedValue, + AnimatedRef, 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( function PageWithHeaderImpl( @@ -51,6 +53,7 @@ export const PagerWithHeader = React.forwardRef( initialPage, onPageSelected, onCurrentPageSelected, + allowHeaderOverscroll, }: PagerWithHeaderProps, ref, ) { @@ -90,6 +93,7 @@ export const PagerWithHeader = React.forwardRef( onSelect={props.onSelect} scrollY={scrollY} testID={testID} + allowHeaderOverscroll={allowHeaderOverscroll} /> ) }, @@ -104,6 +108,7 @@ export const PagerWithHeader = React.forwardRef( 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, + ), }, ], })) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index fb67d35c5c..f9ca1fdfcc 100644 --- a/src/view/com/posts/Feed.tsx +++ b/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, }} diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index d30a9d805b..8f4c2c55be 100644 --- a/src/view/com/util/List.tsx +++ b/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 = Omit< @@ -30,6 +31,7 @@ function ListImpl( onRefresh, headerOffset, style, + progressViewOffset, ...props }: ListProps, ref: React.Ref, @@ -70,7 +72,7 @@ function ListImpl( onRefresh={onRefresh} tintColor={pal.colors.text} titleColor={pal.colors.text} - progressViewOffset={headerOffset} + progressViewOffset={progressViewOffset ?? headerOffset} /> ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 6073b95716..403fdf4b34 100644 --- a/src/view/screens/Profile.tsx +++ b/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}) => (