Fix for lists

BlueComponents.js

@@ -453,6 +453,7 @@ export class BlueList extends Component {
           backgroundColor: BlueApp.settings.brandingColor,
           borderTopColor: 'transparent',
           borderTopWidth: 0,
+          flex: 1
         }}
       />
     );
@@ -581,7 +582,7 @@ export class BlueRefreshIcon extends Component {
 export class BlueTransactionIncommingIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.boxIncomming}>
           <View style={stylesBlueIcon.ballIncomming}>
             <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#37c0a1" iconStyle={{ left: 0, top: 8 }} />
@@ -595,7 +596,7 @@ export class BlueTransactionIncommingIcon extends Component {
 export class BlueTransactionPendingIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.box}>
           <View style={stylesBlueIcon.ball}>
             <Icon
@@ -616,7 +617,7 @@ export class BlueTransactionPendingIcon extends Component {
 export class BlueTransactionOnchainIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.boxIncomming}>
           <View style={stylesBlueIcon.ballIncomming}>
             <Icon
@@ -637,7 +638,7 @@ export class BlueTransactionOnchainIcon extends Component {
 export class BlueTransactionOffchainIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.boxIncomming}>
           <View style={stylesBlueIcon.ballOutgoing}>
             <Icon
@@ -658,7 +659,7 @@ export class BlueTransactionOffchainIcon extends Component {
 export class BlueTransactionOffchainIncomingIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.boxIncomming}>
           <View style={stylesBlueIcon.ballIncomming}>
             <Icon
@@ -679,7 +680,7 @@ export class BlueTransactionOffchainIncomingIcon extends Component {
 export class BlueTransactionOutgoingIcon extends Component {
   render() {
     return (
-      <View {...this.props} style={stylesBlueIcon.container}>
+      <View {...this.props} >
         <View style={stylesBlueIcon.boxIncomming}>
           <View style={stylesBlueIcon.ballOutgoing}>
             <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#d0021b" iconStyle={{ left: 0, top: 8 }} />

MainBottomTabs.js

@@ -9,33 +9,35 @@ import receive from './screen/receive';
 /** @type {AppStorage} */
 let BlueApp = require('./BlueApp');
 
-const Tabs = createStackNavigator({
+const Tabs = createStackNavigator(
-  Wallets: {
+  {
-    screen: wallets,
+    Wallets: {
-    path: 'wallets',
+      screen: wallets,
-    navigationOptions: {
+      path: 'wallets',
-      title: 'Wallets',
+      navigationOptions: {
+        title: 'Wallets',
+      },
+    },
+    Transactions: {
+      screen: transactions,
+      path: 'trans',
+    },
+    Send: {
+      screen: send,
+      path: 'cart',
+    },
+    Receive: {
+      screen: receive,
+      path: 'receive',
+    },
+    Settings: {
+      screen: settings,
+      path: 'settings',
     },
   },
-  Transactions: {
+  {
-    screen: transactions,
+    headerMode: 'none',
-    path: 'trans',
-  },
-  Send: {
-    screen: send,
-    path: 'cart',
-  },
-  Receive: {
-    screen: receive,
-    path: 'receive',
-  },
-  Settings: {
-    screen: settings,
-    path: 'settings',
   },
-}, 
+);
-{ 
-  headerMode: 'none' 
-});
 
 export default Tabs;

screen/receive/list.js

@@ -47,6 +47,8 @@ export default class ReceiveList extends Component {
     });
   }
 
+  _keyExtractor = (item, index) => item.hash;
+
   render() {
     const { navigate } = this.props.navigation;
 
@@ -67,6 +69,7 @@ export default class ReceiveList extends Component {
           <FlatList
             data={this.state.dataSource}
             style={Styles.flatList}
+            keyExtractor={this._keyExtractor}
             renderItem={item => {
               return (
                 <BlueListItem

screen/send/list.js

@@ -47,6 +47,8 @@ export default class SendList extends Component {
     });
   }
 
+  _keyExtractor = (item, index) => item.hash;
+
   render() {
     const { navigate } = this.props.navigation;
 
@@ -72,6 +74,7 @@ export default class SendList extends Component {
         <BlueCard containerStyle={{ padding: 0 }}>
           <FlatList
             data={this.state.dataSource}
+            keyExtractor={this._keyExtractor}
             extraData={this.state.dataSource}
             style={Styles.flatList}
             renderItem={item => {

screen/transactions/list.js

@@ -74,7 +74,6 @@ export default class TransactionsList extends Component {
           }
           if (noErr) await BlueApp.saveToDisk(); // caching
           EV(EV.enum.WALLETS_COUNT_CHANGED); // TODO: some other event type?
-
           that.setState({
             isLoading: false,
             final_balance: BlueApp.getBalance(),
@@ -85,13 +84,16 @@ export default class TransactionsList extends Component {
     );
   }
 
+  _keyExtractor = (item, index) => item.hash;
+
   render() {
+    console.warn(this.state.dataSource)
     const { navigate } = this.props.navigation;
 
     if (this.state.isLoading) {
       return <BlueLoading />;
     }
-
+    
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
         <Header
@@ -109,6 +111,7 @@ export default class TransactionsList extends Component {
             <FlatList
               data={this.state.dataSource}
               extraData={this.state.dataSource}
+              keyExtractor={this._keyExtractor}
               renderItem={rowData => {
                 return (
                   <BlueListItem

screen/wallets/list.js

@@ -262,6 +262,8 @@ export default class WalletsList extends Component {
     }
   }
 
+  _keyExtractor = (item) => item.hash;
+
   render() {
     const { navigate } = this.props.navigation;
 
@@ -320,7 +322,7 @@ export default class WalletsList extends Component {
           } else {
             return (
               <View style={{ flex: 1 }}>
-                <View style={{ flex: 1, flexDirection: 'row', height: 50 }}>
+                <View style={{ flexDirection: 'row', height: 50 }}>
                   <Text
                     style={{
                       paddingLeft: 15,
@@ -377,11 +379,12 @@ export default class WalletsList extends Component {
                   })()}
                 </View>
 
-                <View style={{ top: 30, position: 'absolute' }}>
+                <View style={{ flex: 1 }}>
                   <BlueList>
                     <FlatList
                       data={this.state.dataSource}
                       extraData={this.state.dataSource}
+                      keyExtractor={this._keyExtractor}
                       renderItem={rowData => {
                         return (
                           <BlueListItem