Fix scroll on profile lists/feeds (#2168)
parent
b82c5177b9
commit
8929ff526f
|
@ -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'
|
||||||
|
|
|
@ -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,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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()
|
||||||
|
|
Loading…
Reference in New Issue