Fix List onMomentumScrollEnd (#3759)

zio/stable
dan 2024-04-29 23:38:03 +01:00 committed by GitHub
parent 28fc98d942
commit 42966fb49e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 33 deletions

View File

@ -1,10 +1,12 @@
import React, {useEffect, useRef} from 'react'
import {StyleSheet, useWindowDimensions, View} from 'react-native'
import {runOnJS} from 'react-native-reanimated'
import {AppBskyFeedDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
import {ScrollProvider} from '#/lib/ScrollContext'
import {isAndroid, isNative, isWeb} from '#/platform/detection'
import {
sortThread,
@ -276,8 +278,11 @@ export function PostThread({
setMaxParents(n => n + PARENTS_CHUNK_SIZE)
}
}, [])
const onMomentumScrollEnd = bumpMaxParentsIfNeeded
const onScrollToTop = bumpMaxParentsIfNeeded
const onMomentumEnd = React.useCallback(() => {
'worklet'
runOnJS(bumpMaxParentsIfNeeded)()
}, [bumpMaxParentsIfNeeded])
const onEndReached = React.useCallback(() => {
if (isFetching || posts.length < maxReplies) return
@ -382,38 +387,39 @@ export function PostThread({
}
return (
<List
ref={ref}
data={posts}
renderItem={renderItem}
keyExtractor={keyExtractor}
onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
onStartReached={onStartReached}
onEndReached={onEndReached}
onEndReachedThreshold={2}
onMomentumScrollEnd={onMomentumScrollEnd}
onScrollToTop={onScrollToTop}
maintainVisibleContentPosition={
isNative ? MAINTAIN_VISIBLE_CONTENT_POSITION : undefined
}
// @ts-ignore our .web version only -prf
desktopFixedHeight
removeClippedSubviews={isAndroid ? false : undefined}
ListFooterComponent={
<ListFooter
// Using `isFetching` over `isFetchingNextPage` is done on purpose here so we get the loader on
// initial render
isFetchingNextPage={isFetching}
error={cleanError(threadError)}
onRetry={refetch}
// 300 is based on the minimum height of a post. This is enough extra height for the `maintainVisPos` to
// work without causing weird jumps on web or glitches on native
height={windowHeight - 200}
/>
}
initialNumToRender={initialNumToRender}
windowSize={11}
/>
<ScrollProvider onMomentumEnd={onMomentumEnd}>
<List
ref={ref}
data={posts}
renderItem={renderItem}
keyExtractor={keyExtractor}
onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
onStartReached={onStartReached}
onEndReached={onEndReached}
onEndReachedThreshold={2}
onScrollToTop={onScrollToTop}
maintainVisibleContentPosition={
isNative ? MAINTAIN_VISIBLE_CONTENT_POSITION : undefined
}
// @ts-ignore our .web version only -prf
desktopFixedHeight
removeClippedSubviews={isAndroid ? false : undefined}
ListFooterComponent={
<ListFooter
// Using `isFetching` over `isFetchingNextPage` is done on purpose here so we get the loader on
// initial render
isFetchingNextPage={isFetching}
error={cleanError(threadError)}
onRetry={refetch}
// 300 is based on the minimum height of a post. This is enough extra height for the `maintainVisPos` to
// work without causing weird jumps on web or glitches on native
height={windowHeight - 200}
/>
}
initialNumToRender={initialNumToRender}
windowSize={11}
/>
</ScrollProvider>
)
}

View File

@ -13,7 +13,11 @@ import {FlatList_INTERNAL} from './Views'
export type ListMethods = FlatList_INTERNAL
export type ListProps<ItemT> = Omit<
FlatListProps<ItemT>,
| 'onMomentumScrollBegin' // Use ScrollContext instead.
| 'onMomentumScrollEnd' // Use ScrollContext instead.
| 'onScroll' // Use ScrollContext instead.
| 'onScrollBeginDrag' // Use ScrollContext instead.
| 'onScrollEndDrag' // Use ScrollContext instead.
| 'refreshControl' // Pass refreshing and/or onRefresh instead.
| 'contentOffset' // Pass headerOffset instead.
> & {