forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix scroll on profile lists/feeds (#2168)
+54
-53
+1
-1
src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
+1
-1
src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
···
12
12
// - https://github.com/software-mansion/react-native-reanimated/issues/5364
13
13
//
14
14
// It's great when it works though.
15
-
export {useAnimatedScrollHandler} from 'react-native-reanimated'
15
+
export {useAnimatedScrollHandler as useAnimatedScrollHandler_FIXED} from 'react-native-reanimated'
+41
-40
src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
+41
-40
src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
···
1
1
import {useRef, useEffect} from 'react'
2
2
import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated'
3
3
4
-
export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
5
-
config,
6
-
deps,
7
-
) => {
8
-
const ref = useRef(config)
9
-
useEffect(() => {
10
-
ref.current = config
11
-
})
12
-
return useAnimatedScrollHandler_BUGGY(
13
-
{
14
-
onBeginDrag(e, ctx) {
15
-
if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
16
-
ref.current.onBeginDrag(e, ctx)
17
-
}
4
+
export const useAnimatedScrollHandler_FIXED: typeof useAnimatedScrollHandler_BUGGY =
5
+
(config, deps) => {
6
+
const ref = useRef(config)
7
+
useEffect(() => {
8
+
ref.current = config
9
+
})
10
+
return useAnimatedScrollHandler_BUGGY(
11
+
{
12
+
onBeginDrag(e, ctx) {
13
+
if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
14
+
ref.current.onBeginDrag(e, ctx)
15
+
}
16
+
},
17
+
onEndDrag(e, ctx) {
18
+
if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
19
+
ref.current.onEndDrag(e, ctx)
20
+
}
21
+
},
22
+
onMomentumBegin(e, ctx) {
23
+
if (
24
+
typeof ref.current !== 'function' &&
25
+
ref.current.onMomentumBegin
26
+
) {
27
+
ref.current.onMomentumBegin(e, ctx)
28
+
}
29
+
},
30
+
onMomentumEnd(e, ctx) {
31
+
if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
32
+
ref.current.onMomentumEnd(e, ctx)
33
+
}
34
+
},
35
+
onScroll(e, ctx) {
36
+
if (typeof ref.current === 'function') {
37
+
ref.current(e, ctx)
38
+
} else if (ref.current.onScroll) {
39
+
ref.current.onScroll(e, ctx)
40
+
}
41
+
},
18
42
},
19
-
onEndDrag(e, ctx) {
20
-
if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
21
-
ref.current.onEndDrag(e, ctx)
22
-
}
23
-
},
24
-
onMomentumBegin(e, ctx) {
25
-
if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) {
26
-
ref.current.onMomentumBegin(e, ctx)
27
-
}
28
-
},
29
-
onMomentumEnd(e, ctx) {
30
-
if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
31
-
ref.current.onMomentumEnd(e, ctx)
32
-
}
33
-
},
34
-
onScroll(e, ctx) {
35
-
if (typeof ref.current === 'function') {
36
-
ref.current(e, ctx)
37
-
} else if (ref.current.onScroll) {
38
-
ref.current.onScroll(e, ctx)
39
-
}
40
-
},
41
-
},
42
-
deps,
43
-
)
44
-
}
43
+
deps,
44
+
)
45
+
}
+2
-2
src/view/com/feeds/ProfileFeedgens.tsx
+2
-2
src/view/com/feeds/ProfileFeedgens.tsx
···
19
19
import {logger} from '#/logger'
20
20
import {Trans} from '@lingui/macro'
21
21
import {cleanError} from '#/lib/strings/errors'
22
-
import {useAnimatedScrollHandler} from 'react-native-reanimated'
22
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
23
23
import {useTheme} from '#/lib/ThemeContext'
24
24
import {usePreferencesQuery} from '#/state/queries/preferences'
25
25
import {hydrateFeedGenerator} from '#/state/queries/feed'
···
184
184
[error, refetch, onPressRetryLoadMore, pal, preferences],
185
185
)
186
186
187
-
const scrollHandler = useAnimatedScrollHandler(onScroll || {})
187
+
const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
188
188
return (
189
189
<View testID={testID} style={style}>
190
190
<FlatList
+2
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+2
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
···
14
14
interpolate,
15
15
runOnJS,
16
16
useAnimatedRef,
17
-
useAnimatedScrollHandler,
18
17
useAnimatedStyle,
19
18
useSharedValue,
20
19
} from 'react-native-reanimated'
20
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
21
21
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
22
22
23
23
import useImageDimensions from '../../hooks/useImageDimensions'
···
61
61
}
62
62
})
63
63
64
-
const scrollHandler = useAnimatedScrollHandler({
64
+
const scrollHandler = useAnimatedScrollHandler_FIXED({
65
65
onScroll(e) {
66
66
const nextIsScaled = e.zoomScale > 1
67
67
translationY.value = nextIsScaled ? 0 : e.contentOffset.y
+2
-2
src/view/com/lists/ProfileLists.tsx
+2
-2
src/view/com/lists/ProfileLists.tsx
···
20
20
import {logger} from '#/logger'
21
21
import {Trans} from '@lingui/macro'
22
22
import {cleanError} from '#/lib/strings/errors'
23
-
import {useAnimatedScrollHandler} from 'react-native-reanimated'
23
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
24
24
import {useTheme} from '#/lib/ThemeContext'
25
25
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
26
26
import {isNative} from '#/platform/detection'
···
187
187
[error, refetch, onPressRetryLoadMore, pal],
188
188
)
189
189
190
-
const scrollHandler = useAnimatedScrollHandler(onScroll || {})
190
+
const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
191
191
return (
192
192
<View testID={testID} style={style}>
193
193
<FlatList
+2
-2
src/view/com/notifications/Feed.tsx
+2
-2
src/view/com/notifications/Feed.tsx
···
7
7
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
8
8
import {EmptyState} from '../util/EmptyState'
9
9
import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
10
-
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
10
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
11
11
import {s} from 'lib/styles'
12
12
import {usePalette} from 'lib/hooks/usePalette'
13
13
import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
···
135
135
[isFetchingNextPage],
136
136
)
137
137
138
-
const scrollHandler = useAnimatedScrollHandler(onScroll || {})
138
+
const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
139
139
return (
140
140
<View style={s.hContentRegion}>
141
141
{error && (
+2
-2
src/view/com/posts/Feed.tsx
+2
-2
src/view/com/posts/Feed.tsx
···
18
18
import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
19
19
import {useAnalytics} from 'lib/analytics/analytics'
20
20
import {usePalette} from 'lib/hooks/usePalette'
21
-
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
21
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
22
22
import {useTheme} from 'lib/ThemeContext'
23
23
import {logger} from '#/logger'
24
24
import {
···
271
271
)
272
272
}, [isFetchingNextPage, shouldRenderEndOfFeed, renderEndOfFeed, headerOffset])
273
273
274
-
const scrollHandler = useAnimatedScrollHandler(onScroll || {})
274
+
const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
275
275
return (
276
276
<View testID={testID} style={style}>
277
277
<FlatList
+2
-2
src/view/screens/ProfileFeed.tsx
+2
-2
src/view/screens/ProfileFeed.tsx
···
46
46
import {Trans, msg} from '@lingui/macro'
47
47
import {useLingui} from '@lingui/react'
48
48
import {useModalControls} from '#/state/modals'
49
-
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
49
+
import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
50
50
import {
51
51
useFeedSourceInfoQuery,
52
52
FeedSourceFeedInfo,
···
572
572
}) {
573
573
const pal = usePalette('default')
574
574
const {_} = useLingui()
575
-
const scrollHandler = useAnimatedScrollHandler(onScroll)
575
+
const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll)
576
576
const [likeUri, setLikeUri] = React.useState(feedInfo.likeUri)
577
577
const {hasSession} = useSession()
578
578
const {track} = useAnalytics()