Merge branch 'drop-styles-helper'

49 files changed, 937 insertions, 957 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index 700f33af2b..41aea6d894 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -1,4 +1,5 @@
 // @flow
+
 import moment from 'moment';
 import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
diff --git a/app/components/AccountInput.js b/app/components/AccountInput.js
index 32ad0aeb22..6e9dc34a7f 100644
--- a/app/components/AccountInput.js
+++ b/app/components/AccountInput.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { TextInput } from 'reactxp';
 import { formatAccount } from '../lib/formatters';
diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js
index a96a8fcff6..a9cc1bf6ef 100644
--- a/app/components/AccountStyles.js
+++ b/app/components/AccountStyles.js
@@ -1,78 +1,74 @@
 // @flow
 
-import { createViewStyles, createTextStyles } from '../lib/styles';
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    account: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    account__container: {
-      flexDirection: 'column',
-      flex: 1,
-      paddingBottom: 48,
-    },
-    account__scrollview: {
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '100%',
-    },
-    account__content: {
-      flexDirection: 'column',
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: 'auto',
-    },
-    account__main: {
-      marginBottom: 24,
-    },
-    account__row: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 24,
-      paddingRight: 24,
-      marginBottom: 24,
-    },
-    account__footer: {
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
-    account__buy_button: {
-      marginBottom: 24,
-    },
+  account: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
   }),
-  ...createTextStyles({
-    account__row_label: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      letterSpacing: -0.2,
-      color: colors.white60,
-      marginBottom: 9,
-    },
-    account__row_value: {
-      fontFamily: 'Open Sans',
-      fontSize: 16,
-      lineHeight: 19,
-      fontWeight: '800',
-      color: colors.white,
-    },
-    account__out_of_time: {
-      fontFamily: 'Open Sans',
-      fontSize: 16,
-      fontWeight: '800',
-      color: colors.red,
-    },
-    account__footer_label: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      letterSpacing: -0.2,
-      color: colors.white80,
-    },
+  account__container: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+    paddingBottom: 48,
+  }),
+  account__scrollview: Styles.createViewStyle({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
+  }),
+  account__content: Styles.createViewStyle({
+    flexDirection: 'column',
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  }),
+  account__main: Styles.createViewStyle({
+    marginBottom: 24,
+  }),
+  account__row: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 24,
+    paddingRight: 24,
+    marginBottom: 24,
+  }),
+  account__footer: Styles.createViewStyle({
+    paddingLeft: 24,
+    paddingRight: 24,
+  }),
+  account__buy_button: Styles.createViewStyle({
+    marginBottom: 24,
+  }),
+  account__row_label: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: -0.2,
+    color: colors.white60,
+    marginBottom: 9,
+  }),
+  account__row_value: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    lineHeight: 19,
+    fontWeight: '800',
+    color: colors.white,
+  }),
+  account__out_of_time: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    fontWeight: '800',
+    color: colors.red,
+  }),
+  account__footer_label: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: -0.2,
+    color: colors.white80,
   }),
 };
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index 63ab4a3f1c..fc2f4a8587 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -1,112 +1,109 @@
 // @flow
 
-import { createViewStyles, createTextStyles } from '../lib/styles';
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    advanced_settings: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    advanced_settings__container: {
-      flexDirection: 'column',
-      flex: 1,
-    },
-    advanced_settings__scrollview: {
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '100%',
-    },
-    advanced_settings__content: {
-      flexDirection: 'column',
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      overflow: 'visible',
-    },
-    advanced_settings__cell: {
-      cursor: 'default',
-      backgroundColor: colors.green,
-      flexDirection: 'row',
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingLeft: 24,
-      paddingRight: 24,
-      marginBottom: 1,
-      justifyContent: 'flex-start',
-    },
-    advanced_settings__cell_hover: {
-      backgroundColor: colors.blue80,
-    },
-    advanced_settings__cell_selected_hover: {
-      backgroundColor: colors.green,
-    },
-    advanced_settings__cell_spacer: {
-      height: 24,
-    },
-    advanced_settings__cell_icon: {
-      width: 24,
-      height: 24,
-      marginRight: 8,
-      flex: 0,
-      color: colors.white80,
-    },
-    advanced_settings__cell_dimmed: {
-      cursor: 'default',
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingLeft: 24,
-      paddingRight: 24,
-      marginBottom: 1,
-      backgroundColor: colors.blue40,
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-    },
-    advanced_settings__cell_footer: {
-      paddingTop: 8,
-      paddingRight: 24,
-      paddingBottom: 24,
-      paddingLeft: 24,
-    },
-    advanced_settings__cell_label_container: {
-      paddingTop: 14,
-      paddingRight: 12,
-      paddingBottom: 14,
-      paddingLeft: 24,
-      flexGrow: 1,
-    },
+  advanced_settings: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
   }),
-  ...createTextStyles({
-    advanced_settings__section_title: {
-      backgroundColor: colors.blue,
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingLeft: 24,
-      paddingRight: 24,
-      marginBottom: 1,
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      color: colors.white,
-    },
-    advanced_settings__cell_label: {
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      letterSpacing: -0.2,
-      color: colors.white,
-      flex: 0,
-    },
-    advanced_settings__cell_footer_label: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      letterSpacing: -0.2,
-      color: colors.white80,
-    },
+  advanced_settings__container: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  advanced_settings__scrollview: Styles.createViewStyle({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
+  }),
+  advanced_settings__content: Styles.createViewStyle({
+    flexDirection: 'column',
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+  }),
+  advanced_settings__cell: Styles.createViewStyle({
+    cursor: 'default',
+    backgroundColor: colors.green,
+    flexDirection: 'row',
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 24,
+    paddingRight: 24,
+    marginBottom: 1,
+    justifyContent: 'flex-start',
+  }),
+  advanced_settings__cell_hover: Styles.createViewStyle({
+    backgroundColor: colors.blue80,
+  }),
+  advanced_settings__cell_selected_hover: Styles.createViewStyle({
+    backgroundColor: colors.green,
+  }),
+  advanced_settings__cell_spacer: Styles.createViewStyle({
+    height: 24,
+  }),
+  advanced_settings__cell_icon: Styles.createViewStyle({
+    width: 24,
+    height: 24,
+    marginRight: 8,
+    flex: 0,
+    color: colors.white80,
+  }),
+  advanced_settings__cell_dimmed: Styles.createViewStyle({
+    cursor: 'default',
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 24,
+    paddingRight: 24,
+    marginBottom: 1,
+    backgroundColor: colors.blue40,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  }),
+  advanced_settings__cell_footer: Styles.createViewStyle({
+    paddingTop: 8,
+    paddingRight: 24,
+    paddingBottom: 24,
+    paddingLeft: 24,
+  }),
+  advanced_settings__cell_label_container: Styles.createViewStyle({
+    paddingTop: 14,
+    paddingRight: 12,
+    paddingBottom: 14,
+    paddingLeft: 24,
+    flexGrow: 1,
+  }),
+
+  advanced_settings__section_title: Styles.createTextStyle({
+    backgroundColor: colors.blue,
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 24,
+    paddingRight: 24,
+    marginBottom: 1,
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    color: colors.white,
+  }),
+  advanced_settings__cell_label: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    letterSpacing: -0.2,
+    color: colors.white,
+    flex: 0,
+  }),
+  advanced_settings__cell_footer_label: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: -0.2,
+    color: colors.white80,
   }),
 };
diff --git a/app/components/AppButton.js b/app/components/AppButton.js
index af8f36b47c..dd69ab1dc3 100644
--- a/app/components/AppButton.js
+++ b/app/components/AppButton.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Button, Text, Component } from 'reactxp';
 import styles from './AppButtonStyles';
diff --git a/app/components/AppButtonStyles.js b/app/components/AppButtonStyles.js
index d84b78b8a3..a007d4cdf3 100644
--- a/app/components/AppButtonStyles.js
+++ b/app/components/AppButtonStyles.js
@@ -1,64 +1,63 @@
-import { createViewStyles, createTextStyles } from '../lib/styles';
+// @flow
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    red: {
-      backgroundColor: colors.red,
-    },
-    redHover: {
-      backgroundColor: colors.red95,
-    },
-    green: {
-      backgroundColor: colors.green,
-    },
-    greenHover: {
-      backgroundColor: colors.green90,
-    },
-    blue: {
-      backgroundColor: colors.blue80,
-    },
-    blueHover: {
-      backgroundColor: colors.blue60,
-    },
-    white80: {
-      color: colors.white80,
-    },
-    white: {
-      color: colors.white,
-    },
-    icon: {
-      position: 'absolute',
-      alignSelf: 'flex-end',
-      right: 8,
-      marginLeft: 8,
-    },
-    iconTransparent: {
-      position: 'absolute',
-      alignSelf: 'flex-end',
-      right: 42,
-    },
-    common: {
-      cursor: 'default',
-      paddingTop: 9,
-      paddingLeft: 9,
-      paddingRight: 9,
-      paddingBottom: 9,
-      borderRadius: 4,
-      flex: 1,
-      flexDirection: 'column',
-      alignContent: 'center',
-      justifyContent: 'center',
-    },
+  red: Styles.createViewStyle({
+    backgroundColor: colors.red,
+  }),
+  redHover: Styles.createViewStyle({
+    backgroundColor: colors.red95,
+  }),
+  green: Styles.createViewStyle({
+    backgroundColor: colors.green,
+  }),
+  greenHover: Styles.createViewStyle({
+    backgroundColor: colors.green90,
+  }),
+  blue: Styles.createViewStyle({
+    backgroundColor: colors.blue80,
+  }),
+  blueHover: Styles.createViewStyle({
+    backgroundColor: colors.blue60,
   }),
-  ...createTextStyles({
-    label: {
-      alignSelf: 'center',
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      flex: 1,
-    },
+  white80: Styles.createViewStyle({
+    color: colors.white80,
+  }),
+  white: Styles.createViewStyle({
+    color: colors.white,
+  }),
+  icon: Styles.createViewStyle({
+    position: 'absolute',
+    alignSelf: 'flex-end',
+    right: 8,
+    marginLeft: 8,
+  }),
+  iconTransparent: Styles.createViewStyle({
+    position: 'absolute',
+    alignSelf: 'flex-end',
+    right: 42,
+  }),
+  common: Styles.createViewStyle({
+    cursor: 'default',
+    paddingTop: 9,
+    paddingLeft: 9,
+    paddingRight: 9,
+    paddingBottom: 9,
+    borderRadius: 4,
+    flex: 1,
+    flexDirection: 'column',
+    alignContent: 'center',
+    justifyContent: 'center',
+  }),
+
+  label: Styles.createTextStyle({
+    alignSelf: 'center',
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    flex: 1,
   }),
 };
diff --git a/app/components/BlurAppButtonStyles.android.js b/app/components/BlurAppButtonStyles.android.js
index c39e44cdd5..5f185176c5 100644
--- a/app/components/BlurAppButtonStyles.android.js
+++ b/app/components/BlurAppButtonStyles.android.js
@@ -1,20 +1,19 @@
-import { colors } from '../../config';
+// @flow
 
-import { createViewStyles } from '../../lib/styles';
+import { Styles } from 'reactxp';
+import { colors } from '../../config';
 
 export default {
-  ...createViewStyles({
-    transparent: {
-      backgroundColor: colors.white20,
-    },
-    transparentHover: {
-      backgroundColor: colors.white40,
-    },
-    redTransparent: {
-      backgroundColor: colors.red40,
-    },
-    redTransparentHover: {
-      backgroundColor: colors.red45,
-    },
+  transparent: Styles.createViewStyle({
+    backgroundColor: colors.white20,
+  }),
+  transparentHover: Styles.createViewStyle({
+    backgroundColor: colors.white40,
+  }),
+  redTransparent: Styles.createViewStyle({
+    backgroundColor: colors.red40,
+  }),
+  redTransparentHover: Styles.createViewStyle({
+    backgroundColor: colors.red45,
   }),
 };
diff --git a/app/components/BlurAppButtonStyles.js b/app/components/BlurAppButtonStyles.js
index 18c16013a1..45146a2e78 100644
--- a/app/components/BlurAppButtonStyles.js
+++ b/app/components/BlurAppButtonStyles.js
@@ -1,23 +1,23 @@
-import { createViewStyles } from '../lib/styles';
+// @flow
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    transparent: {
-      backgroundColor: colors.white20,
-      backdropFilter: 'blur(4px)',
-    },
-    transparentHover: {
-      backgroundColor: colors.white40,
-      backdropFilter: 'blur(4px)',
-    },
-    redTransparent: {
-      backgroundColor: colors.red40,
-      backdropFilter: 'blur(4px)',
-    },
-    redTransparentHover: {
-      backgroundColor: colors.red45,
-      backdropFilter: 'blur(4px)',
-    },
+  transparent: Styles.createViewStyle({
+    backgroundColor: colors.white20,
+    backdropFilter: 'blur(4px)',
+  }),
+  transparentHover: Styles.createViewStyle({
+    backgroundColor: colors.white40,
+    backdropFilter: 'blur(4px)',
+  }),
+  redTransparent: Styles.createViewStyle({
+    backgroundColor: colors.red40,
+    backdropFilter: 'blur(4px)',
+  }),
+  redTransparentHover: Styles.createViewStyle({
+    backgroundColor: colors.red45,
+    backdropFilter: 'blur(4px)',
   }),
 };
diff --git a/app/components/Cell.js b/app/components/Cell.js
index 80b783352f..0fd4de40e6 100644
--- a/app/components/Cell.js
+++ b/app/components/Cell.js
@@ -1,53 +1,49 @@
 // @flow
 
 import * as React from 'react';
-import { Button, Text, Component, Types } from 'reactxp';
+import { Button, Text, Component, Styles, Types } from 'reactxp';
 import Img from './Img';
-import { createViewStyles, createTextStyles } from '../lib/styles';
 import { colors } from '../config';
 
 const styles = {
-  ...createViewStyles({
-    cell: {
-      backgroundColor: colors.blue,
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingLeft: 16,
-      paddingRight: 16,
-      marginBottom: 1,
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      alignContent: 'center',
-      cursor: 'default',
-    },
-    cellHover: {
-      backgroundColor: colors.blue80,
-    },
-    icon: {
-      color: colors.white60,
-      marginLeft: 8,
-    },
+  cell: Styles.createViewStyle({
+    backgroundColor: colors.blue,
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginBottom: 1,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    cursor: 'default',
   }),
-  ...createTextStyles({
-    label: {
-      color: colors.white,
-      alignSelf: 'center',
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      flex: 1,
-      marginLeft: 8,
-    },
-    subtext: {
-      color: colors.white60,
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '800',
-      flex: 0,
-      textAlign: 'right',
-    },
+  cellHover: Styles.createViewStyle({
+    backgroundColor: colors.blue80,
+  }),
+  icon: Styles.createViewStyle({
+    color: colors.white60,
+    marginLeft: 8,
+  }),
+
+  label: Styles.createTextStyle({
+    color: colors.white,
+    alignSelf: 'center',
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    flex: 1,
+    marginLeft: 8,
+  }),
+  subtext: Styles.createTextStyle({
+    color: colors.white60,
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '800',
+    flex: 0,
+    textAlign: 'right',
   }),
 };
 
diff --git a/app/components/ConnectStyles.js b/app/components/ConnectStyles.js
index 0db0d75179..c6f89a49b6 100644
--- a/app/components/ConnectStyles.js
+++ b/app/components/ConnectStyles.js
@@ -1,139 +1,137 @@
 // @flow
-import { createViewStyles, createTextStyles } from '../lib/styles';
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    connect: {
-      flex: 1,
-    },
-    map: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 0,
-      height: '100%',
-      width: '100%',
-    },
-    container: {
-      flexDirection: 'column',
-      flex: 1,
-      position: 'relative' /* need this for z-index to work to cover map */,
-      zIndex: 1,
-    },
-    footer: {
-      flex: 0,
-      paddingBottom: 16,
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
-    blocking_container: {
-      width: '100%',
-      position: 'absolute',
-    },
-    blocking_icon: {
-      width: 10,
-      height: 10,
-      flex: 0,
-      display: 'flex',
-      borderRadius: 5,
-      marginTop: 4,
-      marginRight: 8,
-      backgroundColor: colors.red,
-    },
-    status: {
-      paddingTop: 0,
-      paddingLeft: 24,
-      paddingRight: 24,
-      paddingBottom: 0,
-      marginTop: 186,
-      flex: 1,
-    },
-    status_icon: {
-      position: 'absolute',
-      alignSelf: 'center',
-      width: 60,
-      height: 60,
-      marginTop: 94,
-    },
-    switch_location_button: {
-      marginBottom: 16,
-    },
+  connect: Styles.createViewStyle({
+    flex: 1,
+  }),
+  map: Styles.createViewStyle({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 0,
+    height: '100%',
+    width: '100%',
+  }),
+  container: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+    position: 'relative' /* need this for z-index to work to cover map */,
+    zIndex: 1,
+  }),
+  footer: Styles.createViewStyle({
+    flex: 0,
+    paddingBottom: 16,
+    paddingLeft: 24,
+    paddingRight: 24,
+  }),
+  blocking_container: Styles.createViewStyle({
+    width: '100%',
+    position: 'absolute',
+  }),
+  blocking_icon: Styles.createViewStyle({
+    width: 10,
+    height: 10,
+    flex: 0,
+    display: 'flex',
+    borderRadius: 5,
+    marginTop: 4,
+    marginRight: 8,
+    backgroundColor: colors.red,
+  }),
+  status: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 0,
+    marginTop: 186,
+    flex: 1,
+  }),
+  status_icon: Styles.createViewStyle({
+    position: 'absolute',
+    alignSelf: 'center',
+    width: 60,
+    height: 60,
+    marginTop: 94,
+  }),
+  switch_location_button: Styles.createViewStyle({
+    marginBottom: 16,
+  }),
+
+  blocking_message: Styles.createTextStyle({
+    display: 'flex',
+    flexDirection: 'row',
+    fontFamily: 'Open Sans',
+    fontSize: 12,
+    fontWeight: '800',
+    lineHeight: 17,
+    paddingTop: 8,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingBottom: 8,
+    color: colors.white60,
+    backgroundColor: colors.blue,
+  }),
+  server_label: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 32,
+    fontWeight: '900',
+    lineHeight: 44,
+    letterSpacing: -0.7,
+    color: colors.white,
+    marginBottom: 7,
+    flex: 0,
+  }),
+  error_title: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 32,
+    fontWeight: '900',
+    lineHeight: 40,
+    color: colors.white,
+    marginBottom: 8,
+  }),
+  error_message: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.white,
+    marginBottom: 24,
+  }),
+  status_security: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    fontWeight: '800',
+    lineHeight: 22,
+    marginBottom: 4,
+    color: colors.white,
+  }),
+  status_security__secure: Styles.createTextStyle({
+    color: colors.green,
+  }),
+  status_security__unsecured: Styles.createTextStyle({
+    color: colors.red,
+  }),
+  status_ipaddress: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    fontWeight: '800',
+    color: colors.white,
+  }),
+  status_ipaddress__invisible: Styles.createTextStyle({
+    opacity: 0,
   }),
-  ...createTextStyles({
-    blocking_message: {
-      display: 'flex',
-      flexDirection: 'row',
-      fontFamily: 'Open Sans',
-      fontSize: 12,
-      fontWeight: '800',
-      lineHeight: 17,
-      paddingTop: 8,
-      paddingLeft: 20,
-      paddingRight: 20,
-      paddingBottom: 8,
-      color: colors.white60,
-      backgroundColor: colors.blue,
-    },
-    server_label: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 44,
-      letterSpacing: -0.7,
-      color: colors.white,
-      marginBottom: 7,
-      flex: 0,
-    },
-    error_title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-      marginBottom: 8,
-    },
-    error_message: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      color: colors.white,
-      marginBottom: 24,
-    },
-    status_security: {
-      fontFamily: 'Open Sans',
-      fontSize: 16,
-      fontWeight: '800',
-      lineHeight: 22,
-      marginBottom: 4,
-      color: colors.white,
-    },
-    status_security__secure: {
-      color: colors.green,
-    },
-    status_security__unsecured: {
-      color: colors.red,
-    },
-    status_ipaddress: {
-      fontFamily: 'Open Sans',
-      fontSize: 16,
-      fontWeight: '800',
-      color: colors.white,
-    },
-    status_ipaddress__invisible: {
-      opacity: 0,
-    },
-    status_location: {
-      fontFamily: 'DINPro',
-      fontSize: 38,
-      fontWeight: '900',
-      lineHeight: 40,
-      overflow: 'hidden',
-      letterSpacing: -0.9,
-      color: colors.white,
-      marginBottom: 4,
-    },
+  status_location: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 38,
+    fontWeight: '900',
+    lineHeight: 40,
+    overflow: 'hidden',
+    letterSpacing: -0.9,
+    color: colors.white,
+    marginBottom: 4,
   }),
 };
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index 02b1d86e31..8a82ba7843 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,4 +1,5 @@
 // @flow
+
 import React from 'react';
 import { Component, Text, Button, View, Styles } from 'reactxp';
 import Img from './Img';
diff --git a/app/components/Img.android.js b/app/components/Img.android.js
index 229cb2c1b7..778562fe3d 100644
--- a/app/components/Img.android.js
+++ b/app/components/Img.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import React, { Component } from 'react';
 import { StyleSheet } from 'react-native';
 import { Image, Styles } from 'reactxp';
diff --git a/app/components/Img.js b/app/components/Img.js
index 6b34f99360..6919eb0740 100644
--- a/app/components/Img.js
+++ b/app/components/Img.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { View, Component, Types } from 'reactxp';
 
diff --git a/app/components/Launch.js b/app/components/Launch.js
index bab877dd53..37dd38d73f 100644
--- a/app/components/Launch.js
+++ b/app/components/Launch.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Component, Styles, View, Text } from 'reactxp';
 import { Layout, Container, Header } from './Layout';
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 1eb6984797..42e96640c0 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { View, Component } from 'reactxp';
 import HeaderBar from './HeaderBar';
diff --git a/app/components/LayoutStyles.js b/app/components/LayoutStyles.js
index b3ef4f462e..7db2a0225b 100644
--- a/app/components/LayoutStyles.js
+++ b/app/components/LayoutStyles.js
@@ -1,20 +1,19 @@
 // @flow
-import { createViewStyles } from '../lib/styles';
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    layout: {
-      flexDirection: 'column',
-      flex: 1,
-    },
-    header: {
-      flex: 0,
-    },
-    container: {
-      flex: 1,
-      backgroundColor: colors.blue,
-      overflow: 'hidden',
-    },
+  layout: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  header: Styles.createViewStyle({
+    flex: 0,
+  }),
+  container: Styles.createViewStyle({
+    flex: 1,
+    backgroundColor: colors.blue,
+    overflow: 'hidden',
   }),
 };
diff --git a/app/components/Login.js b/app/components/Login.js
index b410f80553..52fe8791b6 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Component, Text, View, Animated, Styles, UserInterface } from 'reactxp';
 import { Layout, Container, Header } from './Layout';
diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js
index 61e5026a71..e385f5115c 100644
--- a/app/components/LoginStyles.js
+++ b/app/components/LoginStyles.js
@@ -1,182 +1,174 @@
 // @flow
-import { createViewStyles, createTextStyles } from '../lib/styles';
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    login_footer: {
-      flex: 0,
-      paddingTop: 16,
-      paddingBottom: 24,
-      paddingLeft: 24,
-      paddingRight: 24,
-      backgroundColor: colors.darkBlue,
-    },
-    status_icon: {
-      flex: 0,
-      marginBottom: 30,
-      alignItems: 'center',
-    },
-    login_form: {
-      flex: 1,
-      flexDirection: 'column',
-      overflow: 'visible',
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 24,
-      paddingRight: 24,
-      marginTop: 83,
-      marginBottom: 0,
-      marginRight: 0,
-      marginLeft: 0,
-    },
-    account_input_group: {
-      borderWidth: 2,
-      borderRadius: 8,
-      borderColor: 'transparent',
-    },
-    account_input_group__active: {
-      borderColor: colors.darkBlue,
-    },
-    account_input_group__inactive: {
-      opacity: 0.6,
-    },
-    account_input_group__error: {
-      borderColor: colors.red40,
-      color: colors.red,
-    },
-    account_input_textfield: {
-      color: colors.blue,
-    },
-    account_input_backdrop: {
-      backgroundColor: colors.white,
-      borderColor: colors.darkBlue,
-      flexDirection: 'row',
-    },
-    account_input_textfield__inactive: {
-      backgroundColor: colors.white60,
-    },
-    input_button: {
-      flex: 0,
-      borderWidth: 0,
-      width: 48,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    input_button__invisible: {
-      backgroundColor: colors.white,
-      opacity: 0,
-    },
-    input_arrow: {
-      flex: 0,
-      borderWidth: 0,
-      width: 48,
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: colors.blue20,
-    },
-    input_arrow__active: {
-      color: colors.white,
-    },
-    input_arrow__invisible: {
-      color: colors.white,
-      opacity: 0,
-    },
-    account_dropdown__spacer: {
-      height: 1,
-      backgroundColor: colors.darkBlue,
-    },
-    account_dropdown__item: {
-      paddingTop: 0,
-      paddingRight: 0,
-      paddingLeft: 0,
-      paddingBottom: 0,
-      marginBottom: 0,
-      flexDirection: 'row',
-      alignItems: 'stretch',
-      backgroundColor: colors.white60,
-      cursor: 'default',
-    },
-    account_dropdown__item_hover: {
-      backgroundColor: colors.white40,
-    },
-    account_dropdown__remove: {
-      justifyContent: 'center',
-      color: colors.blue40,
-      paddingTop: 10,
-      paddingRight: 12,
-      paddingBottom: 12,
-      paddingLeft: 12,
-      marginLeft: 0,
-    },
-    account_dropdown__remove_cell_hover: {
-      color: colors.blue60,
-    },
-    account_dropdown__remove_hover: {
-      color: colors.blue,
-    },
-    account_dropdown__label_hover: {
-      color: colors.blue,
-    },
+  login_footer: Styles.createViewStyle({
+    flex: 0,
+    paddingTop: 16,
+    paddingBottom: 24,
+    paddingLeft: 24,
+    paddingRight: 24,
+    backgroundColor: colors.darkBlue,
+  }),
+  status_icon: Styles.createViewStyle({
+    flex: 0,
+    marginBottom: 30,
+    alignItems: 'center',
+  }),
+  login_form: Styles.createViewStyle({
+    flex: 1,
+    flexDirection: 'column',
+    overflow: 'visible',
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 24,
+    paddingRight: 24,
+    marginTop: 83,
+    marginBottom: 0,
+    marginRight: 0,
+    marginLeft: 0,
+  }),
+  account_input_group: Styles.createViewStyle({
+    borderWidth: 2,
+    borderRadius: 8,
+    borderColor: 'transparent',
+  }),
+  account_input_group__active: Styles.createViewStyle({
+    borderColor: colors.darkBlue,
+  }),
+  account_input_group__inactive: Styles.createViewStyle({
+    opacity: 0.6,
+  }),
+  account_input_group__error: Styles.createViewStyle({
+    borderColor: colors.red40,
+    color: colors.red,
+  }),
+  account_input_backdrop: Styles.createViewStyle({
+    backgroundColor: colors.white,
+    borderColor: colors.darkBlue,
+    flexDirection: 'row',
+  }),
+  input_button: Styles.createViewStyle({
+    flex: 0,
+    borderWidth: 0,
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+  input_button__invisible: Styles.createViewStyle({
+    backgroundColor: colors.white,
+    opacity: 0,
+  }),
+  input_arrow: Styles.createViewStyle({
+    flex: 0,
+    borderWidth: 0,
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: colors.blue20,
+  }),
+  input_arrow__active: Styles.createViewStyle({
+    color: colors.white,
+  }),
+  input_arrow__invisible: Styles.createViewStyle({
+    color: colors.white,
+    opacity: 0,
+  }),
+  account_dropdown__spacer: Styles.createViewStyle({
+    height: 1,
+    backgroundColor: colors.darkBlue,
+  }),
+  account_dropdown__item: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingBottom: 0,
+    marginBottom: 0,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    backgroundColor: colors.white60,
+    cursor: 'default',
+  }),
+  account_dropdown__item_hover: Styles.createViewStyle({
+    backgroundColor: colors.white40,
+  }),
+  account_dropdown__remove: Styles.createViewStyle({
+    justifyContent: 'center',
+    color: colors.blue40,
+    paddingTop: 10,
+    paddingRight: 12,
+    paddingBottom: 12,
+    paddingLeft: 12,
+    marginLeft: 0,
+  }),
+  account_dropdown__remove_cell_hover: Styles.createViewStyle({
+    color: colors.blue60,
+  }),
+  account_dropdown__remove_hover: Styles.createViewStyle({
+    color: colors.blue,
+  }),
+  account_dropdown__label_hover: Styles.createViewStyle({
+    color: colors.blue,
+  }),
+
+  login_footer__prompt: Styles.createTextStyle({
+    color: colors.white80,
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    letterSpacing: -0.2,
+    marginBottom: 8,
+  }),
+  title: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 32,
+    fontWeight: '900',
+    lineHeight: 44,
+    letterSpacing: -0.7,
+    color: colors.white,
+    marginBottom: 7,
+    flex: 0,
+  }),
+  subtitle: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    lineHeight: 15,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    color: colors.white80,
+    marginBottom: 8,
+  }),
+  account_input_textfield: Styles.createTextInputStyle({
+    borderWidth: 0,
+    paddingTop: 10,
+    paddingRight: 12,
+    paddingLeft: 12,
+    paddingBottom: 12,
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    color: colors.blue,
+    backgroundColor: 'transparent',
+    flex: 1,
   }),
-  ...createTextStyles({
-    login_footer__prompt: {
-      color: colors.white80,
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 18,
-      letterSpacing: -0.2,
-      marginBottom: 8,
-    },
-    title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 44,
-      letterSpacing: -0.7,
-      color: colors.white,
-      marginBottom: 7,
-      flex: 0,
-    },
-    subtitle: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      lineHeight: 15,
-      fontWeight: '600',
-      letterSpacing: -0.2,
-      color: colors.white80,
-      marginBottom: 8,
-    },
-    account_input_textfield: {
-      borderWidth: 0,
-      paddingTop: 10,
-      paddingRight: 12,
-      paddingLeft: 12,
-      paddingBottom: 12,
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      color: colors.blue,
-      backgroundColor: 'transparent',
-      flex: 1,
-    },
-    account_dropdown__label: {
-      flex: 1,
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      color: colors.blue80,
-      borderWidth: 0,
-      textAlign: 'left',
-      marginLeft: 0,
-      paddingTop: 10,
-      paddingRight: 0,
-      paddingLeft: 12,
-      paddingBottom: 12,
-      cursor: 'default',
-    },
+  account_dropdown__label: Styles.createTextStyle({
+    flex: 1,
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    color: colors.blue80,
+    borderWidth: 0,
+    textAlign: 'left',
+    marginLeft: 0,
+    paddingTop: 10,
+    paddingRight: 0,
+    paddingLeft: 12,
+    paddingBottom: 12,
+    cursor: 'default',
   }),
 };
diff --git a/app/components/PlatformWindow.android.js b/app/components/PlatformWindow.android.js
index 9d15466f56..32f9a4f3bf 100644
--- a/app/components/PlatformWindow.android.js
+++ b/app/components/PlatformWindow.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { KeyboardAvoidingView } from 'react-native';
 
diff --git a/app/components/PlatformWindow.js b/app/components/PlatformWindow.js
index 10b689eb42..c1133af0c2 100644
--- a/app/components/PlatformWindow.js
+++ b/app/components/PlatformWindow.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Component, View, Styles } from 'reactxp';
 
diff --git a/app/components/Preferences.js b/app/components/Preferences.js
index 3fe803a156..7e57df3909 100644
--- a/app/components/Preferences.js
+++ b/app/components/Preferences.js
@@ -1,4 +1,5 @@
 // @flow
+
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { Layout, Container } from './Layout';
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index cafd37a016..3a39ce3c5f 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -1,62 +1,60 @@
 // @flow
-import { createViewStyles, createTextStyles } from '../lib/styles';
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    preferences: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    preferences__container: {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: 1,
-    },
-    preferences__content: {
-      flexDirection: 'column',
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: 'auto',
-    },
-    preferences__cell: {
-      backgroundColor: colors.blue,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    preferences__cell_accessory: {
-      marginRight: 12,
-    },
-    preferences__cell_footer: {
-      paddingTop: 8,
-      paddingRight: 24,
-      paddingBottom: 24,
-      paddingLeft: 24,
-    },
-    preferences__cell_label_container: {
-      paddingTop: 14,
-      paddingRight: 12,
-      paddingBottom: 14,
-      paddingLeft: 24,
-      flexGrow: 1,
-    },
+  preferences: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
+  }),
+  preferences__container: Styles.createViewStyle({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  preferences__content: Styles.createViewStyle({
+    flexDirection: 'column',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  }),
+  preferences__cell: Styles.createViewStyle({
+    backgroundColor: colors.blue,
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  preferences__cell_accessory: Styles.createViewStyle({
+    marginRight: 12,
+  }),
+  preferences__cell_footer: Styles.createViewStyle({
+    paddingTop: 8,
+    paddingRight: 24,
+    paddingBottom: 24,
+    paddingLeft: 24,
+  }),
+  preferences__cell_label_container: Styles.createViewStyle({
+    paddingTop: 14,
+    paddingRight: 12,
+    paddingBottom: 14,
+    paddingLeft: 24,
+    flexGrow: 1,
+  }),
+
+  preferences__cell_label: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 20,
+    fontWeight: '900',
+    lineHeight: 26,
+    letterSpacing: -0.2,
+    color: colors.white,
   }),
-  ...createTextStyles({
-    preferences__cell_label: {
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      letterSpacing: -0.2,
-      color: colors.white,
-    },
-    preferences__cell_footer_label: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      letterSpacing: -0.2,
-      color: colors.white80,
-    },
+  preferences__cell_footer_label: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: -0.2,
+    color: colors.white80,
   }),
 };
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index afa765dba6..0d737c3224 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { View } from 'reactxp';
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index 424f535ae1..57b0653a45 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -1,88 +1,87 @@
 // @flow
-import { createViewStyles } from '../lib/styles';
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    select_location: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    container: {
-      flexDirection: 'column',
-      flex: 1,
-    },
-    title_header: {
-      paddingBottom: 0,
-    },
-    subtitle_header: {
-      paddingTop: 0,
-    },
-    content: {
-      overflow: 'visible',
-    },
-    relay_status: {
-      width: 16,
-      height: 16,
-      borderRadius: 8,
-      marginLeft: 4,
-      marginRight: 4,
-      marginTop: 20,
-      marginBottom: 20,
-    },
-    relay_status__inactive: {
-      backgroundColor: colors.red95,
-    },
-    relay_status__active: {
-      backgroundColor: colors.green90,
-    },
-    tick_icon: {
-      color: colors.white,
-      marginLeft: 0,
-      marginRight: 0,
-      marginTop: 15.5,
-      marginBottom: 15.5,
-    },
-    country: {
-      flexDirection: 'column',
-      flex: 0,
-    },
-    collapse_button: {
-      flex: 0,
-      alignSelf: 'stretch',
-      justifyContent: 'center',
-      paddingRight: 16,
-      paddingLeft: 16,
-    },
-    cell: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 20,
-      paddingRight: 0,
-    },
-    sub_cell: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: 0,
-      paddingLeft: 40,
-      backgroundColor: colors.blue40,
-    },
-    sub_cell__selected: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: 0,
-      paddingLeft: 40,
-      backgroundColor: colors.green,
-    },
-    cell_selected: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 20,
-      paddingRight: 0,
-      backgroundColor: colors.green,
-    },
-    expand_chevron_hover: {
-      color: colors.white,
-    },
+  select_location: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
+  }),
+  container: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  title_header: Styles.createViewStyle({
+    paddingBottom: 0,
+  }),
+  subtitle_header: Styles.createViewStyle({
+    paddingTop: 0,
+  }),
+  content: Styles.createViewStyle({
+    overflow: 'visible',
+  }),
+  relay_status: Styles.createViewStyle({
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    marginLeft: 4,
+    marginRight: 4,
+    marginTop: 20,
+    marginBottom: 20,
+  }),
+  relay_status__inactive: Styles.createViewStyle({
+    backgroundColor: colors.red95,
+  }),
+  relay_status__active: Styles.createViewStyle({
+    backgroundColor: colors.green90,
+  }),
+  tick_icon: Styles.createViewStyle({
+    color: colors.white,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 15.5,
+    marginBottom: 15.5,
+  }),
+  country: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 0,
+  }),
+  collapse_button: Styles.createViewStyle({
+    flex: 0,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    paddingRight: 16,
+    paddingLeft: 16,
+  }),
+  cell: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 20,
+    paddingRight: 0,
+  }),
+  sub_cell: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingRight: 0,
+    paddingLeft: 40,
+    backgroundColor: colors.blue40,
+  }),
+  sub_cell__selected: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingRight: 0,
+    paddingLeft: 40,
+    backgroundColor: colors.green,
+  }),
+  cell_selected: Styles.createViewStyle({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 20,
+    paddingRight: 0,
+    backgroundColor: colors.green,
+  }),
+  expand_chevron_hover: Styles.createViewStyle({
+    color: colors.white,
   }),
 };
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 0ed45c7685..7c7099a3ed 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,4 +1,5 @@
 // @flow
+
 import moment from 'moment';
 import * as React from 'react';
 import { Component, View } from 'reactxp';
@@ -92,7 +93,7 @@ export default class Settings extends Component<Props> {
 
     return (
       <View>
-        <View style={styles.settings_account} testName="settings__account">
+        <View testName="settings__account">
           {isOutOfTime ? (
             <Cell.CellButton
               onPress={this.props.onViewAccount}
@@ -100,7 +101,7 @@ export default class Settings extends Component<Props> {
               <Cell.Label>Account</Cell.Label>
               <Cell.SubText
                 testName="settings__account_paid_until_subtext"
-                style={styles.settings__account_paid_until_Label__error}>
+                style={styles.settings__account_paid_until_label__error}>
                 {'OUT OF TIME'}
               </Cell.SubText>
               <Img height={12} width={7} source="icon-chevron" />
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index c67edcecf9..be2491bec4 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -1,41 +1,40 @@
-import { createViewStyles, createTextStyles } from '../lib/styles';
+// @flow
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
 export default {
-  ...createViewStyles({
-    settings: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    settings__container: {
-      flexDirection: 'column',
-      flex: 1,
-    },
-    settings__content: {
-      flexDirection: 'column',
-      flex: 1,
-      justifyContent: 'space-between',
-      overflow: 'visible',
-    },
-    settings__scrollview: {
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '100%',
-    },
-    settings__cell_spacer: {
-      height: 24,
-      flex: 0,
-    },
-    settings__footer: {
-      paddingTop: 24,
-      paddingBottom: 24,
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
+  settings: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
+  }),
+  settings__container: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  settings__content: Styles.createViewStyle({
+    flexDirection: 'column',
+    flex: 1,
+    justifyContent: 'space-between',
+    overflow: 'visible',
+  }),
+  settings__scrollview: Styles.createViewStyle({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
   }),
-  ...createTextStyles({
-    settings__account_paid_until_label__error: {
-      color: colors.red,
-    },
+  settings__cell_spacer: Styles.createViewStyle({
+    height: 24,
+    flex: 0,
+  }),
+  settings__footer: Styles.createViewStyle({
+    paddingTop: 24,
+    paddingBottom: 24,
+    paddingLeft: 24,
+    paddingRight: 24,
+  }),
+
+  settings__account_paid_until_label__error: Styles.createTextStyle({
+    color: colors.red,
   }),
 };
diff --git a/app/components/Support.js b/app/components/Support.js
index d97cc0d7b1..2552a0e432 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Component, Text, View, TextInput } from 'reactxp';
 import * as AppButton from './AppButton';
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index 6e50fe8298..718659157a 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -1,133 +1,131 @@
-import { createViewStyles, createTextStyles } from '../lib/styles';
+// @flow
+
+import { Styles } from 'reactxp';
 import { colors } from '../config';
 
-export default Object.assign(
-  createViewStyles({
-    support: {
-      backgroundColor: colors.darkBlue,
-      flex: 1,
-    },
-    support__container: {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: 1,
-    },
-    support__content: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-    },
-    support__form: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'column',
-    },
-    support__form_row: {
-      paddingLeft: 22,
-      paddingRight: 22,
-      marginBottom: 12,
-    },
-    support__form_row_email: {
-      paddingLeft: 22,
-      paddingRight: 22,
-      marginBottom: 12,
-    },
-    support__form_row_message: {
-      flex: 1,
-      paddingLeft: 22,
-      paddingRight: 22,
-    },
-    support__form_message_scroll_wrap: {
-      flex: 1,
-      display: 'flex',
-      borderRadius: 4,
-      overflow: 'hidden',
-    },
-    support__footer: {
-      paddingTop: 16,
-      paddingBottom: 16,
-      paddingLeft: 24,
-      paddingRight: 24,
-      flexDirection: 'column',
-      flex: 0,
-    },
-    support__status_icon: {
-      alignItems: 'center',
-      marginBottom: 32,
-    },
-    view_logs_button: {
-      marginBottom: 16,
-    },
-    edit_message_button: {
-      marginBottom: 16,
-    },
+export default {
+  support: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    flex: 1,
+  }),
+  support__container: Styles.createViewStyle({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  }),
+  support__content: Styles.createViewStyle({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  }),
+  support__form: Styles.createViewStyle({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+  }),
+  support__form_row: Styles.createViewStyle({
+    paddingLeft: 22,
+    paddingRight: 22,
+    marginBottom: 12,
+  }),
+  support__form_row_email: Styles.createViewStyle({
+    paddingLeft: 22,
+    paddingRight: 22,
+    marginBottom: 12,
+  }),
+  support__form_row_message: Styles.createViewStyle({
+    flex: 1,
+    paddingLeft: 22,
+    paddingRight: 22,
+  }),
+  support__form_message_scroll_wrap: Styles.createViewStyle({
+    flex: 1,
+    display: 'flex',
+    borderRadius: 4,
+    overflow: 'hidden',
+  }),
+  support__footer: Styles.createViewStyle({
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 24,
+    paddingRight: 24,
+    flexDirection: 'column',
+    flex: 0,
+  }),
+  support__status_icon: Styles.createViewStyle({
+    alignItems: 'center',
+    marginBottom: 32,
+  }),
+  view_logs_button: Styles.createViewStyle({
+    marginBottom: 16,
+  }),
+  edit_message_button: Styles.createViewStyle({
+    marginBottom: 16,
+  }),
+  support__form_email: Styles.createTextStyle({
+    flex: 1,
+    borderRadius: 4,
+    overflow: 'hidden',
+    paddingTop: 14,
+    paddingLeft: 14,
+    paddingRight: 14,
+    paddingBottom: 14,
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 26,
+    color: colors.blue,
+    backgroundColor: colors.white,
+  }),
+  support__form_message: Styles.createTextStyle({
+    paddingTop: 14,
+    paddingLeft: 14,
+    paddingRight: 14,
+    paddingBottom: 14,
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.blue,
+    backgroundColor: colors.white,
+    flex: 1,
+  }),
+  support__sent_message: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    overflow: 'visible',
+    color: colors.white60,
+    lineHeight: 20,
+    letterSpacing: -0.2,
+  }),
+  support__sent_email: Styles.createTextStyle({
+    fontWeight: '900',
+    color: colors.white,
+  }),
+  support__status_security__secure: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 16,
+    fontWeight: '800',
+    lineHeight: 22,
+    marginBottom: 4,
+    color: colors.green,
+  }),
+  support__send_status: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 38,
+    fontWeight: '900',
+    maxHeight: 'calc(1.16em * 2)',
+    overflow: 'visible',
+    letterSpacing: -0.9,
+    color: colors.white,
+    marginBottom: 4,
   }),
-  createTextStyles({
-    support__form_email: {
-      flex: 1,
-      borderRadius: 4,
-      overflow: 'hidden',
-      paddingTop: 14,
-      paddingLeft: 14,
-      paddingRight: 14,
-      paddingBottom: 14,
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 26,
-      color: colors.blue,
-      backgroundColor: colors.white,
-    },
-    support__form_message: {
-      paddingTop: 14,
-      paddingLeft: 14,
-      paddingRight: 14,
-      paddingBottom: 14,
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      color: colors.blue,
-      backgroundColor: colors.white,
-      flex: 1,
-    },
-    support__sent_message: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      overflow: 'visible',
-      color: colors.white60,
-      lineHeight: 20,
-      letterSpacing: -0.2,
-    },
-    support__sent_email: {
-      fontWeight: '900',
-      color: colors.white,
-    },
-    support__status_security__secure: {
-      fontFamily: 'Open Sans',
-      fontSize: 16,
-      fontWeight: '800',
-      lineHeight: 22,
-      marginBottom: 4,
-      color: colors.green,
-    },
-    support__send_status: {
-      fontFamily: 'DINPro',
-      fontSize: 38,
-      fontWeight: '900',
-      maxHeight: 'calc(1.16em * 2)',
-      overflow: 'visible',
-      letterSpacing: -0.9,
-      color: colors.white,
-      marginBottom: 4,
-    },
-    support__no_email_warning: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      lineHeight: 16,
-      color: colors.white80,
-      marginBottom: 12,
-    },
+  support__no_email_warning: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    lineHeight: 16,
+    color: colors.white80,
+    marginBottom: 12,
   }),
-);
+};
diff --git a/app/components/Switch.android.js b/app/components/Switch.android.js
index 4689107868..cbf29c3ad9 100644
--- a/app/components/Switch.android.js
+++ b/app/components/Switch.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Switch as _Switch } from 'react-native';
 
diff --git a/app/components/Switch.js b/app/components/Switch.js
index 257b2c6587..4abb4a247f 100644
--- a/app/components/Switch.js
+++ b/app/components/Switch.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 
 const CLICK_TIMEOUT = 1000;
diff --git a/app/components/TransitionContainer.js b/app/components/TransitionContainer.js
index 1b6e8aee8f..2c1fb09995 100644
--- a/app/components/TransitionContainer.js
+++ b/app/components/TransitionContainer.js
@@ -1,4 +1,5 @@
 // @flow
+
 import * as React from 'react';
 import { Styles, Component, Animated, View, Types, UserInterface } from 'reactxp';
 import type { TransitionGroupProps } from '../transitions';
diff --git a/app/components/TransitionContainerStyles.android.js b/app/components/TransitionContainerStyles.android.js
index c894d9fb01..d69980ab43 100644
--- a/app/components/TransitionContainerStyles.android.js
+++ b/app/components/TransitionContainerStyles.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { Styles, UserInterface } from 'reactxp';
 import { MobileAppBridge } from 'NativeModules';
 import { log } from '../lib/platform';
diff --git a/app/components/TransitionContainerStyles.js b/app/components/TransitionContainerStyles.js
index c6510c0600..ca95cabfee 100644
--- a/app/components/TransitionContainerStyles.js
+++ b/app/components/TransitionContainerStyles.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { Styles, UserInterface } from 'reactxp';
 
 const dimensions = UserInterface.measureWindow();
diff --git a/app/containers/LaunchPage.js b/app/containers/LaunchPage.js
index 1b265dd030..3ab740897d 100644
--- a/app/containers/LaunchPage.js
+++ b/app/containers/LaunchPage.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
diff --git a/app/containers/SupportPage.js b/app/containers/SupportPage.js
index 78d1b41ebe..b9e3f426bf 100644
--- a/app/containers/SupportPage.js
+++ b/app/containers/SupportPage.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { goBack } from 'connected-react-router';
diff --git a/app/index.android.js b/app/index.android.js
index e41ccc567a..c17bd40f9e 100644
--- a/app/index.android.js
+++ b/app/index.android.js
@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react';
 import RX from 'reactxp';
 import App from './App';
diff --git a/app/lib/formatters.js b/app/lib/formatters.js
index 437351621d..37d7460768 100644
--- a/app/lib/formatters.js
+++ b/app/lib/formatters.js
@@ -1,4 +1,5 @@
 // @flow
+
 export const formatAccount = (val: string): string => {
   // display number altogether when longer than 12
   if (val.length > 12) {
diff --git a/app/lib/keyframe-animation.js b/app/lib/keyframe-animation.js
index 2961412230..028c95769a 100644
--- a/app/lib/keyframe-animation.js
+++ b/app/lib/keyframe-animation.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { nativeImage } from 'electron';
 import type { NativeImage } from 'electron';
 
diff --git a/app/lib/platform.android.js b/app/lib/platform.android.js
index 5b3abb4496..e71c1facf7 100644
--- a/app/lib/platform.android.js
+++ b/app/lib/platform.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { BackHandler, Linking } from 'react-native';
 import { MobileAppBridge } from 'NativeModules';
 import { version } from '../../package.json';
diff --git a/app/lib/platform.js b/app/lib/platform.js
index 2ba438274f..cabb4951d9 100644
--- a/app/lib/platform.js
+++ b/app/lib/platform.js
@@ -1,4 +1,5 @@
 // @flow
+
 import fs from 'fs';
 import { remote, shell } from 'electron';
 import electronLog from 'electron-log';
diff --git a/app/lib/problem-report.android.js b/app/lib/problem-report.android.js
index b0bee2264d..30a944e178 100644
--- a/app/lib/problem-report.android.js
+++ b/app/lib/problem-report.android.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { MobileAppBridge } from 'NativeModules';
 
 const collectProblemReport = (toRedact: string) => {
diff --git a/app/lib/problem-report.js b/app/lib/problem-report.js
index df302bd908..19d24f3e0f 100644
--- a/app/lib/problem-report.js
+++ b/app/lib/problem-report.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { ipcRenderer } from 'electron';
 import uuid from 'uuid';
 
diff --git a/app/lib/styles.js b/app/lib/styles.js
deleted file mode 100644
index 0bbec6fe79..0000000000
--- a/app/lib/styles.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-
-import * as RX from 'reactxp';
-
-type ExtractViewReturnType = <V>(V) => Object;
-type ExtractTextReturnType = <V>(V) => Object;
-
-export function createViewStyles<T: { [string]: Object }>(
-  styles: T,
-): $ObjMap<T, ExtractViewReturnType> {
-  const viewStyles = {};
-  for (const style of Object.keys(styles)) {
-    viewStyles[style] = RX.Styles.createViewStyle(styles[style]);
-  }
-  return viewStyles;
-}
-
-export function createTextStyles<T: { [string]: Object }>(
-  styles: T,
-): $ObjMap<T, ExtractTextReturnType> {
-  const textStyles = {};
-  for (const style of Object.keys(styles)) {
-    textStyles[style] = RX.Styles.createTextStyle(styles[style]);
-  }
-  return textStyles;
-}
diff --git a/app/main.js b/app/main.js
index ef4e2e9e24..aafeed02e6 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,4 +1,5 @@
 // @flow
+
 import fs from 'fs';
 import path from 'path';
 import { execFile } from 'child_process';
diff --git a/app/notification-controller.js b/app/notification-controller.js
index 62d6381e72..ff2c80db50 100644
--- a/app/notification-controller.js
+++ b/app/notification-controller.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { remote } from 'electron';
 
 export default class NotificationController {
diff --git a/app/redux/store.js b/app/redux/store.js
index e269d9902b..119e594a27 100644
--- a/app/redux/store.js
+++ b/app/redux/store.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
 import { routerMiddleware, connectRouter, push, replace } from 'connected-react-router';
 import thunk from 'redux-thunk';
diff --git a/app/shutdown-handler.js b/app/shutdown-handler.js
index afd10f61b2..6bc2d90f46 100644
--- a/app/shutdown-handler.js
+++ b/app/shutdown-handler.js
@@ -1,4 +1,5 @@
 // @flow
+
 import { app, ipcMain, ipcRenderer } from 'electron';
 import { log } from './lib/platform';
 import type { WebContents } from 'electron';
diff --git a/app/transitions.js b/app/transitions.js
index 56b1d74cfb..56769f6877 100644
--- a/app/transitions.js
+++ b/app/transitions.js
@@ -1,4 +1,5 @@
 // @flow
+
 import TransitionRule from './lib/transition-rule';
 import type { TransitionFork, TransitionDescriptor } from './lib/transition-rule';
 
diff --git a/app/tray-icon-controller.js b/app/tray-icon-controller.js
index c32421b20f..e4c23db2a1 100644
--- a/app/tray-icon-controller.js
+++ b/app/tray-icon-controller.js
@@ -1,4 +1,5 @@
 // @flow
+
 import path from 'path';
 import KeyframeAnimation from './lib/keyframe-animation';
 import type { Tray } from 'electron';