diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 842a4574..701b5287 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -1,9 +1,13 @@ import * as React from 'react' -import {LayoutChangeEvent, StyleSheet, View} from 'react-native' +import { + LayoutChangeEvent, + NativeScrollEvent, + StyleSheet, + View, +} from 'react-native' import Animated, { Easing, useAnimatedReaction, - useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming, @@ -12,13 +16,12 @@ 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: OnScrollCb + onScroll: (e: NativeScrollEvent) => void isScrolledDown: boolean } @@ -140,12 +143,18 @@ export const PagerWithHeader = React.forwardRef( ], ) - // props to pass into children render functions - const onScroll = useAnimatedScrollHandler({ - onScroll(e) { + // 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' 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 dcfec116..a4d146d6 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,7 +1,14 @@ import React, {useMemo, useCallback} from 'react' -import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native' +import { + FlatList, + NativeScrollEvent, + 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' @@ -26,7 +33,6 @@ 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' @@ -345,17 +351,14 @@ export const ProfileFeedScreenInner = observer( /> )} {({onScroll, headerHeight}) => ( - - - + /> )} void headerHeight: number isScrolledDown: boolean } @@ -404,12 +407,13 @@ const FeedSection = React.forwardRef( return }, []) + const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( void + onScroll: (e: NativeScrollEvent) => void }) { const pal = usePalette('default') + const scrollHandler = useAnimatedScrollHandler({onScroll}) if (!feedInfo) { return } + return ( - - {feedInfo.descriptionRT ? ( - - ) : ( - - No description - - )} - - - {typeof feedInfo.likeCount === 'number' && ( - + + {feedInfo.descriptionRT ? ( + - )} - - - Created by{' '} - {feedInfo.isOwner ? ( - 'you' ) : ( - + + No description + )} - - + + + {typeof feedInfo.likeCount === 'number' && ( + + )} + + + Created by{' '} + {feedInfo.isOwner ? ( + 'you' + ) : ( + + )} + + + ) }) diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 69259659..594e9fd2 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react' import { ActivityIndicator, FlatList, + NativeScrollEvent, Pressable, StyleSheet, View, @@ -10,6 +11,7 @@ import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {useNavigation} from '@react-navigation/native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useAnimatedScrollHandler} from 'react-native-reanimated' import {observer} from 'mobx-react-lite' import {RichText as RichTextAPI} from '@atproto/api' import {withAuthRequired} from 'view/com/auth/withAuthRequired' @@ -33,7 +35,6 @@ import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' import {useSetTitle} from 'lib/hooks/useSetTitle' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {OnScrollCb} from 'lib/hooks/useOnMainScroll' import {NavigationProp} from 'lib/routes/types' import {toShareUrl} from 'lib/strings/url-helpers' import {shareUrl} from 'lib/sharing' @@ -544,7 +545,7 @@ const Header = observer(function HeaderImpl({ interface FeedSectionProps { feed: PostsFeedModel - onScroll: OnScrollCb + onScroll: (e: NativeScrollEvent) => void headerHeight: number isScrolledDown: boolean } @@ -568,13 +569,14 @@ const FeedSection = React.forwardRef( return }, []) + const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( void - onScroll: OnScrollCb + onScroll: (e: NativeScrollEvent) => void headerHeight: number isScrolledDown: boolean } @@ -723,6 +725,7 @@ const AboutSection = React.forwardRef( ) }, []) + const scrollHandler = useAnimatedScrollHandler({onScroll}) return ( ( renderEmptyState={renderEmptyState} list={list} headerOffset={headerHeight} - onScroll={onScroll} + onScroll={scrollHandler} scrollEventThrottle={1} /> {isScrolledDown && (