From b675a94ae0794200ab6c46e99461f683e6457b8e Mon Sep 17 00:00:00 2001
From: tongyuhu <1449807759@qq.com>
Date: Sat, 20 Feb 2021 16:17:31 +0800
Subject: [PATCH] Fix crash when have a lot of transactions.

---
 components/TransactionsScreen.tsx | 45 ++++++++++++++++---------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/components/TransactionsScreen.tsx b/components/TransactionsScreen.tsx
index 117a8e177..3049e2735 100644
--- a/components/TransactionsScreen.tsx
+++ b/components/TransactionsScreen.tsx
@@ -2,7 +2,7 @@
 import React, {useState} from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
 import {RegText, ZecAmount, UsdAmount, SecondaryButton, FadeText} from '../components/Components';
-import {View, ScrollView, Image, Modal, TouchableOpacity, SafeAreaView, RefreshControl, Clipboard} from 'react-native';
+import {View, ScrollView, Image, Modal, TouchableOpacity, SafeAreaView, RefreshControl, Clipboard,FlatList} from 'react-native';
 import Toast from 'react-native-simple-toast';
 import {TotalBalance, Transaction, Info, SyncStatus} from '../app/AppState';
 import Utils from '../app/utils';
@@ -300,31 +300,32 @@ const TransactionsScreenView: React.FunctionComponent<TransactionsScreenViewProp
       <View style={{display: 'flex', alignItems: 'center', marginTop: -25}}>
         <Image source={require('../assets/img/logobig.png')} style={{width: 50, height: 50, resizeMode: 'contain'}} />
       </View>
-      <ScrollView
+
+      <FlatList
         refreshControl={
-          <RefreshControl refreshing={false} onRefresh={doRefresh} tintColor={colors.text} title="Refreshing" />
+          <RefreshControl refreshing={false} onRefresh={doRefresh} tintColor={colors.text} title="Refreshing"/>
         }
-        style={{flexGrow: 1, marginTop: 10, width: '100%', height: '100%'}}>
-        {transactions?.flatMap((t) => {
-          let txmonth = moment(t.time * 1000).format('MMM YYYY');
-
-          var month = '';
-          if (txmonth !== lastMonth) {
-            month = txmonth;
-            lastMonth = txmonth;
-          }
+        data={transactions}
+        renderItem={({item})=>{
+        let txmonth = moment(item.time * 1000).format('MMM YYYY');
 
-          return (
+        var month = '';
+        if (txmonth !== lastMonth) {
+          month = txmonth;
+          lastMonth = txmonth;
+        }
+        return (
             <TxSummaryLine
-              key={`${t.txid}-${t.type}`}
-              tx={t}
-              month={month}
-              setTxDetail={setTxDetail}
-              setTxDetailModalShowing={setTxDetailModalShowing}
-            />
-          );
-        })}
-      </ScrollView>
+                key={`${item.txid}-${item.type}`}
+                tx={item}
+                month={month}
+                setTxDetail={setTxDetail}
+                setTxDetailModalShowing={setTxDetailModalShowing}
+              />
+          )
+        }
+      }
+      />
     </View>
   );
 };