Dynamically resize Home's balance label.

Author: valentinewallace

src/component/label.js

@@ -15,13 +15,15 @@ const balanceStyles = StyleSheet.create({
   numeral: {
     fontFamily: 'WorkSans ExtraLight',
     fontSize: font.sizeXXXL,
-    lineHeight: font.lineHeightXXXL,
+    lineHeight: null,
+    marginLeft: 10,
+    marginRight: 10,
   },
   unit: {
     fontFamily: 'WorkSans Regular',
     fontSize: font.sizeL,
-    lineHeight: 60,
-    marginLeft: 10,
+    paddingTop: 5,
+    marginRight: 10,
   },
 });
 
@@ -35,7 +37,13 @@ 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 = {

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';
@@ -83,7 +84,7 @@ HomeView.propTypes = {
 // Balance Display
 //
 
-const balanceStyles = StyleSheet.create({
+const baseBalanceStyles = {
   wrapper: {
     flex: 1,
     justifyContent: 'center',
@@ -92,7 +93,23 @@ 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,