Improve list performance (Round 3)

ios/Podfile.lock

@@ -525,6 +525,9 @@ PODS:
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
+  - RNFlashList (1.7.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - RNFS (2.20.0):
     - React-Core
   - RNGestureHandler (2.15.0):
@@ -636,6 +639,7 @@ DEPENDENCIES:
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
@@ -800,6 +804,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-device-info"
   RNFastImage:
     :path: "../node_modules/react-native-fast-image"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNFS:
     :path: "../node_modules/react-native-fs"
   RNGestureHandler:
@@ -901,6 +907,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
   RNDeviceInfo: db5c64a060e66e5db3102d041ebe3ef307a85120
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
+  RNFlashList: fadf593d8e195ce2fe261980ac59e9f49808b68c
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 7909c50383a18f0cb10ce1db7262b9a6da504c03
   RNInAppBrowser: e36d6935517101ccba0e875bac8ad7b0cb655364

package.json

@@ -59,6 +59,7 @@
     "@react-navigation/native": "^6.1.2",
     "@react-navigation/native-stack": "^6.9.8",
     "@reduxjs/toolkit": "^1.9.2",
+    "@shopify/flash-list": "^1.7.1",
     "@subwallet/extension-chains": "1.2.28-0",
     "@subwallet/extension-dapp": "1.2.28-0",
     "@subwallet/extension-inject": "1.2.28-0",

src/AppNavigator.tsx

@@ -95,7 +95,6 @@ import { EarningPreview } from 'screens/EarningPreview';
 import { EarningPreviewPools } from 'screens/EarningPreview/EarningPreviewPools';
 import { ExportAllAccount } from 'screens/Account/ExportAllAccount';
 import { CrowdloansScreen } from 'screens/Home/Crowdloans';
-import { MissionPoolSearchByTabView } from 'screens/Home/Browser/MissionPool/MissionPoolSearchByTabView';
 
 interface Props {
   isAppReady: boolean;
@@ -634,7 +633,6 @@ const AppNavigator = ({ isAppReady }: Props) => {
                 <Stack.Screen name="BrowserSearch" component={BrowserSearch} />
                 <Stack.Screen name="BrowserTabsManager" component={BrowserTabsManager} />
                 <Stack.Screen name="BrowserListByTabview" component={BrowserListByTabview} />
-                <Stack.Screen name="MissionPoolSearchByTabView" component={MissionPoolSearchByTabView} />
                 <Stack.Screen name="AccountsScreen" component={AccountsScreen} />
                 <Stack.Screen name="Drawer" component={DrawerScreen} options={{ gestureEnabled: false }} />
                 <Stack.Screen name="EarningPreview" component={EarningPreview} options={{ gestureEnabled: false }} />

src/components/Browser/styles/BrowserItem.ts

@@ -1,11 +1,10 @@
 import { ThemeTypes } from 'styles/themes';
 import { StyleSheet } from 'react-native';
 import { FontSemiBold } from 'styles/sharedStyles';
-import { browserListItemHeight } from 'constants/itemHeight';
 
 export default (theme: ThemeTypes) => {
   return StyleSheet.create({
-    container: { flexDirection: 'row', alignItems: 'center', height: browserListItemHeight },
+    container: { flexDirection: 'row', alignItems: 'center' },
 
     contentWrapper: { flexDirection: 'row', flex: 1, overflow: 'hidden' },
 

src/components/FlatListScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { IconProps } from 'phosphor-react-native';
-import { Keyboard, ListRenderItemInfo, RefreshControlProps, StyleProp, TextInput, View, ViewStyle } from 'react-native';
+import { Keyboard, RefreshControlProps, StyleProp, TextInput, View, ViewStyle } from 'react-native';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { Search } from 'components/Search';
 import { SortFunctionInterface } from 'types/ui-types';
@@ -10,8 +10,8 @@ import { LazyFlatList } from 'components/LazyFlatList';
 import { NoInternetScreen } from 'components/NoInternetScreen';
 import FilterModal, { OptionType } from 'components/common/FilterModal';
 import { useFilterModal } from 'hooks/useFilterModal';
-import { SectionListData } from 'react-native/Libraries/Lists/SectionList';
 import { LazySectionList, SectionItem } from 'components/LazySectionList';
+import { ContentStyle, ListRenderItemInfo } from '@shopify/flash-list';
 
 export interface RightIconOpt {
   icon?: (iconProps: IconProps) => JSX.Element;
@@ -42,7 +42,7 @@ interface Props<T> {
   placeholder?: string;
   numberColumns?: number;
   loading?: boolean;
-  flatListStyle?: StyleProp<ViewStyle>;
+  flatListStyle?: ContentStyle;
   leftButtonDisabled?: boolean;
   headerContent?: () => JSX.Element;
   refreshControl?: React.ReactElement<RefreshControlProps, string | React.JSXElementConstructor<any>>;
@@ -52,7 +52,7 @@ interface Props<T> {
   filterOptions?: OptionType[];
   isShowListWrapper?: boolean;
   grouping?: {
-    renderSectionHeader: (info: { section: SectionListData<T> }) => React.ReactElement | null;
+    renderSectionHeader: (item: string, itemLength?: number) => React.ReactElement | null;
     groupBy: (item: T) => string;
     sortSection?: SortFunctionInterface<SectionItem<T>>;
   };
@@ -61,10 +61,10 @@ interface Props<T> {
   defaultSelectionMap?: Record<string, boolean>;
   androidKeyboardVerticalOffset?: number;
   titleTextAlign?: 'left' | 'center';
-  getItemLayout?: (
-    data: readonly T[] | SectionListData<T, SectionListData<T>>[] | null | undefined,
-    index: number,
-  ) => { length: number; offset: number; index: number };
+  estimatedItemSize?: number;
+  extraData?: any;
+  keyExtractor?: (item: T, index: number) => string;
+  removeClippedSubviews?: boolean;
 }
 
 export function FlatListScreen<T>({
@@ -103,7 +103,10 @@ export function FlatListScreen<T>({
   defaultSelectionMap,
   androidKeyboardVerticalOffset,
   titleTextAlign,
-  getItemLayout,
+  estimatedItemSize,
+  extraData,
+  keyExtractor,
+  removeClippedSubviews,
 }: Props<T>) {
   const [searchString, setSearchString] = useState<string>(defaultSearchString || '');
   const searchRef = useRef<TextInput>(null);
@@ -159,7 +162,7 @@ export function FlatListScreen<T>({
             loading={loading}
             groupBy={grouping.groupBy}
             renderSectionHeader={grouping.renderSectionHeader}
-            getItemLayout={getItemLayout}
+            estimatedItemSize={estimatedItemSize}
           />
         ) : (
           <LazyFlatList
@@ -176,7 +179,10 @@ export function FlatListScreen<T>({
             loading={loading}
             numberColumns={numberColumns}
             isShowListWrapper={isShowListWrapper}
-            getItemLayout={getItemLayout}
+            estimatedItemSize={estimatedItemSize}
+            extraData={extraData}
+            keyExtractor={keyExtractor}
+            removeClippedSubviews={removeClippedSubviews}
           />
         ))
       ) : (

src/components/Item/Earning/EarningGroupItem/index.tsx

@@ -147,6 +147,7 @@ function createStyleSheet(theme: ThemeTypes) {
       backgroundColor: theme.colorBgSecondary,
       borderRadius: theme.borderRadiusLG,
       alignItems: 'center',
+      marginBottom: theme.marginXS,
     },
     containerRow: {
       flexDirection: 'row',