octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Try to fix scrollToIndex out of range

This commit is contained in:
Zhiyuan Zheng 2022-01-03 21:25:53 +01:00
parent 271ae63dac
commit 3a4733316a
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/screens/Tabs/Shared/Toot.tsx
View File

@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators' import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { findIndex } from 'lodash' import { findIndex } from 'lodash'
import React, { useCallback, useEffect, useRef } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react'
import { FlatList } from 'react-native' import { FlatList } from 'react-native'
import { InfiniteQueryObserver, useQueryClient } from 'react-query' import { InfiniteQueryObserver, useQueryClient } from 'react-query'
@ -20,6 +20,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
const flRef = useRef<FlatList>(null) const flRef = useRef<FlatList>(null)
const [itemsLength, setItemsLength] = useState(0)
const scrolled = useRef(false) const scrolled = useRef(false)
const navigation = useNavigation() const navigation = useNavigation()
const queryClient = useQueryClient() const queryClient = useQueryClient()
@ -31,6 +32,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
? // @ts-ignore ? // @ts-ignore
result.data.pages.flatMap(d => [...d.body]) result.data.pages.flatMap(d => [...d.body])
: [] : []
setItemsLength(flattenData.length)
// Auto go back when toot page is empty // Auto go back when toot page is empty
if (flattenData.length === 0) { if (flattenData.length === 0) {
navigation.goBack() navigation.goBack()
@ -38,13 +40,13 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
if (!scrolled.current) { if (!scrolled.current) {
scrolled.current = true scrolled.current = true
const pointer = findIndex(flattenData, ['id', toot.id]) const pointer = findIndex(flattenData, ['id', toot.id])
pointer > 0 && pointer < flattenData.length &&
setTimeout(() => { setTimeout(() => {
flRef.current?.scrollToIndex({ flRef.current?.scrollToIndex({
index: pointer, index: pointer,
viewOffset: 100 viewOffset: 100
}) })
}, 1000) }, 500)
} }
} }
}) })
@ -52,15 +54,19 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
}, []) }, [])
// Toot page auto scroll to selected toot // Toot page auto scroll to selected toot
const onScrollToIndexFailed = useCallback(error => { const onScrollToIndexFailed = useCallback(
const offset = error.averageItemLength * error.index error => {
flRef.current?.scrollToOffset({ offset }) const offset = error.averageItemLength * error.index
setTimeout( flRef.current?.scrollToOffset({ offset })
() => setTimeout(
flRef.current?.scrollToIndex({ index: error.index, viewOffset: 100 }), () =>
350 error.index < itemsLength &&
) flRef.current?.scrollToIndex({ index: error.index, viewOffset: 100 }),
}, []) 500
)
},
[itemsLength]
)
const renderItem = useCallback( const renderItem = useCallback(
({ item }) => ( ({ item }) => (