From 2abb30c100fc7fe7fa37a96fdd0ba3bf2aec4773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20Rodriguez=20Ve=CC=81lez?= <marcospr@pm.me>
Date: Sun, 16 Sep 2018 02:24:45 -0400
Subject: [PATCH] Migrated to FlatList.

---
 BlueComponents.js           |  6 +++++-
 screen/receive/list.js      | 23 +++++++++++++----------
 screen/send/list.js         | 32 +++++++++++++++++++-------------
 screen/transactions/list.js | 18 +++++++-----------
 screen/wallets/list.js      | 21 ++++++++-------------
 5 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/BlueComponents.js b/BlueComponents.js
index 3a05b60e1..62e510812 100644
--- a/BlueComponents.js
+++ b/BlueComponents.js
@@ -170,12 +170,16 @@ export class BlueCard extends Component {
           borderColor: 'transparent',
           paddingTop: 0,
           marginTop: 0,
+          flex: 1,
         }}
         dividerStyle={{
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }}
-        wrapperStyle={{ backgroundColor: 'transparent' }}
+        wrapperStyle={{ 
+          backgroundColor: 'transparent',
+          flex: 1,
+        }}
       />
     );
   }
diff --git a/screen/receive/list.js b/screen/receive/list.js
index f9c1041c0..33fb258f5 100644
--- a/screen/receive/list.js
+++ b/screen/receive/list.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ListView, Dimensions } from 'react-native';
+import { FlatList, Text, StyleSheet } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { BlueLoading, SafeBlueArea, BlueCard, BlueListItem, BlueHeader } from '../../BlueComponents';
 import PropTypes from 'prop-types';
@@ -7,8 +7,6 @@ import PropTypes from 'prop-types';
 let BlueApp = require('../../BlueApp');
 let EV = require('../../events');
 let loc = require('../../loc');
-const { height } = Dimensions.get('window');
-let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 
 export default class ReceiveList extends Component {
   static navigationOptions = {
@@ -45,7 +43,7 @@ export default class ReceiveList extends Component {
     this.setState({
       isLoading: false,
       list: list,
-      dataSource: ds.cloneWithRows(list),
+      dataSource: list,
     });
   }
 
@@ -57,7 +55,7 @@ export default class ReceiveList extends Component {
     }
 
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+      <SafeBlueArea forceInset={{ horizontal: 'always' }}>
         <BlueHeader
           centerComponent={{
             text: loc.receive.list.header,
@@ -66,11 +64,10 @@ export default class ReceiveList extends Component {
         />
 
         <BlueCard containerStyle={{ padding: 0 }}>
-          <ListView
-            maxHeight={height - 200}
-            enableEmptySections
-            dataSource={this.state.dataSource}
-            renderRow={item => {
+          <FlatList
+            data={this.state.dataSource}
+            style={Styles.flatList}
+            renderItem={item => {
               return (
                 <BlueListItem
                   title={item.title}
@@ -93,6 +90,12 @@ export default class ReceiveList extends Component {
   }
 }
 
+const Styles = StyleSheet.create({
+  flatList: {
+    flex: 1,
+  },
+});
+
 ReceiveList.propTypes = {
   navigation: PropTypes.shape({
     navigate: PropTypes.func,
diff --git a/screen/send/list.js b/screen/send/list.js
index 2ce875924..cb9e02d5c 100644
--- a/screen/send/list.js
+++ b/screen/send/list.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Dimensions, ActivityIndicator, View, ListView } from 'react-native';
+import { ActivityIndicator, View, FlatList, StyleSheet } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { SafeBlueArea, BlueCard, BlueListItem, BlueHeader } from '../../BlueComponents';
 import PropTypes from 'prop-types';
@@ -7,8 +7,6 @@ let EV = require('../../events');
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
-const { height } = Dimensions.get('window');
-let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 
 export default class SendList extends Component {
   static navigationOptions = {
@@ -45,7 +43,7 @@ export default class SendList extends Component {
     this.setState({
       isLoading: false,
       list: list,
-      dataSource: ds.cloneWithRows(list),
+      dataSource: list,
     });
   }
 
@@ -54,14 +52,16 @@ export default class SendList extends Component {
 
     if (this.state.isLoading) {
       return (
-        <View style={{ flex: 1, paddingTop: 20 }}>
-          <ActivityIndicator />
-        </View>
+        <SafeBlueArea forceInset={{ horizontal: 'always' }}>
+          <View style={{ flex: 1, paddingTop: 20 }}>
+            <ActivityIndicator />
+          </View>
+        </SafeBlueArea>
       );
     }
 
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+      <SafeBlueArea forceInset={{ horizontal: 'always' }}>
         <BlueHeader
           centerComponent={{
             text: loc.send.list.header,
@@ -70,11 +70,11 @@ export default class SendList extends Component {
         />
 
         <BlueCard containerStyle={{ padding: 0 }}>
-          <ListView
-            maxHeight={height - 200}
-            enableEmptySections
-            dataSource={this.state.dataSource}
-            renderRow={item => {
+          <FlatList
+            data={this.state.dataSource}
+            extraData={this.state.dataSource}
+            style={Styles.flatList}
+            renderItem={item => {
               return (
                 <BlueListItem
                   title={item.title}
@@ -97,6 +97,12 @@ export default class SendList extends Component {
   }
 }
 
+const Styles = StyleSheet.create({
+  flatList: {
+    flex: 1,
+  },
+});
+
 SendList.propTypes = {
   navigation: PropTypes.shape({
     navigate: PropTypes.func,
diff --git a/screen/transactions/list.js b/screen/transactions/list.js
index 8f791ac98..f7aa73ab9 100644
--- a/screen/transactions/list.js
+++ b/screen/transactions/list.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ListView, Dimensions } from 'react-native';
+import { FlatList } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { Header, Icon } from 'react-native-elements';
 import { BlueLoading, BlueList, SafeBlueArea, BlueCard, BlueText, BlueListItem } from '../../BlueComponents';
@@ -8,9 +8,6 @@ let loc = require('../../loc');
 let EV = require('../../events');
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
-const { height } = Dimensions.get('window');
-
-let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 
 export default class TransactionsList extends Component {
   static navigationOptions = {
@@ -44,7 +41,7 @@ export default class TransactionsList extends Component {
           this.setState({
             isLoading: false,
             final_balance: BlueApp.getBalance(),
-            dataSource: ds.cloneWithRows(BlueApp.getTransactions()),
+            dataSource: BlueApp.getTransactions(),
           });
         }, 1);
       },
@@ -81,7 +78,7 @@ export default class TransactionsList extends Component {
           that.setState({
             isLoading: false,
             final_balance: BlueApp.getBalance(),
-            dataSource: ds.cloneWithRows(BlueApp.getTransactions()),
+            dataSource: BlueApp.getTransactions(),
           });
         }, 10);
       },
@@ -109,11 +106,10 @@ export default class TransactionsList extends Component {
           <BlueText style={{ marginBottom: 10 }}>{loc.transactions.list.description}</BlueText>
 
           <BlueList>
-            <ListView
-              maxHeight={height - 300}
-              enableEmptySections
-              dataSource={this.state.dataSource}
-              renderRow={rowData => {
+            <FlatList
+              data={this.state.dataSource}
+              extraData={this.state.dataSource}
+              renderItem={rowData => {
                 return (
                   <BlueListItem
                     avatar={
diff --git a/screen/wallets/list.js b/screen/wallets/list.js
index 115af3a8a..3c7430f16 100644
--- a/screen/wallets/list.js
+++ b/screen/wallets/list.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, TouchableOpacity, Dimensions, Text, ListView } from 'react-native';
+import { View, TouchableOpacity, Dimensions, Text, FlatList } from 'react-native';
 import {
   BlueText,
   BlueTransactionOnchainIcon,
@@ -28,9 +28,7 @@ let A = require('../../analytics');
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
-const { height, width } = Dimensions.get('window');
-
-let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+const { width } = Dimensions.get('window');
 
 export default class WalletsList extends Component {
   static navigationOptions = {
@@ -121,7 +119,7 @@ export default class WalletsList extends Component {
         showManageFundsBigButton: showManageFundsBig,
         showManageFundsSmallButton,
         showRereshButton,
-        dataSource: ds.cloneWithRows(BlueApp.getTransactions(this.lastSnappedTo || 0)),
+        dataSource: BlueApp.getTransactions(this.lastSnappedTo || 0),
       });
     }, 1);
   }
@@ -158,7 +156,7 @@ export default class WalletsList extends Component {
       showSendButton: false,
       showRereshButton: false,
       // TODO: погуглить че это за ебала ds.cloneWithRows, можно ли быстрее сделать прогрузку транзакций на экран
-      dataSource: ds.cloneWithRows(BlueApp.getTransactions(index)),
+      dataSource: BlueApp.getTransactions(index),
     });
 
     if (index < BlueApp.getWallets().length) {
@@ -381,13 +379,10 @@ export default class WalletsList extends Component {
 
                 <View style={{ top: 30, position: 'absolute' }}>
                   <BlueList>
-                    <ListView
-                      maxHeight={height - 330 + 10}
-                      width={width - 5}
-                      left={5}
-                      enableEmptySections
-                      dataSource={this.state.dataSource}
-                      renderRow={rowData => {
+                    <FlatList
+                      data={this.state.dataSource}
+                      extraData={this.state.dataSource}
+                      renderItem={rowData => {
                         return (
                           <BlueListItem
                             avatar={(() => {