feat: GU-2766 add flash list for performance

ios/Podfile.lock

@@ -595,6 +595,8 @@ PODS:
     - Firebase/Messaging (= 8.15.0)
     - React-Core
     - RNFBApp
+  - RNFlashList (1.6.1):
+    - React-Core
   - RNGestureHandler (2.9.0):
     - React-Core
   - RNIap (12.8.2):
@@ -764,6 +766,7 @@ DEPENDENCIES:
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBDynamicLinks (from `../node_modules/@react-native-firebase/dynamic-links`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNIap (from `../node_modules/react-native-iap`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
@@ -957,6 +960,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-firebase/dynamic-links"
   RNFBMessaging:
     :path: "../node_modules/@react-native-firebase/messaging"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNIap:
@@ -1084,6 +1089,7 @@ SPEC CHECKSUMS:
   RNFBApp: e4439717c23252458da2b41b81b4b475c86f90c4
   RNFBDynamicLinks: 538840f6e3f58511f857d15df1bc25ed655dc283
   RNFBMessaging: 40dac204b4197a2661dec5be964780c6ec39bf65
+  RNFlashList: 236646d48f224a034f35baa0242e1b77db063b1e
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNIap: 90997da52f9ab2f42bf80e2bcec11e96c9fba2e3
   RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
@@ -1105,4 +1111,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 88d8c7dd2ade9033785999cb2cc59fe10485fc64
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.13.0

package.json

@@ -58,6 +58,7 @@
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.2.2",
     "@reduxjs/toolkit": "^1.8.6",
+    "@shopify/flash-list": "^1.6.1",
     "@tanstack/query-async-storage-persister": "^4.3.9",
     "@tanstack/react-query": "^4.3.9",
     "@tanstack/react-query-persist-client": "^4.3.9",

patches/react-native-fast-image+8.6.3.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
+index f710081..fe20770 100644
+--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
++++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
+@@ -73,12 +73,17 @@ - (void) setImageColor: (UIColor*)imageColor {
+
+ - (UIImage*) makeImage: (UIImage*)image withTint: (UIColor*)color {
+     UIImage* newImage = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
+-    UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
+-    [color set];
+-    [newImage drawInRect: CGRectMake(0, 0, image.size.width, newImage.size.height)];
+-    newImage = UIGraphicsGetImageFromCurrentImageContext();
+-    UIGraphicsEndImageContext();
+-    return newImage;
++    
++    UIGraphicsImageRendererFormat *format = [UIGraphicsImageRendererFormat defaultFormat];
++    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:image.size format:format];
++
++    UIImage *resultImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
++        CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
++        [color set];
++        [newImage drawInRect:rect];
++    }];
++
++    return resultImage;
+ }
+
+ - (void) setImage: (UIImage*)image {

src/components/comments/view/commentsView.tsx

@@ -1,5 +1,6 @@
 import React, { useState, Fragment, useRef } from 'react';
-import { FlatList, Text } from 'react-native';
+import { Text } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
 
@@ -168,7 +169,7 @@ const CommentsView = ({
 
   return (
     <Fragment>
-      <FlatList
+      <FlashList
         style={{ ...styles.list, ...styleOerride }}
         contentContainerStyle={{ padding: 0 }}
         data={comments}

src/components/postComments/children/commentsSection.tsx

@@ -22,7 +22,6 @@ export const CommentsSection = ({ item, index, revealReplies, ...props }) => {
     return (
       <Animated.View key={item.author + item.permlink} entering={_enteringAnim}>
         <Comment
-          key={item.author + item.permlink}
           comment={item}
           repliesToggle={toggle}
           handleOnToggleReplies={() => setToggle(!toggle)}

src/components/postComments/container/postComments.tsx

@@ -10,7 +10,8 @@ import React, {
 import { ActivityIndicator, Platform, Text } from 'react-native';
 import { useIntl } from 'react-intl';
 import { useNavigation } from '@react-navigation/native';
-import { FlatList, RefreshControl } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native-gesture-handler';
+import { FlashList } from '@shopify/flash-list';
 
 // Components
 import { postBodySummary } from '@ecency/render-helper';
@@ -63,7 +64,7 @@ const PostComments = forwardRef(
 
     const writeCommentRef = useRef(null);
     const postInteractionRef = useRef<typeof PostHtmlInteractionHandler|null>(null);
-    const commentsListRef = useRef<FlatList | null>(null);
+    const commentsListRef = useRef<FlashList<any> | null>(null);
 
     const [selectedFilter, setSelectedFilter] = useState('trending');
     const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
@@ -309,20 +310,17 @@ const PostComments = forwardRef(
 
     return (
       <Fragment>
-        <FlatList
+        <FlashList
           ref={commentsListRef}
           style={styles.list}
           contentContainerStyle={styles.listContent}
           ListHeaderComponent={_postContentView}
           ListEmptyComponent={_renderEmptyContent}
           data={isPostLoading ? [] : sortedSections}
           onContentSizeChange={_onContentSizeChange}
+          estimatedItemSize={120}
           renderItem={_renderItem}
           keyExtractor={(item) => `${item.author}/${item.permlink}`}
-          initialNumToRender={6}
-          maxToRenderPerBatch={6}
-          updateCellsBatchingPeriod={100}
-          windowSize={13}
           refreshControl={
             <RefreshControl
               refreshing={refreshing}

src/components/postsList/container/postsListContainer.tsx

@@ -13,8 +13,8 @@ import {
   RefreshControl,
   ActivityIndicator,
   View,
-  Alert,
 } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { useIntl } from 'react-intl';
@@ -267,7 +267,7 @@ const postsListContainer = (
 
   return (
     <Fragment>
-      <FlatList
+      <FlashList
         ref={flatListRef}
         data={cacheInjectedData}
         showsVerticalScrollIndicator={false}

yarn.lock

@@ -1811,6 +1811,14 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@shopify/flash-list@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.6.1.tgz#7a46d8ec4e125b8b7bf686777d932c7c950e00c7"
+  integrity sha512-SlBlpP7+zol6D1SKaf402aS30Qgwdjwb8/Qn2CupYwXnTcu2l8TiXB766vcsIvKTqUO7ELfQnCwCq8NXx55FsQ==
+  dependencies:
+    recyclerlistview "4.2.0"
+    tslib "2.4.0"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -7166,7 +7174,7 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
-lodash.debounce@^4.0.8:
+lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -8662,7 +8670,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.0, prop-types@^15.8.1:
+prop-types@*, prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9613,6 +9621,15 @@ recast@^0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+[email protected]:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef"
+  integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==
+  dependencies:
+    lodash.debounce "4.0.8"
+    prop-types "15.8.1"
+    ts-object-utils "0.0.5"
+
 reduce-flatten@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
@@ -10937,6 +10954,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+[email protected]:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077"
+  integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==
+
 ts-toolbelt@^6.15.1:
   version "6.15.5"
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz#cb3b43ed725cb63644782c64fbcad7d8f28c0a83"
@@ -10952,6 +10974,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+[email protected]:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"