From 370d219bbe09e3c0ba80f555118729a90ce12918 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 9 Nov 2023 23:32:08 +0000 Subject: [PATCH 1/2] Revert "Pull animated scroll handler down from pager" This reverts commit ecebb78e40148b9160f832d26ada1d366551b645. --- src/view/com/pager/PagerWithHeader.tsx | 25 ++++++++----------------- src/view/screens/ProfileFeed.tsx | 20 ++++++-------------- src/view/screens/ProfileList.tsx | 13 +++++-------- 3 files changed, 19 insertions(+), 39 deletions(-) diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 701b52871d..842a4574ed 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -1,13 +1,9 @@ import * as React from 'react' -import { - LayoutChangeEvent, - NativeScrollEvent, - StyleSheet, - View, -} from 'react-native' +import {LayoutChangeEvent, StyleSheet, View} from 'react-native' import Animated, { Easing, useAnimatedReaction, + useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming, @@ -16,12 +12,13 @@ import Animated, { import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {TabBar} from './TabBar' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {OnScrollCb} from 'lib/hooks/useOnMainScroll' const SCROLLED_DOWN_LIMIT = 200 interface PagerWithHeaderChildParams { headerHeight: number - onScroll: (e: NativeScrollEvent) => void + onScroll: OnScrollCb isScrolledDown: boolean } @@ -143,18 +140,12 @@ export const PagerWithHeader = React.forwardRef( ], ) - // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that - // due to https://github.com/software-mansion/react-native-reanimated/issues/5345. - // So instead we pass down a worklet, and individual pages will have to call it. - const onScroll = React.useCallback( - (e: NativeScrollEvent) => { - 'worklet' + // props to pass into children render functions + const onScroll = useAnimatedScrollHandler({ + onScroll(e) { scrollY.value = e.contentOffset.y }, - [scrollY], - ) - - // props to pass into children render functions + }) const childProps = React.useMemo(() => { return { headerHeight, diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 8a8851c97a..9c3c6d7ae2 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,14 +1,7 @@ import React, {useMemo, useCallback} from 'react' -import { - FlatList, - NativeScrollEvent, - StyleSheet, - View, - ActivityIndicator, -} from 'react-native' +import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {useNavigation} from '@react-navigation/native' -import {useAnimatedScrollHandler} from 'react-native-reanimated' import {usePalette} from 'lib/hooks/usePalette' import {HeartIcon, HeartIconSolid} from 'lib/icons' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' @@ -33,6 +26,7 @@ import {EmptyState} from 'view/com/util/EmptyState' import * as Toast from 'view/com/util/Toast' import {useSetTitle} from 'lib/hooks/useSetTitle' import {useCustomFeed} from 'lib/hooks/useCustomFeed' +import {OnScrollCb} from 'lib/hooks/useOnMainScroll' import {shareUrl} from 'lib/sharing' import {toShareUrl} from 'lib/strings/url-helpers' import {Haptics} from 'lib/haptics' @@ -389,7 +383,7 @@ export const ProfileFeedScreenInner = observer( interface FeedSectionProps { feed: PostsFeedModel - onScroll: (e: NativeScrollEvent) => void + onScroll: OnScrollCb headerHeight: number isScrolledDown: boolean } @@ -414,13 +408,12 @@ const FeedSection = React.forwardRef( return }, []) - const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( void - onScroll: (e: NativeScrollEvent) => void + onScroll: OnScrollCb }) { const pal = usePalette('default') const {_} = useLingui() - const scrollHandler = useAnimatedScrollHandler({onScroll}) if (!feedInfo) { return @@ -464,7 +456,7 @@ const AboutSection = observer(function AboutPageImpl({ + onScroll={onScroll}> void + onScroll: OnScrollCb headerHeight: number isScrolledDown: boolean } @@ -579,14 +578,13 @@ const FeedSection = React.forwardRef( return }, []) - const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( void - onScroll: (e: NativeScrollEvent) => void + onScroll: OnScrollCb headerHeight: number isScrolledDown: boolean } @@ -741,7 +739,6 @@ const AboutSection = React.forwardRef( ) }, []) - const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( ( renderEmptyState={renderEmptyState} list={list} headerOffset={headerHeight} - onScroll={scrollHandler} + onScroll={onScroll} scrollEventThrottle={1} /> {isScrolledDown && ( From b8c3cd478f2df3eee85bb217f677044febb22d82 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 9 Nov 2023 23:35:32 +0000 Subject: [PATCH 2/2] Only handle onScroll for current page --- src/view/com/pager/PagerWithHeader.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 842a4574ed..86139fb633 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -146,13 +146,6 @@ export const PagerWithHeader = React.forwardRef( scrollY.value = e.contentOffset.y }, }) - const childProps = React.useMemo(() => { - return { - headerHeight, - onScroll, - isScrolledDown, - } - }, [headerHeight, onScroll, isScrolledDown]) const onPageSelectedInner = React.useCallback( (index: number) => { @@ -196,7 +189,11 @@ export const PagerWithHeader = React.forwardRef( headerOnlyHeight > 0 && tabBarHeight > 0 ) { - output = child(childProps) + output = child({ + headerHeight, + isScrolledDown, + onScroll: i === currentPage ? onScroll : noop, + }) } // Pager children must be noncollapsible plain s. return ( @@ -228,6 +225,8 @@ const styles = StyleSheet.create({ }, }) +function noop() {} + function toArray(v: T | T[]): T[] { if (Array.isArray(v)) { return v