Fix repeated firing of scroll into view on large threads (#1108)
This commit is contained in:
parent
5d2d0976ba
commit
f63ed57e3b
1 changed files with 28 additions and 3 deletions
|
@ -63,6 +63,7 @@ export const PostThread = observer(function PostThread({
|
||||||
}) {
|
}) {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const ref = useRef<FlatList>(null)
|
const ref = useRef<FlatList>(null)
|
||||||
|
const hasScrolledIntoView = useRef<boolean>(false)
|
||||||
const [isRefreshing, setIsRefreshing] = React.useState(false)
|
const [isRefreshing, setIsRefreshing] = React.useState(false)
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const navigation = useNavigation<NavigationProp>()
|
||||||
const posts = React.useMemo(() => {
|
const posts = React.useMemo(() => {
|
||||||
|
@ -102,14 +103,36 @@ export const PostThread = observer(function PostThread({
|
||||||
}, [view, setIsRefreshing])
|
}, [view, setIsRefreshing])
|
||||||
|
|
||||||
const onContentSizeChange = React.useCallback(() => {
|
const onContentSizeChange = React.useCallback(() => {
|
||||||
|
// only run once
|
||||||
|
if (hasScrolledIntoView.current) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// wait for loading to finish
|
||||||
|
if (
|
||||||
|
!view.hasContent ||
|
||||||
|
(view.isFromCache && view.isLoadingFromCache) ||
|
||||||
|
view.isLoading
|
||||||
|
) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const index = posts.findIndex(post => post._isHighlightedPost)
|
const index = posts.findIndex(post => post._isHighlightedPost)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
ref.current?.scrollToIndex({
|
ref.current?.scrollToIndex({
|
||||||
index,
|
index,
|
||||||
animated: false,
|
animated: false,
|
||||||
|
viewPosition: 0,
|
||||||
})
|
})
|
||||||
|
hasScrolledIntoView.current = true
|
||||||
}
|
}
|
||||||
}, [posts, ref])
|
}, [
|
||||||
|
posts,
|
||||||
|
view.hasContent,
|
||||||
|
view.isFromCache,
|
||||||
|
view.isLoadingFromCache,
|
||||||
|
view.isLoading,
|
||||||
|
])
|
||||||
const onScrollToIndexFailed = React.useCallback(
|
const onScrollToIndexFailed = React.useCallback(
|
||||||
(info: {
|
(info: {
|
||||||
index: number
|
index: number
|
||||||
|
@ -279,7 +302,9 @@ export const PostThread = observer(function PostThread({
|
||||||
data={posts}
|
data={posts}
|
||||||
initialNumToRender={posts.length}
|
initialNumToRender={posts.length}
|
||||||
maintainVisibleContentPosition={
|
maintainVisibleContentPosition={
|
||||||
view.isFromCache ? MAINTAIN_VISIBLE_CONTENT_POSITION : undefined
|
isIOS && view.isFromCache
|
||||||
|
? MAINTAIN_VISIBLE_CONTENT_POSITION
|
||||||
|
: undefined
|
||||||
}
|
}
|
||||||
keyExtractor={item => item._reactKey}
|
keyExtractor={item => item._reactKey}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
@ -292,7 +317,7 @@ export const PostThread = observer(function PostThread({
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
onContentSizeChange={
|
onContentSizeChange={
|
||||||
!isIOS || !view.isFromCache ? onContentSizeChange : undefined
|
isIOS && view.isFromCache ? undefined : onContentSizeChange
|
||||||
}
|
}
|
||||||
onScrollToIndexFailed={onScrollToIndexFailed}
|
onScrollToIndexFailed={onScrollToIndexFailed}
|
||||||
style={s.hContentRegion}
|
style={s.hContentRegion}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue