diff options
| author | dan <dan.abramov@gmail.com> | 2023-11-10 19:54:33 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-11-10 19:54:33 +0000 |
| commit | 91f8a23fbca5585490bb0f2064cdec8dd4b47cc9 (patch) | |
| tree | bd369627641ecef8733ae877a93b048fabe59b09 /src/view/screens/ProfileList.tsx | |
| parent | 65def371659c3b64481199b2585a40a1affd9ec2 (diff) | |
| download | voidsky-91f8a23fbca5585490bb0f2064cdec8dd4b47cc9.tar.zst | |
Scroll sync in the pager without jumps (#1863)
Diffstat (limited to 'src/view/screens/ProfileList.tsx')
| -rw-r--r-- | src/view/screens/ProfileList.tsx | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 497c1ae76..9180d21d5 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -175,18 +175,24 @@ export const ProfileListScreenInner = observer( isHeaderReady={list.hasLoaded} renderHeader={renderHeader} onCurrentPageSelected={onCurrentPageSelected}> - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( <FeedSection ref={feedSectionRef} + scrollElRef={ + scrollElRef as React.MutableRefObject<FlatList<any> | null> + } feed={feed} onScroll={onScroll} headerHeight={headerHeight} isScrolledDown={isScrolledDown} /> )} - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( <AboutSection ref={aboutSectionRef} + scrollElRef={ + scrollElRef as React.MutableRefObject<FlatList<any> | null> + } list={list} descriptionRT={list.descriptionRT} creator={list.data ? list.data.creator : undefined} @@ -223,9 +229,12 @@ export const ProfileListScreenInner = observer( items={SECTION_TITLES_MOD} isHeaderReady={list.hasLoaded} renderHeader={renderHeader}> - {({onScroll, headerHeight, isScrolledDown}) => ( + {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( <AboutSection list={list} + scrollElRef={ + scrollElRef as React.MutableRefObject<FlatList<any> | null> + } descriptionRT={list.descriptionRT} creator={list.data ? list.data.creator : undefined} isCurateList={list.isCuratelist} @@ -557,14 +566,14 @@ interface FeedSectionProps { onScroll: OnScrollHandler headerHeight: number isScrolledDown: boolean + scrollElRef: React.MutableRefObject<FlatList<any> | null> } const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>( function FeedSectionImpl( - {feed, onScroll, headerHeight, isScrolledDown}, + {feed, scrollElRef, onScroll, headerHeight, isScrolledDown}, ref, ) { const hasNew = feed.hasNewLatest && !feed.isRefreshing - const scrollElRef = React.useRef<FlatList>(null) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({offset: -headerHeight}) @@ -611,6 +620,7 @@ interface AboutSectionProps { onScroll: OnScrollHandler headerHeight: number isScrolledDown: boolean + scrollElRef: React.MutableRefObject<FlatList<any> | null> } const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( function AboutSectionImpl( @@ -624,13 +634,13 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( onScroll, headerHeight, isScrolledDown, + scrollElRef, }, ref, ) { const pal = usePalette('default') const {_} = useLingui() const {isMobile} = useWebMediaQueries() - const scrollElRef = React.useRef<FlatList>(null) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({offset: -headerHeight}) |