Try out FlashList

2025-06-05 22:19:13 +02:00 · 2023-01-06 01:41:46 +01:00
parent bd3046cc2f
commit 8406a57143
13 changed files with 146 additions and 108 deletions
--- a/src/screens/Compose/Root/Footer/Attachments.tsx
+++ b/src/screens/Compose/Root/Footer/Attachments.tsx
@ -5,12 +5,13 @@ import { MAX_MEDIA_ATTACHMENTS } from '@components/mediaSelector'
 import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
+import { FlashList } from '@shopify/flash-list'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useContext, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import FastImage from 'react-native-fast-image'
 import ComposeContext from '../../utils/createContext'
@ -30,7 +31,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
  const { colors } = useTheme()
  const navigation = useNavigation<any>()

-  const flatListRef = useRef<FlatList>(null)
+  const flatListRef = useRef<FlashList<any>>(null)

  const sensitiveOnPress = () =>
    composeDispatch({
@ -222,10 +223,11 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
          {t('content.root.footer.attachments.sensitive')}
        </CustomText>
      </Pressable>
-      <FlatList
+      <FlashList
        horizontal
        ref={flatListRef}
        decelerationRate={0}
+        estimatedItemSize={100}
        pagingEnabled={false}
        snapToAlignment='center'
        renderItem={renderAttachment}
--- a/src/screens/Tabs/Me/FollowedTags.tsx
+++ b/src/screens/Tabs/Me/FollowedTags.tsx
@ -3,12 +3,12 @@ import haptics from '@components/haptics'
 import ComponentHashtag from '@components/Hashtag'
 import { displayMessage } from '@components/Message'
 import ComponentSeparator from '@components/Separator'
+import { FlashList } from '@shopify/flash-list'
 import { TabMeStackScreenProps } from '@utils/navigation/navigators'
 import { useFollowedTagsQuery, useTagsMutation } from '@utils/queryHooks/tags'
 import { flattenPages } from '@utils/queryHooks/utils'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList } from 'react-native-gesture-handler'

 const TabMeFollowedTags: React.FC<TabMeStackScreenProps<'Tab-Me-FollowedTags'>> = ({
  navigation
@ -49,8 +49,8 @@ const TabMeFollowedTags: React.FC<TabMeStackScreenProps<'Tab-Me-FollowedTags'>>
  })

  return (
-    <FlatList
-      style={{ flex: 1 }}
+    <FlashList
+      estimatedItemSize={70}
      data={flattenData}
      renderItem={({ item }) => (
        <ComponentHashtag
--- a/src/screens/Tabs/Me/List/Accounts.tsx
+++ b/src/screens/Tabs/Me/List/Accounts.tsx
@ -3,6 +3,7 @@ import Button from '@components/Button'
 import haptics from '@components/haptics'
 import { displayMessage } from '@components/Message'
 import CustomText from '@components/Text'
+import { FlashList } from '@shopify/flash-list'
 import { TabMeStackScreenProps } from '@utils/navigation/navigators'
 import {
  QueryKeyListAccounts,
@ -14,7 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, View } from 'react-native'
+import { View } from 'react-native'

 const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>> = ({
  route: { params }
@ -51,7 +52,7 @@ const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>>
  })

  return (
-    <FlatList
+    <FlashList
      data={flattenPages(data)}
      renderItem={({ item, index }) => (
        <ComponentAccount
--- a/src/screens/Tabs/Me/SettingsLanguage.tsx
+++ b/src/screens/Tabs/Me/SettingsLanguage.tsx
@ -1,13 +1,14 @@
 import haptics from '@components/haptics'
 import { MenuRow } from '@components/Menu'
 import { LOCALES } from '@i18n/locales'
+import { FlashList } from '@shopify/flash-list'
 import { TabMeStackScreenProps } from '@utils/navigation/navigators'
 import { setChannels } from '@utils/push/constants'
 import { getGlobalStorage, useGlobalStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, Platform } from 'react-native'
+import { Platform } from 'react-native'

 const TabMeSettingsLanguage: React.FC<TabMeStackScreenProps<'Tab-Me-Settings-Language'>> = ({
  navigation
@ -33,7 +34,7 @@ const TabMeSettingsLanguage: React.FC<TabMeStackScreenProps<'Tab-Me-Settings-Lan
  }

  return (
-    <FlatList
+    <FlashList
      style={{ flex: 1, paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}
      data={languages}
      renderItem={({ item }) => {
--- a/src/screens/Tabs/Shared/Account/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Account/Attachments.tsx
@ -9,7 +9,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { Dimensions, Pressable, View } from 'react-native'
-import { FlatList } from 'react-native-gesture-handler'
+import { ScrollView } from 'react-native-gesture-handler'
 import AccountContext from './Context'

 const AccountAttachments: React.FC = () => {
@ -39,67 +39,66 @@ const AccountAttachments: React.FC = () => {
  if (!flattenData.length) return null

  return (
-    <View
+    <ScrollView
      style={{
        flex: 1,
+        flexDirection: 'row',
        height: width + StyleConstants.Spacing.Global.PagePadding * 2,
        paddingVertical: StyleConstants.Spacing.Global.PagePadding,
        borderTopWidth: 1,
        borderTopColor: colors.border
      }}
+      horizontal
+      showsHorizontalScrollIndicator={false}
    >
-      <FlatList
-        horizontal
-        data={flattenData}
-        renderItem={({ item, index }) => {
-          if (index === DISPLAY_AMOUNT - 1) {
-            return (
-              <Pressable
-                onPress={() => {
-                  account && navigation.push('Tab-Shared-Attachments', { account })
-                }}
-                children={
-                  <View
-                    style={{
-                      marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
-                      backgroundColor: colors.backgroundOverlayInvert,
-                      width: width,
-                      height: width,
-                      justifyContent: 'center',
-                      alignItems: 'center'
-                    }}
-                    children={
-                      <Icon
-                        name='MoreHorizontal'
-                        color={colors.primaryOverlay}
-                        size={StyleConstants.Font.Size.L * 1.5}
-                      />
-                    }
-                  />
-                }
-              />
-            )
-          } else {
-            return (
-              <GracefullyImage
-                uri={{
-                  original:
-                    item.media_attachments[0]?.preview_url || item.media_attachments[0]?.url,
-                  remote: item.media_attachments[0]?.remote_url
-                }}
-                blurhash={
-                  item.media_attachments[0] && (item.media_attachments[0].blurhash || undefined)
-                }
-                dimension={{ width: width, height: width }}
-                style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
-                onPress={() => navigation.push('Tab-Shared-Toot', { toot: item })}
-              />
-            )
-          }
-        }}
-        showsHorizontalScrollIndicator={false}
-      />
-    </View>
+      {flattenData.map((item, index) => {
+        if (index === DISPLAY_AMOUNT - 1) {
+          return (
+            <Pressable
+              key={index}
+              onPress={() => {
+                account && navigation.push('Tab-Shared-Attachments', { account })
+              }}
+              children={
+                <View
+                  style={{
+                    marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
+                    backgroundColor: colors.backgroundOverlayInvert,
+                    width: width,
+                    height: width,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                  }}
+                  children={
+                    <Icon
+                      name='MoreHorizontal'
+                      color={colors.primaryOverlay}
+                      size={StyleConstants.Font.Size.L * 1.5}
+                    />
+                  }
+                />
+              }
+            />
+          )
+        } else {
+          return (
+            <GracefullyImage
+              key={index}
+              uri={{
+                original: item.media_attachments[0]?.preview_url || item.media_attachments[0]?.url,
+                remote: item.media_attachments[0]?.remote_url
+              }}
+              blurhash={
+                item.media_attachments[0] && (item.media_attachments[0].blurhash || undefined)
+              }
+              dimension={{ width: width, height: width }}
+              style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
+              onPress={() => navigation.push('Tab-Shared-Toot', { toot: item })}
+            />
+          )
+        }
+      })}
+    </ScrollView>
  )
 }

--- a/src/screens/Tabs/Shared/History.tsx
+++ b/src/screens/Tabs/Shared/History.tsx
@ -6,6 +6,7 @@ import CustomText from '@components/Text'
 import TimelineAttachment from '@components/Timeline/Shared/Attachment'
 import StatusContext from '@components/Timeline/Shared/Context'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
+import { FlashList } from '@shopify/flash-list'
 import removeHTML from '@utils/helpers/removeHTML'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
@ -14,7 +15,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { diffChars, diffWords } from 'diff'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, View } from 'react-native'
+import { View } from 'react-native'

 const SCRIPTS_WITHOUT_BOUNDARIES = [
  'my',
@ -158,8 +159,8 @@ const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>
  ).length

  return (
-    <FlatList
-      style={{ flex: 1, minHeight: '100%' }}
+    <FlashList
+      estimatedItemSize={100}
      data={dataReversed}
      renderItem={({ item, index }) => (
        <ContentView
--- a/src/screens/Tabs/Shared/Toot.tsx
+++ b/src/screens/Tabs/Shared/Toot.tsx
@ -3,6 +3,7 @@ import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
+import { FlashList } from '@shopify/flash-list'
 import { useQuery } from '@tanstack/react-query'
 import apiGeneral from '@utils/api/general'
 import apiInstance from '@utils/api/instance'
@ -15,7 +16,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, FlatList, Pressable, View } from 'react-native'
+import { Alert, Pressable, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import { Path, Svg } from 'react-native-svg'

@ -69,7 +70,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
    navigation.setParams({ toot, queryKey: queryKey.local })
  }, [hasRemoteContent])

-  const flRef = useRef<FlatList>(null)
+  const flRef = useRef<FlashList<Mastodon.Status>>(null)
  const scrolled = useRef(false)

  const match = urlMatcher(toot.url || toot.uri)
@ -258,14 +259,13 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
  const ARC = StyleConstants.Avatar.XS / 4

  return (
-    <FlatList
+    <FlashList
      ref={flRef}
-      scrollEventThrottle={16}
-      windowSize={7}
+      estimatedItemSize={100}
      data={query.data.pages?.[0].body}
      renderItem={({ item, index }) => {
        const prev = query.data.pages[0].body[index - 1]?._level || 0
-        const curr = item._level
+        const curr = item._level || 0
        const next = query.data.pages[0].body[index + 1]?._level || 0

        return (
@ -273,7 +273,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
            style={{
              paddingLeft:
                index > highlightIndex.current
-                  ? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
+                  ? Math.min((item._level || 0) - 1, MAX_LEVEL) * StyleConstants.Spacing.S
                  : undefined
            }}
            onLayout={({
@ -386,8 +386,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
          </View>
        )
      }}
-      initialNumToRender={6}
-      maxToRenderPerBatch={3}
      ItemSeparatorComponent={({ leadingItem }) => {
        return (
          <>
@ -416,21 +414,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
          </>
        )
      }}
-      onScrollToIndexFailed={error => {
-        const offset = error.averageItemLength * error.index
-        flRef.current?.scrollToOffset({ offset })
-        try {
-          error.index < query.data.pages[0].body.length &&
-            setTimeout(
-              () =>
-                flRef.current?.scrollToIndex({
-                  index: error.index,
-                  viewOffset: 100
-                }),
-              500
-            )
-        } catch {}
-      }}
      ListFooterComponent={
        <View
          style={{
--- a/src/screens/Tabs/Shared/Users.tsx
+++ b/src/screens/Tabs/Shared/Users.tsx
@ -3,6 +3,7 @@ import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
+import { FlashList } from '@shopify/flash-list'
 import apiInstance from '@utils/api/instance'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { SearchResult } from '@utils/queryHooks/search'
@ -14,7 +15,6 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { Circle, Flow } from 'react-native-animated-spinkit'
-import { FlatList } from 'react-native-gesture-handler'

 const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
  navigation,
@ -44,9 +44,9 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
  const [isSearching, setIsSearching] = useState(false)

  return (
-    <FlatList
-      windowSize={7}
+    <FlashList
      data={flattenPages(data)}
+      estimatedItemSize={72}
      style={{
        minHeight: '100%',
        paddingVertical: StyleConstants.Spacing.Global.PagePadding