diff --git a/src/components/ButtonCell.js b/src/components/ButtonCell.js
index 0d2c586b..7f6acfed 100644
--- a/src/components/ButtonCell.js
+++ b/src/components/ButtonCell.js
@@ -1,39 +1,50 @@
 import React, { Component } from 'react';
 import { TouchableHighlight, Text, View } from 'react-native';
-import SectionedTableCell from './SectionedTableCell'
-import StyleKit from '@Style/StyleKit'
+import SectionedTableCell from '@Components/SectionedTableCell';
+import StyleKit from '@Style/StyleKit';
 
 export default class ButtonCell extends SectionedTableCell {
-
   rules() {
-    let rules = super.rules();
-    if(this.props.maxHeight) { rules.push({maxHeight: this.props.maxHeight}) }
+    const rules = super.rules();
+    if (this.props.maxHeight) {
+      rules.push({ maxHeight: this.props.maxHeight });
+    }
     return rules;
   }
 
   buttonRules() {
-    let rules = [StyleKit.stylesForKey('buttonCellButton')];
-    if(this.props.leftAligned) { rules.push(StyleKit.styles.buttonCellButtonLeft) }
-    if(this.props.bold) { rules.push(StyleKit.styles.bold) }
-    if(this.props.disabled) { rules.push({color: 'gray', opacity: 0.6}) }
-    if(this.props.important) { rules.push({color: StyleKit.variables.stylekitDangerColor}) }
+    const rules = [StyleKit.stylesForKey('buttonCellButton')];
+    if (this.props.leftAligned) {
+      rules.push(StyleKit.styles.buttonCellButtonLeft);
+    }
+    if (this.props.bold) {
+      rules.push(StyleKit.styles.bold);
+    }
+    if (this.props.disabled) {
+      rules.push({ color: 'gray', opacity: 0.6 });
+    }
+    if (this.props.important) {
+      rules.push({ color: StyleKit.variables.stylekitDangerColor });
+    }
     return rules;
   }
 
   render() {
     return (
       <TouchableHighlight
-        underlayColor={StyleKit.variable('stylekitBorderColor')}
-        style={[StyleKit.styles.flexContainer, StyleKit.styles.buttonCell, ...this.rules()]}
+        underlayColor={StyleKit.variables.stylekitBorderColor}
+        style={[
+          StyleKit.styles.flexContainer,
+          StyleKit.styles.buttonCell,
+          ...this.rules()
+        ]}
         disabled={this.props.disabled}
         onPress={this.props.onPress}>
         <View>
           <Text style={this.buttonRules()}>{this.props.title}</Text>
-          {this.props.children &&
-            this.props.children
-          }
+          {this.props.children && this.props.children}
         </View>
       </TouchableHighlight>
-    )
+    );
   }
 }
diff --git a/src/components/Circle.js b/src/components/Circle.js
index 13a1aeb7..ebb0ef47 100644
--- a/src/components/Circle.js
+++ b/src/components/Circle.js
@@ -1,10 +1,8 @@
-import React, { Component } from 'react';
-import {TouchableHighlight, Text, View} from 'react-native';
-import SectionedTableCell from './SectionedTableCell'
-import StyleKit from "@Style/StyleKit"
+import React from 'react';
+import { View } from 'react-native';
+import SectionedTableCell from '@Components/SectionedTableCell';
 
 export default class Circle extends SectionedTableCell {
-
   constructor(props) {
     super(props);
     this.size = props.size || 12;
@@ -12,9 +10,7 @@ export default class Circle extends SectionedTableCell {
   }
 
   render() {
-    return (
-      <View style={this.styles.circle} />
-    )
+    return <View style={this.styles.circle} />;
   }
 
   loadStyles() {
@@ -22,11 +18,11 @@ export default class Circle extends SectionedTableCell {
       circle: {
         width: this.size,
         height: this.size,
-        borderRadius: this.size/2.0,
+        borderRadius: this.size / 2.0,
         backgroundColor: this.props.backgroundColor,
         borderColor: this.props.borderColor,
         borderWidth: 1
       }
-    }
+    };
   }
 }
diff --git a/src/components/HeaderTitleView.js b/src/components/HeaderTitleView.js
index 05d47292..19469846 100644
--- a/src/components/HeaderTitleView.js
+++ b/src/components/HeaderTitleView.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import {DeviceEventEmitter, Modal, View, Text} from 'react-native';
-import StyleKit from "@Style/StyleKit";
-import PlatformStyles from "../models/PlatformStyles";
+import { View, Text } from 'react-native';
+import PlatformStyles from '@Root/models/PlatformStyles';
+import StyleKit from '@Style/StyleKit';
 
 export default class HeaderTitleView extends Component {
-
   constructor(props) {
     super(props);
   }
@@ -13,57 +12,60 @@ export default class HeaderTitleView extends Component {
     let styles = this.getStyles();
 
     let subtitleStyles = styles.get('headerSubtitle');
-    if(this.props.subtitleColor) {
+    if (this.props.subtitleColor) {
       subtitleStyles[0].color = this.props.subtitleColor;
       subtitleStyles[0].opacity = 1.0;
     }
 
     return (
       <View style={styles.get('headerContainer')}>
-
         <Text style={styles.get('headerTitle')}>{this.props.title}</Text>
 
-        {this.props.subtitle &&
-          <Text numberOfLines={1} style={subtitleStyles} adjustsFontSizeToFit={true}>
+        {this.props.subtitle && (
+          <Text
+            numberOfLines={1}
+            style={subtitleStyles}
+            adjustsFontSizeToFit={true}
+          >
             {this.props.subtitle}
           </Text>
-        }
+        )}
       </View>
-    )
+    );
   }
 
   getStyles() {
     return new PlatformStyles({
       headerContainer: {
-        backgroundColor: StyleKit.variable("stylekitContrastBackgroundColor"),
+        backgroundColor: StyleKit.variables.stylekitContrastBackgroundColor,
         flex: 1,
         justifyContent: 'flex-start',
-        flexDirection: "column"
+        flexDirection: 'column'
       },
 
       headerContainerAndroid: {
-        alignItems: 'flex-start',
+        alignItems: 'flex-start'
       },
 
       headerTitle: {
-        color: StyleKit.variable("stylekitForegroundColor"),
-        fontWeight: "bold",
+        color: StyleKit.variables.stylekitForegroundColor,
+        fontWeight: 'bold',
         fontSize: 18,
-        textAlign: "center",
+        textAlign: 'center'
       },
 
       headerSubtitle: {
-        color: StyleKit.variable("stylekitForegroundColor"),
+        color: StyleKit.variables.stylekitForegroundColor,
         opacity: 0.6,
-        fontSize: 12,
+        fontSize: 12
       },
 
       headerSubtitleIOS: {
-        textAlign: "center",
+        textAlign: 'center'
       },
 
       headerSubtitleAndroid: {
-        fontSize: 13,
+        fontSize: 13
       }
     });
   }
diff --git a/src/components/SectionHeader.js b/src/components/SectionHeader.js
index 385f7469..181f5d6b 100644
--- a/src/components/SectionHeader.js
+++ b/src/components/SectionHeader.js
@@ -1,28 +1,51 @@
-import React, { Component } from 'react';
-import {Text, Platform, View, TouchableOpacity} from 'react-native';
-
-import StyleKit from "@Style/StyleKit"
-import ThemedComponent from "@Components/ThemedComponent"
+import React from 'react';
+import { Text, Platform, View, TouchableOpacity } from 'react-native';
+import ThemedComponent from '@Components/ThemedComponent';
+import StyleKit from '@Style/StyleKit';
 
 export default class SectionHeader extends ThemedComponent {
   render() {
-    var title = this.props.title;
-    if(Platform.OS == "ios") { title = title.toUpperCase(); }
+    let title = this.props.title;
+    if (Platform.OS === 'ios') {
+      title = title.toUpperCase();
+    }
     return (
-      <View style={[this.styles.container, {backgroundColor: this.props.backgroundColor, color: this.props.foregroundColor}]}>
-        <View>
-          <Text style={[this.styles.title, this.props.tinted ? {color: StyleKit.variables.stylekitInfoColor} : null]}>{title}</Text>
-          {this.props.subtitle &&
-            <Text style={this.styles.subtitle}>{this.props.subtitle}</Text>
+      <View
+        style={[
+          this.styles.container,
+          {
+            backgroundColor: this.props.backgroundColor,
+            color: this.props.foregroundColor
           }
+        ]}
+      >
+        <View>
+          <Text
+            style={[
+              this.styles.title,
+              this.props.tinted
+                ? { color: StyleKit.variables.stylekitInfoColor }
+                : null
+            ]}
+          >
+            {title}
+          </Text>
+          {this.props.subtitle && (
+            <Text style={this.styles.subtitle}>{this.props.subtitle}</Text>
+          )}
         </View>
-        {this.props.buttonText &&
-          <TouchableOpacity style={this.styles.buttonContainer} onPress={this.props.buttonAction}>
-            <Text style={[this.styles.button, this.props.buttonStyles]}>{this.props.buttonText}</Text>
+        {this.props.buttonText && (
+          <TouchableOpacity
+            style={this.styles.buttonContainer}
+            onPress={this.props.buttonAction}
+          >
+            <Text style={[this.styles.button, this.props.buttonStyles]}>
+              {this.props.buttonText}
+            </Text>
           </TouchableOpacity>
-        }
+        )}
       </View>
-    )
+    );
   }
 
   loadStyles() {
@@ -30,7 +53,7 @@ export default class SectionHeader extends ThemedComponent {
       container: {
         flex: 1,
         flexGrow: 0,
-        justifyContent: "space-between",
+        justifyContent: 'space-between',
         flexDirection: 'row',
         paddingRight: StyleKit.constants.paddingLeft,
         paddingBottom: 10,
@@ -43,7 +66,7 @@ export default class SectionHeader extends ThemedComponent {
         fontSize: StyleKit.constants.mainTextFontSize - 4,
         paddingLeft: StyleKit.constants.paddingLeft,
         color: StyleKit.variables.stylekitNeutralColor,
-        fontWeight: Platform.OS == "android" ? "bold" : "normal"
+        fontWeight: Platform.OS === 'android' ? 'bold' : 'normal'
       },
 
       subtitle: {
@@ -51,13 +74,13 @@ export default class SectionHeader extends ThemedComponent {
         fontSize: StyleKit.constants.mainTextFontSize - 5,
         marginTop: 4,
         paddingLeft: StyleKit.constants.paddingLeft,
-        color: StyleKit.variables.stylekitNeutralColor,
+        color: StyleKit.variables.stylekitNeutralColor
       },
 
       buttonContainer: {
         flex: 1,
-        alignItems: "flex-end",
-        justifyContent: "center",
+        alignItems: 'flex-end',
+        justifyContent: 'center'
       },
 
       button: {
@@ -67,7 +90,7 @@ export default class SectionHeader extends ThemedComponent {
       titleAndroid: {
         fontSize: StyleKit.constants.mainTextFontSize - 2,
         color: StyleKit.variables.stylekitInfoColor
-      },
-    }
+      }
+    };
   }
 }
diff --git a/src/components/SectionedAccessoryTableCell.js b/src/components/SectionedAccessoryTableCell.js
index fdeb1f6b..2d959ce5 100644
--- a/src/components/SectionedAccessoryTableCell.js
+++ b/src/components/SectionedAccessoryTableCell.js
@@ -1,58 +1,66 @@
-import React, { Component } from 'react';
-import {View, Image, Text, TouchableHighlight, Platform} from 'react-native';
-
-import StyleKit from "@Style/StyleKit"
-import SectionedTableCell from "./SectionedTableCell"
+import React from 'react';
+import { View, Text, TouchableHighlight, Platform } from 'react-native';
+import SectionedTableCell from '@Components/SectionedTableCell';
+import StyleKit from '@Style/StyleKit';
 
 import Icon from 'react-native-vector-icons/Ionicons';
 
 export default class SectionedAccessoryTableCell extends SectionedTableCell {
-
   rules() {
-    var rules = super.rules().concat([
-      StyleKit.styles.view,
-      StyleKit.styles.flexContainer,
-      ...StyleKit.stylesForKey("sectionedAccessoryTableCell")
-    ]);
+    const rules = super
+      .rules()
+      .concat([
+        StyleKit.styles.view,
+        StyleKit.styles.flexContainer,
+        ...StyleKit.stylesForKey('sectionedAccessoryTableCell')
+      ]);
     return rules;
   }
 
   onPress = () => {
-    if(this.props.disabled) {
+    if (this.props.disabled) {
       return;
     }
 
     this.props.onPress();
     this.forceUpdate();
-  }
+  };
 
   onLongPress = () => {
-    if(this.props.disabled) {
+    if (this.props.disabled) {
       return;
     }
-    
-    if(this.props.onLongPress) {
+
+    if (this.props.onLongPress) {
       this.props.onLongPress();
     }
-  }
+  };
 
   render() {
-    var checkmarkName = Platform.OS == "android" ? "md-checkbox" : "ios-checkmark-circle";
-    var iconName = this.props.iconName ? this.props.iconName : ((this.props.selected && this.props.selected()) ? checkmarkName : null);
+    const checkmarkName =
+      Platform.OS === 'android' ? 'md-checkbox' : 'ios-checkmark-circle';
+    const iconName = this.props.iconName
+      ? this.props.iconName
+      : this.props.selected && this.props.selected()
+      ? checkmarkName
+      : null;
 
-    var iconStyles = {
+    const iconStyles = {
       width: 30,
-      maxWidth: 30,
+      maxWidth: 30
+    };
+
+    const left = this.props.leftAlignIcon;
+    let iconSize = left ? 25 : 30;
+    let color = left
+      ? StyleKit.variables.stylekitForegroundColor
+      : StyleKit.variables.stylekitInfoColor;
+
+    if (Platform.OS === 'android') {
+      iconSize -= 5;
     }
 
-    var left = this.props.leftAlignIcon;
-    var iconSize = left ? 25: 30;
-    var color = left ? StyleKit.variable("stylekitForegroundColor") : StyleKit.variable("stylekitInfoColor");
-
-
-    if(Platform.OS == "android") { iconSize -= 5; }
-
-    if(this.props.color) {
+    if (this.props.color) {
       color = this.props.color;
     }
 
@@ -60,46 +68,51 @@ export default class SectionedAccessoryTableCell extends SectionedTableCell {
       <View key={0} style={iconStyles}>
         <Icon name={iconName} size={iconSize} color={color} />
       </View>
-    )
+    );
 
-    if(!iconName) {
+    if (!iconName) {
       icon = null;
     }
 
     var textStyles = [StyleKit.styles.sectionedAccessoryTableCellLabel];
 
-    if(this.props.bold || (this.props.selected && this.props.selected())) {
-      textStyles.push(StyleKit.styles.bold)
+    if (this.props.bold || (this.props.selected && this.props.selected())) {
+      textStyles.push(StyleKit.styles.bold);
     }
-    if(this.props.tinted) {
-      textStyles.push({color: StyleKit.variable("stylekitInfoColor")})
+    if (this.props.tinted) {
+      textStyles.push({ color: StyleKit.variables.stylekitInfoColor });
     }
-    if(this.props.dimmed) {
-      textStyles.push({color: StyleKit.variable("stylekitNeutralColor")})
+    if (this.props.dimmed) {
+      textStyles.push({ color: StyleKit.variables.stylekitNeutralColor });
     }
-    if(this.props.color) {
-      textStyles.push({color: this.props.color})
+    if (this.props.color) {
+      textStyles.push({ color: this.props.color });
     }
 
-    var textWrapper = (<Text key={1} style={textStyles}>{this.props.text}</Text>);
+    const textWrapper = (
+      <Text key={1} style={textStyles}>
+        {this.props.text}
+      </Text>
+    );
 
-    var containerStyles = {
+    const containerStyles = {
       flex: 1,
       justifyContent: left ? 'flex-start' : 'space-between',
       flexDirection: 'row',
       alignItems: 'center'
-    }
+    };
 
     return (
-      <TouchableHighlight underlayColor={StyleKit.variable("stylekitBorderColor")} style={this.rules()} onPress={this.onPress} onLongPress={this.onLongPress}>
+      <TouchableHighlight
+        underlayColor={StyleKit.variables.stylekitBorderColor}
+        style={this.rules()}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+      >
         <View style={containerStyles}>
-        {
-          this.props.leftAlignIcon
-          ? [icon, textWrapper]
-          : [textWrapper, icon]
-        }
+          {this.props.leftAlignIcon ? [icon, textWrapper] : [textWrapper, icon]}
         </View>
       </TouchableHighlight>
-    )
+    );
   }
 }
diff --git a/src/components/SectionedOptionsTableCell.js b/src/components/SectionedOptionsTableCell.js
index 12f6d4b1..a053b002 100644
--- a/src/components/SectionedOptionsTableCell.js
+++ b/src/components/SectionedOptionsTableCell.js
@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
-import {View, Text, TouchableHighlight} from 'react-native';
-import ThemedComponent from "@Components/ThemedComponent";
-
-import StyleKit from "@Style/StyleKit"
+import React from 'react';
+import { View, Text, TouchableHighlight } from 'react-native';
+import ThemedComponent from '@Components/ThemedComponent';
+import StyleKit from '@Style/StyleKit';
 
 export default class SectionedOptionsTableCell extends ThemedComponent {
-
   rules() {
-    var rules = [StyleKit.styles.sectionedTableCell];
-    if(this.props.first) { rules.push(StyleKit.styles.sectionedTableCellFirst); }
-    if(this.props.height) {rules.push({height: this.props.height})};
-    if(this.props.extraStyles) {
+    let rules = [StyleKit.styles.sectionedTableCell];
+    if (this.props.first) {
+      rules.push(StyleKit.styles.sectionedTableCellFirst);
+    }
+    if (this.props.height) {
+      rules.push({ height: this.props.height });
+    }
+    if (this.props.extraStyles) {
       rules = rules.concat(this.props.extraStyles);
     }
     rules.push({
@@ -23,70 +25,83 @@ export default class SectionedOptionsTableCell extends ThemedComponent {
       paddingBottom: 0,
       paddingRight: 5,
       maxHeight: 45
-    })
+    });
     return rules;
   }
 
   render() {
     return (
       <View style={this.rules()}>
-        <Text style={[StyleKit.styles.sectionedAccessoryTableCellLabel, this.styles.titleStyles]}>{this.props.title}</Text>
+        <Text
+          style={[
+            StyleKit.styles.sectionedAccessoryTableCellLabel,
+            this.styles.titleStyles
+          ]}
+        >
+          {this.props.title}
+        </Text>
         <View style={this.styles.optionsContainerStyle}>
-          {this.props.options.map((option) => {
-            var buttonStyles = [this.styles.buttonStyles];
-            if(option.selected) {
+          {this.props.options.map(option => {
+            const buttonStyles = [this.styles.buttonStyles];
+            if (option.selected) {
               buttonStyles.push(this.styles.selectedButtonStyles);
             }
             return (
               <TouchableHighlight
-                underlayColor={StyleKit.variable("stylekitBorderColor")}
+                underlayColor={StyleKit.variables.stylekitBorderColor}
                 key={option.title}
-                style={[StyleKit.styles.view, this.styles.buttonContainerStyles]}
-                onPress={() => {this.props.onPress(option)}}>
-                  <Text style={buttonStyles}>{option.title}</Text>
+                style={[
+                  StyleKit.styles.view,
+                  this.styles.buttonContainerStyles
+                ]}
+                onPress={() => {
+                  this.props.onPress(option);
+                }}
+              >
+                <Text style={buttonStyles}>{option.title}</Text>
               </TouchableHighlight>
-            )
+            );
           })}
         </View>
       </View>
-    )
+    );
   }
 
   loadStyles() {
     this.styles = {
       titleStyles: {
-        width: "42%",
+        width: '42%',
         minWidth: 0
       },
 
       optionsContainerStyle: {
-        width: "58%",
+        width: '58%',
         flex: 1,
         flexDirection: 'row',
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: StyleKit.variable("stylekitBackgroundColor")
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: StyleKit.variables.stylekitBackgroundColor
       },
 
       buttonContainerStyles: {
-        borderLeftColor: StyleKit.variable("stylekitBorderColor"),
+        borderLeftColor: StyleKit.variables.stylekitBorderColor,
         borderLeftWidth: 1,
-        height: "100%",
+        height: '100%',
         flexGrow: 1,
         padding: 10,
         paddingTop: 12
       },
 
       buttonStyles: {
-        color: StyleKit.variable("stylekitNeutralColor"),
+        color: StyleKit.variables.stylekitNeutralColor,
         fontSize: 16,
-        textAlign: "center",
-        width: "100%",
+        textAlign: 'center',
+        width: '100%'
       },
 
       selectedButtonStyles: {
-        color: StyleKit.variable("stylekitInfoColor"),
+        color: StyleKit.variables.stylekitInfoColor
       }
-    }
+    };
   }
 }
diff --git a/src/components/SectionedTableCell.js b/src/components/SectionedTableCell.js
index 4b195edc..25ec7262 100644
--- a/src/components/SectionedTableCell.js
+++ b/src/components/SectionedTableCell.js
@@ -1,27 +1,30 @@
 import React, { Component } from 'react';
-import {View} from 'react-native';
+import { View } from 'react-native';
 
-import StyleKit from "@Style/StyleKit"
+import StyleKit from '@Style/StyleKit';
 
 export default class SectionedTableCell extends Component {
-
   rules() {
-    var rules = [StyleKit.styles.sectionedTableCell];
-    if(this.props.first) { rules.push(StyleKit.stylesForKey("sectionedTableCellFirst")); }
-    if(this.props.last) { rules.push(StyleKit.stylesForKey("sectionedTableCellLast")); }
-    if(this.props.textInputCell) {rules.push(StyleKit.styles.textInputCell); }
-    if(this.props.height) {rules.push({height: this.props.height})};
-    if(this.props.extraStyles) {
+    let rules = [StyleKit.styles.sectionedTableCell];
+    if (this.props.first) {
+      rules.push(StyleKit.stylesForKey('sectionedTableCellFirst'));
+    }
+    if (this.props.last) {
+      rules.push(StyleKit.stylesForKey('sectionedTableCellLast'));
+    }
+    if (this.props.textInputCell) {
+      rules.push(StyleKit.styles.textInputCell);
+    }
+    if (this.props.height) {
+      rules.push({ height: this.props.height });
+    }
+    if (this.props.extraStyles) {
       rules = rules.concat(this.props.extraStyles);
     }
     return rules;
   }
 
   render() {
-    return (
-      <View style={this.rules()}>
-        {this.props.children}
-      </View>
-    )
+    return <View style={this.rules()}>{this.props.children}</View>;
   }
 }
diff --git a/src/components/TableSection.js b/src/components/TableSection.js
index 9146298f..015f9a02 100644
--- a/src/components/TableSection.js
+++ b/src/components/TableSection.js
@@ -1,23 +1,17 @@
 import React, { Component } from 'react';
-import {View} from 'react-native';
-
-import StyleKit from "@Style/StyleKit"
+import { View } from 'react-native';
+import StyleKit from '@Style/StyleKit';
 
 export default class TableSection extends Component {
-
   rules() {
-    var rules = [StyleKit.styles.tableSection];
-    if(this.props.extraStyles) {
+    let rules = [StyleKit.styles.tableSection];
+    if (this.props.extraStyles) {
       rules = rules.concat(this.props.extraStyles);
     }
     return rules;
   }
 
   render() {
-    return (
-      <View style={this.rules()}>
-        {this.props.children}
-      </View>
-    )
+    return <View style={this.rules()}>{this.props.children}</View>;
   }
 }
diff --git a/src/components/ThemedPureComponent.js b/src/components/ThemedPureComponent.js
index 5469445c..c4530e0f 100644
--- a/src/components/ThemedPureComponent.js
+++ b/src/components/ThemedPureComponent.js
@@ -1,8 +1,7 @@
-import React, { PureComponent } from 'react';
-import StyleKit from "@Style/StyleKit"
+import { PureComponent } from 'react';
+import StyleKit from '@Style/StyleKit';
 
 export default class ThemedPureComponent extends PureComponent {
-
   constructor(props) {
     super(props);
 
@@ -24,12 +23,7 @@ export default class ThemedPureComponent extends PureComponent {
     this.updateStyles();
   }
 
-  loadStyles() {
-
-  }
-
-  updateStyles() {
-
-  }
+  loadStyles() {}
 
+  updateStyles() {}
 }