Fix scroll on profile lists/feeds (#2168)

zio/stable
dan 2023-12-11 21:24:31 +00:00 committed by GitHub
parent b82c5177b9
commit 8929ff526f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 54 additions and 53 deletions

View File

@ -12,4 +12,4 @@
// - https://github.com/software-mansion/react-native-reanimated/issues/5364 // - https://github.com/software-mansion/react-native-reanimated/issues/5364
// //
// It's great when it works though. // It's great when it works though.
export {useAnimatedScrollHandler} from 'react-native-reanimated' export {useAnimatedScrollHandler as useAnimatedScrollHandler_FIXED} from 'react-native-reanimated'

View File

@ -1,10 +1,8 @@
import {useRef, useEffect} from 'react' import {useRef, useEffect} from 'react'
import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated' import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated'
export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = ( export const useAnimatedScrollHandler_FIXED: typeof useAnimatedScrollHandler_BUGGY =
config, (config, deps) => {
deps,
) => {
const ref = useRef(config) const ref = useRef(config)
useEffect(() => { useEffect(() => {
ref.current = config ref.current = config
@ -22,7 +20,10 @@ export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
} }
}, },
onMomentumBegin(e, ctx) { onMomentumBegin(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) { if (
typeof ref.current !== 'function' &&
ref.current.onMomentumBegin
) {
ref.current.onMomentumBegin(e, ctx) ref.current.onMomentumBegin(e, ctx)
} }
}, },
@ -41,4 +42,4 @@ export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
}, },
deps, deps,
) )
} }

View File

@ -19,7 +19,7 @@ import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
import {logger} from '#/logger' import {logger} from '#/logger'
import {Trans} from '@lingui/macro' import {Trans} from '@lingui/macro'
import {cleanError} from '#/lib/strings/errors' import {cleanError} from '#/lib/strings/errors'
import {useAnimatedScrollHandler} from 'react-native-reanimated' import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {useTheme} from '#/lib/ThemeContext' import {useTheme} from '#/lib/ThemeContext'
import {usePreferencesQuery} from '#/state/queries/preferences' import {usePreferencesQuery} from '#/state/queries/preferences'
import {hydrateFeedGenerator} from '#/state/queries/feed' import {hydrateFeedGenerator} from '#/state/queries/feed'
@ -184,7 +184,7 @@ export const ProfileFeedgens = React.forwardRef<
[error, refetch, onPressRetryLoadMore, pal, preferences], [error, refetch, onPressRetryLoadMore, pal, preferences],
) )
const scrollHandler = useAnimatedScrollHandler(onScroll || {}) const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
return ( return (
<View testID={testID} style={style}> <View testID={testID} style={style}>
<FlatList <FlatList

View File

@ -14,10 +14,10 @@ import Animated, {
interpolate, interpolate,
runOnJS, runOnJS,
useAnimatedRef, useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {Gesture, GestureDetector} from 'react-native-gesture-handler' import {Gesture, GestureDetector} from 'react-native-gesture-handler'
import useImageDimensions from '../../hooks/useImageDimensions' import useImageDimensions from '../../hooks/useImageDimensions'
@ -61,7 +61,7 @@ const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => {
} }
}) })
const scrollHandler = useAnimatedScrollHandler({ const scrollHandler = useAnimatedScrollHandler_FIXED({
onScroll(e) { onScroll(e) {
const nextIsScaled = e.zoomScale > 1 const nextIsScaled = e.zoomScale > 1
translationY.value = nextIsScaled ? 0 : e.contentOffset.y translationY.value = nextIsScaled ? 0 : e.contentOffset.y

View File

@ -20,7 +20,7 @@ import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
import {logger} from '#/logger' import {logger} from '#/logger'
import {Trans} from '@lingui/macro' import {Trans} from '@lingui/macro'
import {cleanError} from '#/lib/strings/errors' import {cleanError} from '#/lib/strings/errors'
import {useAnimatedScrollHandler} from 'react-native-reanimated' import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {useTheme} from '#/lib/ThemeContext' import {useTheme} from '#/lib/ThemeContext'
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {isNative} from '#/platform/detection' import {isNative} from '#/platform/detection'
@ -187,7 +187,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
[error, refetch, onPressRetryLoadMore, pal], [error, refetch, onPressRetryLoadMore, pal],
) )
const scrollHandler = useAnimatedScrollHandler(onScroll || {}) const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
return ( return (
<View testID={testID} style={style}> <View testID={testID} style={style}>
<FlatList <FlatList

View File

@ -7,7 +7,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
import {EmptyState} from '../util/EmptyState' import {EmptyState} from '../util/EmptyState'
import {OnScrollHandler} from 'lib/hooks/useOnMainScroll' import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
@ -135,7 +135,7 @@ export function Feed({
[isFetchingNextPage], [isFetchingNextPage],
) )
const scrollHandler = useAnimatedScrollHandler(onScroll || {}) const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
return ( return (
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
{error && ( {error && (

View File

@ -18,7 +18,7 @@ import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
import {OnScrollHandler} from 'lib/hooks/useOnMainScroll' import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
import {logger} from '#/logger' import {logger} from '#/logger'
import { import {
@ -271,7 +271,7 @@ let Feed = ({
) )
}, [isFetchingNextPage, shouldRenderEndOfFeed, renderEndOfFeed, headerOffset]) }, [isFetchingNextPage, shouldRenderEndOfFeed, renderEndOfFeed, headerOffset])
const scrollHandler = useAnimatedScrollHandler(onScroll || {}) const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
return ( return (
<View testID={testID} style={style}> <View testID={testID} style={style}>
<FlatList <FlatList

View File

@ -46,7 +46,7 @@ import {logger} from '#/logger'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import { import {
useFeedSourceInfoQuery, useFeedSourceInfoQuery,
FeedSourceFeedInfo, FeedSourceFeedInfo,
@ -572,7 +572,7 @@ function AboutSection({
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const scrollHandler = useAnimatedScrollHandler(onScroll) const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll)
const [likeUri, setLikeUri] = React.useState(feedInfo.likeUri) const [likeUri, setLikeUri] = React.useState(feedInfo.likeUri)
const {hasSession} = useSession() const {hasSession} = useSession()
const {track} = useAnalytics() const {track} = useAnalytics()