REF: add more styles to StyleSheet.create

App.js

@@ -194,7 +194,7 @@ export default class App extends React.Component {
                 title={loc.send.details.cancel}
                 onPress={() => this.setState({ isClipboardContentModalVisible: false })}
               />
-              <View style={{ marginHorizontal: 8 }} />
+              <View style={styles.space} />
               <BlueButton
                 noMinWidth
                 title="OK"
@@ -215,7 +215,7 @@ export default class App extends React.Component {
   render() {
     return (
       <SafeAreaProvider>
-        <View style={{ flex: 1 }}>
+        <View style={styles.root}>
           <NavigationContainer
             ref={nav => {
               this.navigation = nav;
@@ -233,6 +233,12 @@ export default class App extends React.Component {
 }
 
 const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  space: {
+    marginHorizontal: 8,
+  },
   modalContent: {
     backgroundColor: '#FFFFFF',
     padding: 22,

UnlockWith.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
 import { Icon } from 'react-native-elements';
 import Biometric from './class/biometrics';
 import PropTypes from 'prop-types';
@@ -8,6 +8,45 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 const BlueApp = require('./BlueApp');
 
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  container: {
+    flex: 2,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  qrCode: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  qrCodeImage: {
+    width: 120,
+    height: 120,
+  },
+  biometric: {
+    flex: 0.2,
+    justifyContent: 'flex-end',
+    marginBottom: 58,
+  },
+  biometricRow: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  icon: {
+    width: 64,
+    height: 64,
+  },
+  encrypted: {
+    backgroundColor: 'gray',
+    width: 0.5,
+    height: 20,
+    marginHorizontal: 16,
+  },
+});
+
 export default class UnlockWith extends Component {
   state = { biometricType: false, isStorageEncrypted: false, isAuthenticating: false };
 
@@ -54,31 +93,29 @@ export default class UnlockWith extends Component {
       return <View />;
     }
     return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <View style={{ flex: 2, justifyContent: 'space-between', alignItems: 'center' }}>
-          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-            <Image source={require('./img/qr-code.png')} style={{ width: 120, height: 120 }} />
+      <SafeAreaView style={styles.root}>
+        <View style={styles.container}>
+          <View style={styles.qrCode}>
+            <Image source={require('./img/qr-code.png')} style={styles.qrCodeImage} />
           </View>
-          <View style={{ flex: 0.2, justifyContent: 'flex-end', marginBottom: 58 }}>
-            <View style={{ justifyContent: 'center', flexDirection: 'row' }}>
+          <View style={styles.biometric}>
+            <View style={styles.biometricRow}>
               {(this.state.biometricType === Biometric.TouchID || this.state.biometricType === Biometric.Biometrics) &&
                 !this.state.isStorageEncrypted && (
                   <>
                     <TouchableOpacity disabled={this.state.isAuthenticating} onPress={this.unlockWithBiometrics}>
-                      <Image source={require('./img/fingerprint.png')} style={{ width: 64, height: 64 }} />
+                      <Image source={require('./img/fingerprint.png')} style={styles.icon} />
                     </TouchableOpacity>
                   </>
                 )}
               {this.state.biometricType === Biometric.FaceID && !this.state.isStorageEncrypted && (
                 <>
                   <TouchableOpacity disabled={this.state.isAuthenticating} onPress={this.unlockWithBiometrics}>
-                    <Image source={require('./img/faceid.png')} style={{ width: 64, height: 64 }} />
+                    <Image source={require('./img/faceid.png')} style={styles.icon} />
                   </TouchableOpacity>
                 </>
               )}
-              {this.state.biometricType !== false && this.state.isStorageEncrypted && (
-                <View style={{ backgroundColor: 'gray', width: 0.5, height: 20, marginHorizontal: 16 }} />
-              )}
+              {this.state.biometricType !== false && this.state.isStorageEncrypted && <View style={styles.encrypted} />}
               {this.state.isStorageEncrypted && (
                 <>
                   <TouchableOpacity disabled={this.state.isAuthenticating} onPress={this.unlockWithKey}>

screen/receive/aztecoRedeem.js

@@ -1,6 +1,6 @@
 /* global alert */
 import React, { Component } from 'react';
-import { Keyboard, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { Keyboard, Text, TouchableOpacity, TouchableWithoutFeedback, View, StyleSheet } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { BlueButton, BlueCreateTxNavigationStyle, BlueLoading, BlueSpacing, BlueText } from '../../BlueComponents';
 import PropTypes from 'prop-types';
@@ -10,6 +10,46 @@ import Azteco from '../../class/azteco';
 const EV = require('../../events');
 let BlueApp: AppStorage = require('../../BlueApp');
 
+const styles = StyleSheet.create({
+  loading: {
+    flex: 1,
+    paddingTop: 20,
+  },
+  root: {
+    alignItems: 'center',
+    alignContent: 'flex-end',
+    marginTop: 66,
+  },
+  code: {
+    color: '#0c2550',
+    fontSize: 20,
+    marginTop: 20,
+    marginBottom: 90,
+  },
+  selectWallet1: {
+    marginBottom: 24,
+    alignItems: 'center',
+  },
+  selectTouch: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  selectText: {
+    color: '#9aa0aa',
+    fontSize: 14,
+    marginRight: 8,
+  },
+  selectWallet2: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 4,
+  },
+  selectWalletLabel: {
+    color: '#0c2550',
+    fontSize: 14,
+  },
+});
+
 export default class AztecoRedeem extends Component {
   static navigationOptions = ({ navigation }) => ({
     ...BlueCreateTxNavigationStyle(navigation),
@@ -73,10 +113,10 @@ export default class AztecoRedeem extends Component {
   renderWalletSelectionButton = () => {
     if (this.state.renderWalletSelectionButtonHidden) return;
     return (
-      <View style={{ marginBottom: 24, alignItems: 'center' }}>
+      <View style={styles.selectWallet1}>
         {!this.state.isLoading && (
           <TouchableOpacity
-            style={{ flexDirection: 'row', alignItems: 'center' }}
+            style={styles.selectTouch}
             onPress={() =>
               this.props.navigation.navigate('SelectWallet', {
                 onWalletSelect: this.onWalletSelect,
@@ -84,13 +124,13 @@ export default class AztecoRedeem extends Component {
               })
             }
           >
-            <Text style={{ color: '#9aa0aa', fontSize: 14, marginRight: 8 }}>Redeem to wallet</Text>
+            <Text style={styles.selectText}>Redeem to wallet</Text>
             <Icon name="angle-right" size={18} type="font-awesome" color="#9aa0aa" />
           </TouchableOpacity>
         )}
-        <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 4 }}>
+        <View style={styles.selectWallet2}>
           <TouchableOpacity
-            style={{ flexDirection: 'row', alignItems: 'center' }}
+            style={styles.selectTouch}
             onPress={() =>
               this.props.navigation.navigate('SelectWallet', {
                 onWalletSelect: this.onWalletSelect,
@@ -98,7 +138,7 @@ export default class AztecoRedeem extends Component {
               })
             }
           >
-            <Text style={{ color: '#0c2550', fontSize: 14 }}>{this.state.toWallet.getLabel()}</Text>
+            <Text style={styles.selectWalletLabel}>{this.state.toWallet.getLabel()}</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -108,7 +148,7 @@ export default class AztecoRedeem extends Component {
   render() {
     if (this.state.isLoading || typeof this.state.toWallet === 'undefined') {
       return (
-        <View style={{ flex: 1, paddingTop: 20 }}>
+        <View style={styles.loading}>
           <BlueLoading />
         </View>
       );
@@ -116,9 +156,9 @@ export default class AztecoRedeem extends Component {
     return (
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
         <View>
-          <View style={{ alignItems: 'center', alignContent: 'flex-end', marginTop: 66 }}>
+          <View style={styles.root}>
             <Text>Your voucher code is</Text>
-            <BlueText style={{ color: '#0c2550', fontSize: 20, marginTop: 20, marginBottom: 90 }}>
+            <BlueText style={styles.code}>
               {this.state.c1}-{this.state.c2}-{this.state.c3}-{this.state.c4}
             </BlueText>
             {this.renderWalletSelectionButton()}

screen/wallets/add.js

@@ -110,6 +110,9 @@ const styles = StyleSheet.create({
     marginBottom: 0,
     marginTop: 24,
   },
+  noPadding: {
+    paddingHorizontal: 0,
+  },
 });
 
 export default class WalletsAdd extends Component {
@@ -226,7 +229,7 @@ export default class WalletsAdd extends Component {
                       <BlueSpacing20 />
                       <Text style={styles.advancedText}>{loc.settings.advanced_options}</Text>
                       <BlueListItem
-                        containerStyle={{ paddingHorizontal: 0 }}
+                        containerStyle={styles.noPadding}
                         bottomDivider={false}
                         onPress={() => {
                           this.onSelect(0, HDSegwitBech32Wallet.type);
@@ -239,7 +242,7 @@ export default class WalletsAdd extends Component {
                           : { hideChevron: true })}
                       />
                       <BlueListItem
-                        containerStyle={{ paddingHorizontal: 0 }}
+                        containerStyle={styles.noPadding}
                         bottomDivider={false}
                         onPress={() => {
                           this.onSelect(1, SegwitP2SHWallet.type);
@@ -252,7 +255,7 @@ export default class WalletsAdd extends Component {
                           : { hideChevron: true })}
                       />
                       <BlueListItem
-                        containerStyle={{ paddingHorizontal: 0 }}
+                        containerStyle={styles.noPadding}
                         bottomDivider={false}
                         onPress={() => {
                           this.onSelect(2, HDSegwitP2SHWallet.typeReadable.type);
@@ -405,3 +408,4 @@ WalletsAdd.propTypes = {
     goBack: PropTypes.func,
   }),
 };
+