diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 7f3ea28df7..edc8b28b63 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -8,6 +8,7 @@ import Animated, { useSharedValue, withTiming, runOnJS, + useAnimatedRef, } from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {TabBar} from './TabBar' @@ -20,6 +21,7 @@ interface PagerWithHeaderChildParams { headerHeight: number onScroll: OnScrollCb isScrolledDown: boolean + scrollElRef: any /* TODO */ } export interface PagerWithHeaderProps { @@ -204,6 +206,7 @@ export const PagerWithHeader = React.forwardRef( function PagerItem( {headerHeight, isScrolledDown, onScroll, renderTab}: any /* TODO */, ) { + const scrollElRef = useAnimatedRef() if (renderTab == null) { return null } @@ -211,6 +214,7 @@ function PagerItem( headerHeight, isScrolledDown, onScroll, + scrollElRef, }) } diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 9c3c6d7ae2..be23526bea 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,5 +1,5 @@ import React, {useMemo, useCallback} from 'react' -import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native' +import {StyleSheet, View, ActivityIndicator} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {useNavigation} from '@react-navigation/native' import {usePalette} from 'lib/hooks/usePalette' @@ -342,13 +342,14 @@ export const ProfileFeedScreenInner = observer( isHeaderReady={feedInfo?.hasLoaded ?? false} renderHeader={renderHeader} onCurrentPageSelected={onCurrentPageSelected}> - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( )} {({onScroll, headerHeight}) => ( @@ -359,6 +360,7 @@ export const ProfileFeedScreenInner = observer( headerHeight={headerHeight} onToggleLiked={onToggleLiked} onScroll={onScroll} + scrollElRef={scrollElRef} /> )} @@ -386,14 +388,14 @@ interface FeedSectionProps { onScroll: OnScrollCb headerHeight: number isScrolledDown: boolean + scrollElRef: any /* TODO */ } const FeedSection = React.forwardRef( function FeedSectionImpl( - {feed, onScroll, headerHeight, isScrolledDown}, + {feed, onScroll, headerHeight, isScrolledDown, scrollElRef}, ref, ) { const hasNew = feed.hasNewLatest && !feed.isRefreshing - const scrollElRef = React.useRef(null) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({offset: -headerHeight}) @@ -437,6 +439,7 @@ const AboutSection = observer(function AboutPageImpl({ headerHeight, onToggleLiked, onScroll, + scrollElRef, }: { feedOwnerDid: string feedRkey: string @@ -444,6 +447,7 @@ const AboutSection = observer(function AboutPageImpl({ headerHeight: number onToggleLiked: () => void onScroll: OnScrollCb + scrollElRef: any /* TODO */ }) { const pal = usePalette('default') const {_} = useLingui() @@ -454,6 +458,7 @@ const AboutSection = observer(function AboutPageImpl({ return ( diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index e473d73382..4674890124 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -1,11 +1,5 @@ import React, {useCallback, useMemo} from 'react' -import { - ActivityIndicator, - FlatList, - Pressable, - StyleSheet, - View, -} from 'react-native' +import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {useNavigation} from '@react-navigation/native' @@ -175,18 +169,20 @@ export const ProfileListScreenInner = observer( isHeaderReady={list.hasLoaded} renderHeader={renderHeader} onCurrentPageSelected={onCurrentPageSelected}> - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( )} - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( ( function FeedSectionImpl( - {feed, onScroll, headerHeight, isScrolledDown}, + {feed, scrollElRef, onScroll, headerHeight, isScrolledDown}, ref, ) { const hasNew = feed.hasNewLatest && !feed.isRefreshing - const scrollElRef = React.useRef(null) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({offset: -headerHeight}) @@ -611,6 +607,7 @@ interface AboutSectionProps { onScroll: OnScrollCb headerHeight: number isScrolledDown: boolean + scrollElRef: any /* TODO */ } const AboutSection = React.forwardRef( function AboutSectionImpl( @@ -624,13 +621,13 @@ const AboutSection = React.forwardRef( onScroll, headerHeight, isScrolledDown, + scrollElRef, }, ref, ) { const pal = usePalette('default') const {_} = useLingui() const {isMobile} = useWebMediaQueries() - const scrollElRef = React.useRef(null) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({offset: -headerHeight})