octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Try out FlashList

Browse Source
This commit is contained in:
xmflsct
2023-01-06 01:41:46 +01:00
parent bd3046cc2f
commit 8406a57143
13 changed files with 146 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Timeline/index.tsx
View File

@ -1,5 +1,6 @@
import ComponentSeparator from '@components/Separator'
import { useScrollToTop } from '@react-navigation/native'
import { FlashList, FlashListProps } from '@shopify/flash-list'
import { UseInfiniteQueryOptions } from '@tanstack/react-query'
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
import { flattenPages } from '@utils/queryHooks/utils'
@ -7,16 +8,16 @@ import { useGlobalStorageListener } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { RefObject, useRef } from 'react'
import { FlatList, FlatListProps, Platform, RefreshControl } from 'react-native'
import { Platform, RefreshControl } from 'react-native'
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
import TimelineEmpty from './Empty'
import TimelineFooter from './Footer'
import TimelineRefresh, { SEPARATION_Y_1, SEPARATION_Y_2 } from './Refresh'
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
const AnimatedFlatList = Animated.createAnimatedComponent(FlashList)
export interface Props {
flRef?: RefObject<FlatList<any>>
flRef?: RefObject<FlashList<any>>
queryKey: QueryKeyTimeline
queryOptions?: Omit<
UseInfiniteQueryOptions<any>,
@ -24,7 +25,7 @@ export interface Props {
>
disableRefresh?: boolean
disableInfinity?: boolean
customProps: Partial<FlatListProps<any>> & Pick<FlatListProps<any>, 'renderItem'>
customProps: Partial<FlashListProps<any>> & Pick<FlashListProps<any>, 'renderItem'>
}
const Timeline: React.FC<Props> = ({
@ -55,7 +56,7 @@ const Timeline: React.FC<Props> = ({
}
})
const flRef = useRef<FlatList>(null)
const flRef = useRef<FlashList<any>>(null)
const scrollY = useSharedValue(0)
const fetchingType = useSharedValue<0 | 1 | 2>(0)
@ -92,6 +93,7 @@ const Timeline: React.FC<Props> = ({
}
})
// @ts-ignore
useScrollToTop(flRef)
useGlobalStorageListener('account.active', () =>
flRef.current?.scrollToOffset({ offset: 0, animated: false })
@ -108,12 +110,10 @@ const Timeline: React.FC<Props> = ({
/>
<AnimatedFlatList
ref={customFLRef || flRef}
estimatedItemSize={200}
scrollEventThrottle={16}
onScroll={onScroll}
windowSize={7}
data={flattenPages(data)}
initialNumToRender={6}
maxToRenderPerBatch={3}
onEndReached={() => !disableInfinity && !isFetchingNextPage && fetchNextPage()}
onEndReachedThreshold={0.75}
ListFooterComponent={