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
//
// 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,44 +1,45 @@
import {useRef, useEffect} from 'react'
import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated'
export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
config,
deps,
) => {
const ref = useRef(config)
useEffect(() => {
ref.current = config
})
return useAnimatedScrollHandler_BUGGY(
{
onBeginDrag(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
ref.current.onBeginDrag(e, ctx)
}
export const useAnimatedScrollHandler_FIXED: typeof useAnimatedScrollHandler_BUGGY =
(config, deps) => {
const ref = useRef(config)
useEffect(() => {
ref.current = config
})
return useAnimatedScrollHandler_BUGGY(
{
onBeginDrag(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
ref.current.onBeginDrag(e, ctx)
}
},
onEndDrag(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
ref.current.onEndDrag(e, ctx)
}
},
onMomentumBegin(e, ctx) {
if (
typeof ref.current !== 'function' &&
ref.current.onMomentumBegin
) {
ref.current.onMomentumBegin(e, ctx)
}
},
onMomentumEnd(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
ref.current.onMomentumEnd(e, ctx)
}
},
onScroll(e, ctx) {
if (typeof ref.current === 'function') {
ref.current(e, ctx)
} else if (ref.current.onScroll) {
ref.current.onScroll(e, ctx)
}
},
},
onEndDrag(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
ref.current.onEndDrag(e, ctx)
}
},
onMomentumBegin(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) {
ref.current.onMomentumBegin(e, ctx)
}
},
onMomentumEnd(e, ctx) {
if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
ref.current.onMomentumEnd(e, ctx)
}
},
onScroll(e, ctx) {
if (typeof ref.current === 'function') {
ref.current(e, ctx)
} else if (ref.current.onScroll) {
ref.current.onScroll(e, ctx)
}
},
},
deps,
)
}
deps,
)
}

View File

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

View File

@ -14,10 +14,10 @@ import Animated, {
interpolate,
runOnJS,
useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
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) {
const nextIsScaled = e.zoomScale > 1
translationY.value = nextIsScaled ? 0 : e.contentOffset.y

View File

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

View File

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

View File

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

View File

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