Dynamically resize Home's balance label.

src/action/wallet.js

@@ -511,6 +511,17 @@ class WalletAction {
       log.error('Getting exchange rate failed', err);
     }
   }
+
+  /**
+   * Set the height of Home's main channel balance label.
+   * This is used for calculating the padding for the top of the btc
+   * unit next to the balance amount.
+   * @param  {number} The height of the balance.
+   * @return {undefined}
+   */
+  setBalanceHeight({ height }) {
+    this._store.balanceHeight = height;
+  }
 }
 
 export default WalletAction;

src/component/label.js

@@ -15,12 +15,11 @@ const balanceStyles = StyleSheet.create({
   numeral: {
     fontFamily: 'WorkSans ExtraLight',
     fontSize: font.sizeXXXL,
-    lineHeight: font.lineHeightXXXL,
+    lineHeight: null,
   },
   unit: {
     fontFamily: 'WorkSans Regular',
     fontSize: font.sizeL,
-    lineHeight: 60,
     marginLeft: 10,
   },
 });
@@ -35,16 +34,26 @@ BalanceLabel.propTypes = {
 };
 
 export const BalanceLabelNumeral = ({ children, style }) => (
-  <Text style={[balanceStyles.numeral, style]}>{children}</Text>
+  <Text
+    style={[balanceStyles.numeral, style]}
+    adjustsFontSizeToFit={true}
+    numberOfLines={1}
+  >
+    {children}
+  </Text>
 );
 
 BalanceLabelNumeral.propTypes = {
   children: PropTypes.string.isRequired,
   style: RNText.propTypes.style,
 };
 
-export const BalanceLabelUnit = ({ children, style }) =>
-  children ? <Text style={[balanceStyles.unit, style]}>{children}</Text> : null;
+export const BalanceLabelUnit = ({ children, style, ...props }) =>
+  children ? (
+    <Text style={[balanceStyles.unit, style]} {...props}>
+      {children}
+    </Text>
+  ) : null;
 
 BalanceLabelUnit.propTypes = {
   children: PropTypes.string,

src/computed/wallet.js

@@ -42,6 +42,9 @@ const ComputedWallet = store => {
       }
       return newPassword.length >= MIN_PASSWORD_LENGTH;
     },
+    get balancePaddingTop() {
+      return calculateTopPadding({ height: store.balanceHeight });
+    },
   });
 };
 
@@ -59,4 +62,20 @@ const getNewPasswordCopy = ({ newPassword }) => {
   return '';
 };
 
+/**
+ * Calculate the appropriate top padding for the btc unit that sits next to the main
+ * home screen balance. This is needed because the height of the balance adjusts
+ * dynamically to its width.
+ * @param  {number} height The height of the balance.
+ * @return {number}        The amount of padding to put at the top of the unit.
+ */
+const calculateTopPadding = ({ height }) => {
+  if (height >= 80) {
+    return 15;
+  } else if (height >= 60) {
+    return 10;
+  }
+  return 5;
+};
+
 export default ComputedWallet;

src/store.js

@@ -37,6 +37,7 @@ export class Store {
       pubKey: null,
       walletAddress: null,
       displayCopied: false,
+      balanceHeight: 80,
       auth: {
         pin: '',
         newPin: '',

src/view/home.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { Header, Title } from '../component/header';
-import { color } from '../component/style';
+import { createStyles, maxWidth } from '../component/media-query';
+import { color, breakWidth, smallBreakWidth } from '../component/style';
 import { H4Text } from '../component/text';
 import Icon from '../component/icon';
 import ChannelIcon from '../asset/icon/channel';
@@ -41,7 +42,12 @@ const HomeView = ({
   transaction,
   nav,
 }) => {
-  const { depositLabel, channelBalanceLabel, unitLabel } = store;
+  const {
+    depositLabel,
+    channelBalanceLabel,
+    unitLabel,
+    balancePaddingTop,
+  } = store;
   return (
     <Background image="purple-gradient-bg">
       <HomeHeader
@@ -56,6 +62,8 @@ const HomeView = ({
           channelBalanceLabel={channelBalanceLabel}
           unitLabel={unitLabel}
           toggleDisplayFiat={() => wallet.toggleDisplayFiat()}
+          setBalanceHeight={({ height }) => wallet.setBalanceHeight({ height })}
+          unitPaddingTop={balancePaddingTop}
         />
         <SendReceiveButton
           goPay={() => payment.init()}
@@ -83,7 +91,7 @@ HomeView.propTypes = {
 // Balance Display
 //
 
-const balanceStyles = StyleSheet.create({
+const baseBalanceStyles = {
   wrapper: {
     flex: 1,
     justifyContent: 'center',
@@ -92,19 +100,44 @@ const balanceStyles = StyleSheet.create({
     marginTop: 30,
     marginBottom: 5,
   },
-});
+};
+
+const balanceStyles = createStyles(
+  baseBalanceStyles,
+
+  maxWidth(breakWidth, {
+    wrapper: {
+      width: 350,
+    },
+  }),
+
+  maxWidth(smallBreakWidth, {
+    wrapper: {
+      width: 250,
+    },
+  })
+);
 
 const BalanceDisplay = ({
   depositLabel,
   channelBalanceLabel,
   unitLabel,
   toggleDisplayFiat,
+  setBalanceHeight,
+  unitPaddingTop,
 }) => (
   <View style={balanceStyles.wrapper}>
     <Button onPress={toggleDisplayFiat}>
       <BalanceLabel>
         <BalanceLabelNumeral>{channelBalanceLabel}</BalanceLabelNumeral>
-        <BalanceLabelUnit>{unitLabel}</BalanceLabelUnit>
+        <BalanceLabelUnit
+          onLayout={event => {
+            setBalanceHeight({ height: event.nativeEvent.layout.height });
+          }}
+          style={{ paddingTop: unitPaddingTop }}
+        >
+          {unitLabel}
+        </BalanceLabelUnit>
       </BalanceLabel>
       <H4Text style={balanceStyles.smallLabel}>Chain Deposit</H4Text>
       <SmallBalanceLabel unit={unitLabel}>{depositLabel}</SmallBalanceLabel>
@@ -117,6 +150,8 @@ BalanceDisplay.propTypes = {
   channelBalanceLabel: PropTypes.string.isRequired,
   unitLabel: PropTypes.string,
   toggleDisplayFiat: PropTypes.func.isRequired,
+  setBalanceHeight: PropTypes.func.isRequired,
+  unitPaddingTop: PropTypes.number.isRequired,
 };
 
 //

test/unit/action/wallet.spec.js

@@ -618,4 +618,11 @@ describe('Action Wallet Unit Tests', () => {
       expect(db.save, 'was not called');
     });
   });
+
+  describe('setBalanceHeight()', () => {
+    it('should set the balance height in the store', () => {
+      wallet.setBalanceHeight({ height: 42 });
+      expect(store.balanceHeight, 'to equal', 42);
+    });
+  });
 });

test/unit/computed/wallet.spec.js

@@ -81,5 +81,23 @@ describe('Computed Wallet Unit Tests', () => {
       expect(store.newPasswordCopy, 'to match', /strong password/);
       expect(store.newPasswordSuccess, 'to equal', true);
     });
+
+    it('should set balance padding for heights > 80', () => {
+      store.balanceHeight = 85;
+      ComputedWallet(store);
+      expect(store.balancePaddingTop, 'to equal', 15);
+    });
+
+    it('should set balance padding for heights < 80', () => {
+      store.balanceHeight = 65;
+      ComputedWallet(store);
+      expect(store.balancePaddingTop, 'to equal', 10);
+    });
+
+    it('should work for heights < 60', () => {
+      store.balanceHeight = 40;
+      ComputedWallet(store);
+      expect(store.balancePaddingTop, 'to equal', 5);
+    });
   });
 });