Merge pull request #629 from BlueWallet/screensize

FIX: Varios UI fixes to accomodate additional screen sizes.

BlueComponents.js

@@ -18,6 +18,7 @@ import {
   Image,
   Keyboard,
   SafeAreaView,
+  InteractionManager,
   InputAccessoryView,
   Clipboard,
   Platform,
@@ -103,7 +104,6 @@ export class BitcoinButton extends Component {
             borderRadius: 5,
             backgroundColor: (this.props.active && BlueApp.settings.hdbackgroundColor) || BlueApp.settings.brandingColor,
             // eslint-disable-next-line
-            width: this.props.style.width,
             minWidth: this.props.style.width,
             // eslint-disable-next-line
             minHeight: this.props.style.height,
@@ -141,7 +141,6 @@ export class LightningButton extends Component {
             borderRadius: 5,
             backgroundColor: (this.props.active && BlueApp.settings.lnbackgroundColor) || BlueApp.settings.brandingColor,
             // eslint-disable-next-line
-            width: this.props.style.width,
             minWidth: this.props.style.width,
             // eslint-disable-next-line
             minHeight: this.props.style.height,
@@ -1363,6 +1362,8 @@ export class BlueTransactionListItem extends Component {
     itemPriceUnit: BitcoinUnit.BTC,
   };
 
+  state = { transactionTimeToReadable: '...' };
+
   txMemo = () => {
     if (BlueApp.tx_metadata[this.props.item.hash] && BlueApp.tx_metadata[this.props.item.hash]['memo']) {
       return BlueApp.tx_metadata[this.props.item.hash]['memo'];
@@ -1524,11 +1525,18 @@ export class BlueTransactionListItem extends Component {
     }
   };
 
+  componentDidMount() {
+    InteractionManager.runAfterInteractions(() => {
+      const transactionTimeToReadable = loc.transactionTimeToReadable(this.props.item.received);
+      this.setState({ transactionTimeToReadable });
+    });
+  }
+
   render() {
     return (
       <BlueListItem
         avatar={this.avatar()}
-        title={loc.transactionTimeToReadable(this.props.item.received)}
+        title={this.state.transactionTimeToReadable}
         subtitle={this.subtitle()}
         onPress={this.onPress}
         badge={{

screen/receive/details.js

@@ -15,6 +15,7 @@ import {
 import PropTypes from 'prop-types';
 import Privacy from '../../Privacy';
 import Share from 'react-native-share';
+import { ScrollView } from 'react-native-gesture-handler';
 import SystemSetting from 'react-native-system-setting';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -95,7 +96,7 @@ export default class ReceiveDetails extends Component {
   render() {
     return (
       <SafeBlueArea style={{ flex: 1 }}>
-        <View style={{ flex: 1, justifyContent: 'space-between' }}>
+        <ScrollView contentContainerStyle={{ justifyContent: 'space-between' }}>
           <View style={{ marginTop: 32, alignItems: 'center', paddingHorizontal: 16 }}>
             {this.state.bip21encoded === undefined ? (
               <View style={{ alignItems: 'center', width: 300, height: 300 }}>
@@ -150,7 +151,7 @@ export default class ReceiveDetails extends Component {
               />
             </View>
           </View>
-        </View>
+        </ScrollView>
       </SafeBlueArea>
     );
   }

screen/transactions/transactionStatus.js

@@ -314,7 +314,6 @@ export default class TransactionsStatus extends Component {
                       }
                       title="Bump Fee"
                     />
-                    <BlueSpacing20 />
                   </React.Fragment>
                 );
               }
@@ -324,13 +323,12 @@ export default class TransactionsStatus extends Component {
                 return (
                   <React.Fragment>
                     <ActivityIndicator />
-                    <BlueSpacing20 />
                   </React.Fragment>
                 );
               } else if (this.state.isRBFCancelPossible === buttonStatus.possible) {
                 return (
                   <React.Fragment>
-                    <TouchableOpacity style={{ marginVertical: 48 }}>
+                    <TouchableOpacity style={{ marginVertical: 16 }}>
                       <Text
                         onPress={() =>
                           this.props.navigation.navigate('RBFCancel', {
@@ -349,7 +347,7 @@ export default class TransactionsStatus extends Component {
             })()}
 
             <TouchableOpacity
-              style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+              style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}
               onPress={() => this.props.navigation.navigate('TransactionDetails', { hash: this.state.tx.hash })}
             >
               <Text style={{ color: '#9aa0aa', fontSize: 14, marginRight: 8 }}>{loc.send.create.details.toLowerCase()}</Text>

screen/wallets/add.js

@@ -138,7 +138,7 @@ export default class WalletsAdd extends Component {
                 });
               }}
               style={{
-                width: 141,
+                width: '45%',
                 height: 88,
               }}
             />
@@ -155,7 +155,7 @@ export default class WalletsAdd extends Component {
                 });
               }}
               style={{
-                width: 141,
+                width: '45%',
                 height: 88,
               }}
             />

screen/wallets/transactions.js

@@ -8,6 +8,7 @@ import { BlueSendButtonIcon, BlueReceiveButtonIcon, BlueTransactionListItem, Blu
 import { Icon } from 'react-native-elements';
 import { LightningCustodianWallet } from '../../class';
 import Handoff from 'react-native-handoff';
+import { ScrollView } from 'react-native-gesture-handler';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
@@ -173,7 +174,7 @@ export default class WalletTransactions extends Component {
 
   renderListFooterComponent = () => {
     // if not all txs rendered - display indicator
-    return (this.getTransactions(Infinity).length > this.state.limit && <ActivityIndicator />) || <View />;
+    return (this.getTransactions(Infinity).length > this.state.limit && <ActivityIndicator style={{ marginVertical: 20 }} />) || <View />;
   };
 
   renderListHeaderComponent = () => {
@@ -230,7 +231,7 @@ export default class WalletTransactions extends Component {
           wallet={this.state.wallet}
           onWalletUnitChange={wallet =>
             InteractionManager.runAfterInteractions(async () => {
-              this.setState({ wallet }, () => BlueApp.saveToDisk());
+              this.setState({ wallet }, () => InteractionManager.runAfterInteractions(() => BlueApp.saveToDisk()));
             })
           }
         />
@@ -250,11 +251,9 @@ export default class WalletTransactions extends Component {
                   margin: 16,
                   backgroundColor: '#f2f2f2',
                   borderRadius: 9,
-                  minWidth: 343,
                   minHeight: 49,
                   justifyContent: 'center',
                   alignItems: 'center',
-                  alignSelf: 'center',
                 }}
               >
                 <Text style={{ color: '#062453', fontSize: 18 }}>marketplace</Text>
@@ -281,7 +280,7 @@ export default class WalletTransactions extends Component {
             ListHeaderComponent={this.renderListHeaderComponent}
             ListFooterComponent={this.renderListFooterComponent}
             ListEmptyComponent={
-              <View style={{ top: 50, minHeight: 200, paddingHorizontal: 16 }}>
+              <ScrollView style={{ minHeight: 100 }}  contentContainerStyle={{ flex: 1, justifyContent: 'center', paddingHorizontal: 16 }}>
                 <Text
                   numberOfLines={0}
                   style={{
@@ -323,7 +322,7 @@ export default class WalletTransactions extends Component {
                     {loc.wallets.list.tap_here_to_buy}
                   </Text>
                 )}
-              </View>
+              </ScrollView>
             }
             refreshControl={
               <RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.showShowFlatListRefreshControl} />
@@ -331,6 +330,7 @@ export default class WalletTransactions extends Component {
             data={this.state.dataSource}
             keyExtractor={this._keyExtractor}
             renderItem={this.renderItem}
+            contentInset={{ top: 0, left: 0, bottom: 90, right: 0 }}
           />
         </View>
         <View
@@ -342,7 +342,6 @@ export default class WalletTransactions extends Component {
             bottom: 30,
             borderRadius: 30,
             minHeight: 48,
-            flex: 0.84,
             overflow: 'hidden',
           }}
         >