Merge pull request #5434 from BlueWallet/getitemlayout

ADD: Use performance improving props for large lists

components/TransactionsNavigationHeader.tsx

@@ -18,7 +18,7 @@ interface TransactionsNavigationHeaderProps {
     navigate: (route: string, params?: any) => void;
     goBack: () => void;
   };
-  onHandleManageFundsPressed?: (id: string) => void; // Add a type definition for this prop
+  onManageFundsPressed?: (id: string) => void; // Add a type definition for this prop
   actionKeys: {
     CopyToClipboard: 'copyToClipboard';
     WalletBalanceVisibility: 'walletBalanceVisibility';
@@ -35,7 +35,7 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
   // @ts-ignore: Ugh
   navigation,
   // @ts-ignore: Ugh
-  onHandleManageFundsPressed,
+  onManageFundsPressed,
 }) => {
   const [wallet, setWallet] = useState(initialWallet);
   const [allowOnchainAddress, setAllowOnchainAddress] = useState(false);
@@ -82,7 +82,7 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
 
     const updatedWallet = updateWalletVisibility(wallet, !wallet.hideBalance);
     setWallet(updatedWallet);
-    await context.saveToDisk();
+    context.saveToDisk();
   };
 
   const updateWalletWithNewUnit = (wallet: AbstractWallet, newPreferredUnit: BitcoinUnit) => {
@@ -110,7 +110,7 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
   };
 
   const handleManageFundsPressed = () => {
-    onHandleManageFundsPressed?.(actionKeys.Refill);
+    onManageFundsPressed?.(actionKeys.Refill);
   };
 
   const onPressMenuItem = (id: string) => {

screen/wallets/list.js

@@ -364,6 +364,7 @@ const WalletsList = () => {
       <StatusBar barStyle={barStyle} backgroundColor="transparent" translucent animated />
       <View style={[styles.walletsListWrapper, stylesHook.walletsListWrapper]}>
         <SectionList
+          removeClippedSubviews
           contentInsetAdjustmentBehavior="automatic"
           automaticallyAdjustContentInsets
           refreshing={isLoading}

screen/wallets/transactions.js

@@ -469,6 +469,12 @@ const WalletTransactions = ({ navigation }) => {
     }
   };
 
+  const getItemLayout = (_, index) => ({
+    length: 64,
+    offset: 64 * index,
+    index,
+  });
+
   return (
     <View style={styles.flex}>
       <StatusBar barStyle="light-content" backgroundColor={WalletGradient.headerColorFor(wallet.type)} animated />
@@ -510,9 +516,9 @@ const WalletTransactions = ({ navigation }) => {
       />
       <View style={[styles.list, stylesHook.list]}>
         <FlatList
+          getItemLayout={getItemLayout}
           ListHeaderComponent={renderListHeaderComponent}
           onEndReachedThreshold={0.3}
-          stickyHeaderHiddenOnScroll
           onEndReached={async () => {
             // pagination in works. in this block we will add more txs to FlatList
             // so as user scrolls closer to bottom it will render mode transactions
@@ -540,6 +546,8 @@ const WalletTransactions = ({ navigation }) => {
           extraData={[timeElapsed, dataSource, wallets]}
           keyExtractor={_keyExtractor}
           renderItem={renderItem}
+          initialNumToRender={10}
+          removeClippedSubviews
           contentInset={{ top: 0, left: 0, bottom: 90, right: 0 }}
         />
       </View>