Updated native base theme

native-base-theme/components/Badge.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const badgeTheme = {
-    ".primary": {
-      backgroundColor: variables.btnPrimaryBg
+    '.primary': {
+      backgroundColor: variables.buttonPrimaryBg
     },
-    ".warning": {
-      backgroundColor: variables.btnWarningBg
+    '.warning': {
+      backgroundColor: variables.buttonWarningBg
     },
-    ".info": {
-      backgroundColor: variables.btnInfoBg
+    '.info': {
+      backgroundColor: variables.buttonInfoBg
     },
-    ".success": {
-      backgroundColor: variables.btnSuccessBg
+    '.success': {
+      backgroundColor: variables.buttonSuccessBg
     },
-    ".danger": {
-      backgroundColor: variables.btnDangerBg
+    '.danger': {
+      backgroundColor: variables.buttonDangerBg
     },
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.badgeColor,
       fontSize: variables.fontSizeBase,
       lineHeight: variables.lineHeight - 1,
-      textAlign: "center",
+      textAlign: 'center',
       paddingHorizontal: 3
     },
     backgroundColor: variables.badgeBg,
     padding: variables.badgePadding,
     paddingHorizontal: 6,
-    alignSelf: "flex-start",
-    justifyContent: variables.platform === "ios" ? "center" : undefined,
+    alignSelf: 'flex-start',
+    justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
     borderRadius: 13.5,
     height: 27
   };

native-base-theme/components/Body.js

 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const bodyTheme = {
     flex: 1,
     alignItems: 'center',
-    alignSelf: 'center',
+    alignSelf: 'center'
   };
 
   return bodyTheme;

native-base-theme/components/Button.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
   const platform = variables.platform;
   const darkCommon = {
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.brandDark
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.brandDark
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       color: variables.brandDark
     }
   };
   const lightCommon = {
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.brandLight
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.brandLight
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       color: variables.brandLight
     }
   };
   const primaryCommon = {
-    "NativeBase.Text": {
-      color: variables.btnPrimaryBg
+    'NativeBase.Text': {
+      color: variables.buttonPrimaryBg
     },
-    "NativeBase.Icon": {
-      color: variables.btnPrimaryBg
+    'NativeBase.Icon': {
+      color: variables.buttonPrimaryBg
     },
-    "NativeBase.IconNB": {
-      color: variables.btnPrimaryBg
+    'NativeBase.IconNB': {
+      color: variables.buttonPrimaryBg
     }
   };
   const successCommon = {
-    "NativeBase.Text": {
-      color: variables.btnSuccessBg
+    'NativeBase.Text': {
+      color: variables.buttonSuccessBg
     },
-    "NativeBase.Icon": {
-      color: variables.btnSuccessBg
+    'NativeBase.Icon': {
+      color: variables.buttonSuccessBg
     },
-    "NativeBase.IconNB": {
-      color: variables.btnSuccessBg
+    'NativeBase.IconNB': {
+      color: variables.buttonSuccessBg
     }
   };
   const infoCommon = {
-    "NativeBase.Text": {
-      color: variables.btnInfoBg
+    'NativeBase.Text': {
+      color: variables.buttonInfoBg
     },
-    "NativeBase.Icon": {
-      color: variables.btnInfoBg
+    'NativeBase.Icon': {
+      color: variables.buttonInfoBg
     },
-    "NativeBase.IconNB": {
-      color: variables.btnInfoBg
+    'NativeBase.IconNB': {
+      color: variables.buttonInfoBg
     }
   };
   const warningCommon = {
-    "NativeBase.Text": {
-      color: variables.btnWarningBg
+    'NativeBase.Text': {
+      color: variables.buttonWarningBg
     },
-    "NativeBase.Icon": {
-      color: variables.btnWarningBg
+    'NativeBase.Icon': {
+      color: variables.buttonWarningBg
     },
-    "NativeBase.IconNB": {
-      color: variables.btnWarningBg
+    'NativeBase.IconNB': {
+      color: variables.buttonWarningBg
     }
   };
   const dangerCommon = {
-    "NativeBase.Text": {
-      color: variables.btnDangerBg
+    'NativeBase.Text': {
+      color: variables.buttonDangerBg
     },
-    "NativeBase.Icon": {
-      color: variables.btnDangerBg
+    'NativeBase.Icon': {
+      color: variables.buttonDangerBg
     },
-    "NativeBase.IconNB": {
-      color: variables.btnDangerBg
+    'NativeBase.IconNB': {
+      color: variables.buttonDangerBg
     }
   };
   const buttonTheme = {
-    ".disabled": {
-      ".transparent": {
-        backgroundColor: null,
-        "NativeBase.Text": {
-          color: variables.btnDisabledBg
+    '.disabled': {
+      '.transparent': {
+        backgroundColor: 'transparent',
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
         },
-        "NativeBase.Icon": {
-          color: variables.btnDisabledBg
+        'NativeBase.Icon': {
+          color: variables.buttonDisabledBg
         },
-        "NativeBase.IconNB": {
-          color: variables.btnDisabledBg
+        'NativeBase.IconNB': {
+          color: variables.buttonDisabledBg
         }
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         color: variables.brandLight
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.brandLight
       },
-      backgroundColor: variables.btnDisabledBg
+      backgroundColor: variables.buttonDisabledBg
     },
-    ".bordered": {
-      ".dark": {
+    '.bordered': {
+      '.dark': {
         ...darkCommon,
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         borderColor: variables.brandDark,
         borderWidth: variables.borderWidth * 2
       },
-      ".light": {
+      '.light': {
         ...lightCommon,
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         borderColor: variables.brandLight,
         borderWidth: variables.borderWidth * 2
       },
-      ".primary": {
+      '.primary': {
         ...primaryCommon,
-        backgroundColor: "transparent",
-        borderColor: variables.btnPrimaryBg,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonPrimaryBg,
         borderWidth: variables.borderWidth * 2
       },
-      ".success": {
+      '.success': {
         ...successCommon,
-        backgroundColor: "transparent",
-        borderColor: variables.btnSuccessBg,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonSuccessBg,
         borderWidth: variables.borderWidth * 2
       },
-      ".info": {
+      '.info': {
         ...infoCommon,
-        backgroundColor: "transparent",
-        borderColor: variables.btnInfoBg,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonInfoBg,
         borderWidth: variables.borderWidth * 2
       },
-      ".warning": {
+      '.warning': {
         ...warningCommon,
-        backgroundColor: "transparent",
-        borderColor: variables.btnWarningBg,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonWarningBg,
         borderWidth: variables.borderWidth * 2
       },
-      ".danger": {
+      '.danger': {
         ...dangerCommon,
-        backgroundColor: "transparent",
-        borderColor: variables.btnDangerBg,
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDangerBg,
         borderWidth: variables.borderWidth * 2
       },
-      ".disabled": {
-        backgroundColor: null,
-        borderColor: variables.btnDisabledBg,
+      '.disabled': {
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDisabledBg,
         borderWidth: variables.borderWidth * 2,
-        "NativeBase.Text": {
-          color: variables.btnDisabledBg
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
         }
       },
       ...primaryCommon,
       shadowOffset: null,
       shadowOpacity: null,
       shadowRadius: null,
-      backgroundColor: "transparent"
+      backgroundColor: 'transparent'
     },
 
-    ".dark": {
-      ".bordered": {
+    '.dark': {
+      '.bordered': {
         ...darkCommon
       },
       backgroundColor: variables.brandDark
     },
-    ".light": {
-      ".transparent": {
+    '.light': {
+      '.transparent': {
         ...lightCommon,
-        backgroundColor: null
+        backgroundColor: 'transparent'
       },
-      ".bordered": {
+      '.bordered': {
         ...lightCommon
       },
       ...darkCommon,
       backgroundColor: variables.brandLight
     },
 
-    ".primary": {
-      ".bordered": {
+    '.primary': {
+      '.bordered': {
         ...primaryCommon
       },
-      backgroundColor: variables.btnPrimaryBg
+      backgroundColor: variables.buttonPrimaryBg
     },
 
-    ".success": {
-      ".bordered": {
+    '.success': {
+      '.bordered': {
         ...successCommon
       },
-      backgroundColor: variables.btnSuccessBg
+      backgroundColor: variables.buttonSuccessBg
     },
 
-    ".info": {
-      ".bordered": {
+    '.info': {
+      '.bordered': {
         ...infoCommon
       },
-      backgroundColor: variables.btnInfoBg
+      backgroundColor: variables.buttonInfoBg
     },
 
-    ".warning": {
-      ".bordered": {
+    '.warning': {
+      '.bordered': {
         ...warningCommon
       },
-      backgroundColor: variables.btnWarningBg
+      backgroundColor: variables.buttonWarningBg
     },
 
-    ".danger": {
-      ".bordered": {
+    '.danger': {
+      '.bordered': {
         ...dangerCommon
       },
-      backgroundColor: variables.btnDangerBg
+      backgroundColor: variables.buttonDangerBg
     },
 
-    ".block": {
-      justifyContent: "center",
-      alignSelf: "stretch"
+    '.block': {
+      justifyContent: 'center',
+      alignSelf: 'stretch'
     },
 
-    ".full": {
-      justifyContent: "center",
-      alignSelf: "stretch",
+    '.full': {
+      justifyContent: 'center',
+      alignSelf: 'stretch',
       borderRadius: 0
     },
 
-    ".rounded": {
-      // paddingHorizontal: variables.buttonPadding + 20,
+    '.rounded': {
       borderRadius: variables.borderRadiusLarge
     },
 
-    ".transparent": {
-      backgroundColor: "transparent",
+    '.transparent': {
+      backgroundColor: 'transparent',
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowRadius: null,
       shadowOpacity: null,
       ...primaryCommon,
-      ".dark": {
+      '.dark': {
         ...darkCommon,
-        backgroundColor: null
       },
-      ".danger": {
+      '.danger': {
         ...dangerCommon,
-        backgroundColor: null
       },
-      ".warning": {
+      '.warning': {
         ...warningCommon,
-        backgroundColor: null
       },
-      ".info": {
+      '.info': {
         ...infoCommon,
-        backgroundColor: null
       },
-      ".primary": {
+      '.primary': {
         ...primaryCommon,
-        backgroundColor: null
       },
-      ".success": {
+      '.success': {
         ...successCommon,
-        backgroundColor: null
       },
-      ".light": {
+      '.light': {
         ...lightCommon,
-        backgroundColor: null
       },
-      ".disabled": {
-        backgroundColor: "transparent",
-        borderColor: variables.btnDisabledBg,
+      '.disabled': {
+        backgroundColor: 'transparent',
+        borderColor: variables.buttonDisabledBg,
         borderWidth: variables.borderWidth * 2,
-        "NativeBase.Text": {
-          color: variables.btnDisabledBg
+        'NativeBase.Text': {
+          color: variables.buttonDisabledBg
         },
-        "NativeBase.Icon": {
-          color: variables.btnDisabledBg
+        'NativeBase.Icon': {
+          color: variables.buttonDisabledBg
         },
-        "NativeBase.IconNB": {
-          color: variables.btnDisabledBg
+        'NativeBase.IconNB': {
+          color: variables.buttonDisabledBg
         }
       }
     },
 
-    ".small": {
+    '.small': {
       height: 30,
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         fontSize: 14
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         fontSize: 20,
         paddingTop: 0
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         fontSize: 20,
         paddingTop: 0
       }
     },
 
-    ".large": {
+    '.large': {
       height: 60,
-      "NativeBase.Text": {
-        fontSize: 22,
+      'NativeBase.Text': {
+        fontSize: 22
       }
     },
 
-    ".capitalize": {},
+    '.capitalize': {},
 
-    ".vertical": {
-      flexDirection: "column",
+    '.vertical': {
+      flexDirection: 'column',
       height: null
     },
 
-    "NativeBase.Text": {
-      fontFamily: variables.btnFontFamily,
+    'NativeBase.Text': {
+      fontFamily: variables.buttonFontFamily,
       marginLeft: 0,
       marginRight: 0,
-      color: variables.btnTextColor,
-      fontSize: variables.btnTextSize,
+      color: variables.buttonTextColor,
+      fontSize: variables.buttonTextSize,
       paddingHorizontal: 16,
-      backgroundColor: "transparent"
-      // childPosition: 1
+      backgroundColor: 'transparent'
     },
 
-    "NativeBase.Icon": {
-      color: variables.btnTextColor,
+    'NativeBase.Icon': {
+      color: variables.buttonTextColor,
       fontSize: 24,
       marginHorizontal: 16,
-      paddingTop: platform === "ios" ? 2 : undefined
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
     },
-    "NativeBase.IconNB": {
-      color: variables.btnTextColor,
+    'NativeBase.IconNB': {
+      color: variables.buttonTextColor,
       fontSize: 24,
       marginHorizontal: 16,
-      paddingTop: platform === "ios" ? 2 : undefined
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
     },
 
-    ".iconLeft": {
-      "NativeBase.Text": {
+    '.iconLeft': {
+      'NativeBase.Text': {
         marginLeft: 0
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         marginRight: 0,
         marginLeft: 16
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         marginRight: 0,
         marginLeft: 16
       }
     },
-    ".iconRight": {
-      "NativeBase.Text": {
+    '.iconRight': {
+      'NativeBase.Text': {
         marginRight: 0
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         marginLeft: 0,
         marginRight: 16
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         marginLeft: 0,
         marginRight: 16
       }
     },
-    ".picker": {
-      "NativeBase.Text": {
-        ".note": {
+    '.picker': {
+      'NativeBase.Text': {
+        '.note': {
           fontSize: 16,
           lineHeight: null
         }
       }
     },
-
     paddingVertical: variables.buttonPadding,
-    // paddingHorizontal: variables.buttonPadding + 10,
-    backgroundColor: variables.btnPrimaryBg,
+    backgroundColor: variables.buttonPrimaryBg,
     borderRadius: variables.borderRadiusBase,
-    borderColor: variables.btnPrimaryBg,
+    borderColor: variables.buttonPrimaryBg,
     borderWidth: null,
     height: 45,
-    alignSelf: "flex-start",
-    flexDirection: "row",
+    flexDirection: 'row',
     elevation: 2,
-    shadowColor: platformStyle === "material" ? variables.brandDark : undefined,
+    shadowColor:
+      platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
     shadowOffset:
-      platformStyle === "material" ? { width: 0, height: 2 } : undefined,
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
-    alignItems: "center",
-    justifyContent: "space-between"
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+    alignItems: 'center',
+    justifyContent: 'space-between'
   };
   return buttonTheme;
 };

native-base-theme/components/Card.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const cardTheme = {
-    ".transparent": {
+    '.transparent': {
       shadowColor: null,
       shadowOffset: null,
       shadowOpacity: null,
       shadowRadius: null,
       elevation: null,
-      backgroundColor: "transparent",
+      backgroundColor: 'transparent',
       borderWidth: 0
     },
-    ".noShadow": {
+    '.noShadow': {
       shadowColor: null,
       shadowOffset: null,
       shadowOpacity: null,
     borderWidth: variables.borderWidth,
     borderRadius: variables.cardBorderRadius,
     borderColor: variables.cardBorderColor,
-    flexWrap: "nowrap",
+    flexWrap: 'nowrap',
     backgroundColor: variables.cardDefaultBg,
-    shadowColor: "#000",
+    shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 1.5,

native-base-theme/components/CardItem.js

 // @flow
 
-import { StyleSheet } from "react-native";
-import variable from "./../variables/platform";
+import { StyleSheet } from 'react-native';
 
-export default (variables /*: * */ = variable) => {
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
   const transparentBtnCommon = {
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       fontSize: variables.DefaultFontSize - 3,
       color: variables.sTabBarActiveTextColor
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       fontSize: variables.iconFontSize - 10,
       color: variables.sTabBarActiveTextColor,
       marginHorizontal: null
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       fontSize: variables.iconFontSize - 10,
       color: variables.sTabBarActiveTextColor
     },
   };
 
   const cardItemTheme = {
-    "NativeBase.Left": {
-      "NativeBase.Body": {
-        "NativeBase.Text": {
-          ".note": {
+    'NativeBase.Left': {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          '.note': {
             color: variables.listNoteColor,
-            fontWeight: "400",
+            fontWeight: '400',
             marginRight: 20
           }
         },
         marginLeft: 10,
         alignItems: null
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         fontSize: variables.iconFontSize
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         fontSize: variables.iconFontSize
       },
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         marginLeft: 10,
-        alignSelf: "center"
+        alignSelf: 'center'
       },
-      "NativeBase.Button": {
-        ".transparent": {
+      'NativeBase.Button': {
+        '.transparent': {
           ...transparentBtnCommon,
           paddingRight: variables.cardItemPadding + 5
         }
       },
       flex: 1,
-      flexDirection: "row",
-      alignItems: "center"
+      flexDirection: 'row',
+      alignItems: 'center'
     },
-    ".content": {
-      "NativeBase.Text": {
-        color: platform === "ios" ? "#555" : "#222",
+    '.content': {
+      'NativeBase.Text': {
+        color: platform === PLATFORM.IOS ? '#555' : '#222',
         fontSize: variables.DefaultFontSize - 2
       }
     },
-    ".cardBody": {
+    '.cardBody': {
       padding: -5,
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         marginTop: 5
       }
     },
-    "NativeBase.Body": {
-      "NativeBase.Text": {
-        ".note": {
+    'NativeBase.Body': {
+      'NativeBase.Text': {
+        '.note': {
           color: variables.listNoteColor,
-          fontWeight: "200",
+          fontWeight: '200',
           marginRight: 20
         }
       },
-      "NativeBase.Button": {
-        ".transparent": {
+      'NativeBase.Button': {
+        '.transparent': {
           ...transparentBtnCommon,
           paddingRight: variables.cardItemPadding + 5,
-          alignSelf: "stretch"
+          alignSelf: 'stretch'
         }
       },
       flex: 1,
-      alignSelf: "stretch",
-      alignItems: "flex-start"
+      alignSelf: 'stretch',
+      alignItems: 'flex-start'
     },
-    "NativeBase.Right": {
-      "NativeBase.Badge": {
+    'NativeBase.Right': {
+      'NativeBase.Badge': {
         alignSelf: null
       },
-      "NativeBase.Button": {
-        ".transparent": {
+      'NativeBase.Button': {
+        '.transparent': {
           ...transparentBtnCommon
         },
         alignSelf: null
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         alignSelf: null,
         fontSize: variables.iconFontSize - 8,
         color: variables.cardBorderColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         alignSelf: null,
         fontSize: variables.iconFontSize - 8,
         color: variables.cardBorderColor
       },
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         fontSize: variables.DefaultFontSize - 1,
         alignSelf: null
       },
-      "NativeBase.Thumbnail": {
+      'NativeBase.Thumbnail': {
         alignSelf: null
       },
-      "NativeBase.Image": {
+      'NativeBase.Image': {
         alignSelf: null
       },
-      "NativeBase.Radio": {
+      'NativeBase.Radio': {
         alignSelf: null
       },
-      "NativeBase.Checkbox": {
+      'NativeBase.Checkbox': {
         alignSelf: null
       },
-      "NativeBase.Switch": {
+      'NativeBase.Switch': {
         alignSelf: null
       },
       flex: 0.8
     },
-    ".header": {
-      "NativeBase.Text": {
+    '.header': {
+      'NativeBase.Text': {
         fontSize: 16,
-        fontWeight: platform === "ios" ? "600" : "500"
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
       },
-      ".bordered": {
-        "NativeBase.Text": {
+      '.bordered': {
+        'NativeBase.Text': {
           color: variables.brandPrimary,
-          fontWeight: platform === "ios" ? "600" : "500"
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
         },
         borderBottomWidth: variables.borderWidth
       },
       borderBottomWidth: null,
       paddingVertical: variables.cardItemPadding + 5
     },
-    ".footer": {
-      "NativeBase.Text": {
+    '.footer': {
+      'NativeBase.Text': {
         fontSize: 16,
-        fontWeight: platform === "ios" ? "600" : "500"
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
       },
-      ".bordered": {
-        "NativeBase.Text": {
+      '.bordered': {
+        'NativeBase.Text': {
           color: variables.brandPrimary,
-          fontWeight: platform === "ios" ? "600" : "500"
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
         },
         borderTopWidth: variables.borderWidth
       },
       borderBottomWidth: null
     },
-    "NativeBase.Text": {
-      ".note": {
+    'NativeBase.Text': {
+      '.note': {
         color: variables.listNoteColor,
-        fontWeight: "200"
+        fontWeight: '200'
       }
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       width: variables.iconFontSize + 5,
       fontSize: variables.iconFontSize - 2
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       width: variables.iconFontSize + 5,
       fontSize: variables.iconFontSize - 2
     },
-    ".bordered": {
+    '.bordered': {
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderColor: variables.cardBorderColor
     },
-    ".first": {
+    '.first': {
       borderTopLeftRadius: variables.cardBorderRadius,
       borderTopRightRadius: variables.cardBorderRadius
     },
-    ".last": {
+    '.last': {
       borderBottomLeftRadius: variables.cardBorderRadius,
       borderBottomRightRadius: variables.cardBorderRadius
     },
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     borderRadius: variables.cardBorderRadius,
     padding: variables.cardItemPadding + 5,
     paddingVertical: variables.cardItemPadding,

native-base-theme/components/CheckBox.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const checkBoxTheme = {
-    ".checked": {
-      "NativeBase.Icon": {
+    '.checked': {
+      'NativeBase.Icon': {
         color: variables.checkboxTickColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.checkboxTickColor
       }
     },
-    "NativeBase.Icon": {
-      color: "transparent",
+    'NativeBase.Icon': {
+      color: 'transparent',
       lineHeight: variables.CheckboxIconSize,
       marginTop: variables.CheckboxIconMarginTop,
       fontSize: variables.CheckboxFontSize
     },
-    "NativeBase.IconNB": {
-      color: "transparent",
+    'NativeBase.IconNB': {
+      color: 'transparent',
       lineHeight: variables.CheckboxIconSize,
       marginTop: variables.CheckboxIconMarginTop,
       fontSize: variables.CheckboxFontSize
     },
     borderRadius: variables.CheckboxRadius,
-    overflow: "hidden",
+    overflow: 'hidden',
     width: variables.checkboxSize,
     height: variables.checkboxSize,
     borderWidth: variables.CheckboxBorderWidth,

native-base-theme/components/Container.js

 // @flow
 
-import { Platform, Dimensions } from "react-native";
+import { Platform, Dimensions } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-const deviceHeight = Dimensions.get("window").height;
-export default (variables /*: * */ = variable) => {
+const deviceHeight = Dimensions.get('window').height;
+export default (variables /* : * */ = variable) => {
   const theme = {
     flex: 1,
-    height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20,
+    height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
     backgroundColor: variables.containerBgColor
   };
 

native-base-theme/components/Content.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const contentTheme = {
     flex: 1,
-    backgroundColor: "transparent",
-    "NativeBase.Segment": {
+    backgroundColor: 'transparent',
+    'NativeBase.Segment': {
       borderWidth: 0,
-      backgroundColor: "transparent"
+      backgroundColor: 'transparent'
     }
   };
 

native-base-theme/components/Fab.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
-  const platform = variables.platform;
-
+export default () => {
   const fabTheme = {
-    "NativeBase.Button": {
-      alignItems: "center",
+    'NativeBase.Button': {
+      alignItems: 'center',
       padding: null,
-      justifyContent: "center",
-      "NativeBase.Icon": {
-        alignSelf: "center",
+      justifyContent: 'center',
+      'NativeBase.Icon': {
+        alignSelf: 'center',
         fontSize: 20,
         marginLeft: 0,
-        marginRight: 0,
+        marginRight: 0
       },
-      "NativeBase.IconNB": {
-        alignSelf: "center",
+      'NativeBase.IconNB': {
+        alignSelf: 'center',
         fontSize: 20,
         marginLeft: 0,
-        marginRight: 0,
-      },
-    },
+        marginRight: 0
+      }
+    }
   };
 
   return fabTheme;

native-base-theme/components/Footer.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
   const platform = variables.platform;
 
   const iconCommon = {
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.tabBarActiveTextColor
     }
   };
   const iconNBCommon = {
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       color: variables.tabBarActiveTextColor
     }
   };
   const textCommon = {
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.tabBarActiveTextColor
     }
   };
   const footerTheme = {
-    "NativeBase.Left": {
-      "NativeBase.Button": {
-        ".transparent": {
-          backgroundColor: "transparent",
+    'NativeBase.Left': {
+      'NativeBase.Button': {
+        '.transparent': {
+          backgroundColor: 'transparent',
           borderColor: null,
           elevation: 0,
           shadowColor: null,
         },
         alignSelf: null,
         ...iconCommon,
-        ...iconNBCommon,
+        ...iconNBCommon
         // ...textCommon
       },
       flex: 1,
-      alignSelf: "center",
-      alignItems: "flex-start"
+      alignSelf: 'center',
+      alignItems: 'flex-start'
     },
-    "NativeBase.Body": {
+    'NativeBase.Body': {
       flex: 1,
-      alignItems: "center",
-      alignSelf: "center",
-      flexDirection: "row",
-      "NativeBase.Button": {
-        alignSelf: "center",
-        ".transparent": {
-          backgroundColor: "transparent",
+      alignItems: 'center',
+      alignSelf: 'center',
+      flexDirection: 'row',
+      'NativeBase.Button': {
+        alignSelf: 'center',
+        '.transparent': {
+          backgroundColor: 'transparent',
           borderColor: null,
           elevation: 0,
           shadowColor: null,
           ...iconNBCommon,
           ...textCommon
         },
-        ".full": {
+        '.full': {
           height: variables.footerHeight,
           paddingBottom: variables.footerPaddingBottom,
           flex: 1
         },
         ...iconCommon,
-        ...iconNBCommon,
+        ...iconNBCommon
         // ...textCommon
       }
     },
-    "NativeBase.Right": {
-      "NativeBase.Button": {
-        ".transparent": {
-          backgroundColor: "transparent",
+    'NativeBase.Right': {
+      'NativeBase.Button': {
+        '.transparent': {
+          backgroundColor: 'transparent',
           borderColor: null,
           elevation: 0,
           shadowColor: null,
         },
         alignSelf: null,
         ...iconCommon,
-        ...iconNBCommon,
+        ...iconNBCommon
         // ...textCommon
       },
       flex: 1,
-      alignSelf: "center",
-      alignItems: "flex-end"
+      alignSelf: 'center',
+      alignItems: 'flex-end'
     },
     backgroundColor: variables.footerDefaultBg,
-    flexDirection: "row",
-    justifyContent: "center",
+    flexDirection: 'row',
+    justifyContent: 'center',
     borderTopWidth:
-      platform === "ios" && platformStyle !== "material"
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
         ? variables.borderWidth
         : undefined,
     borderColor:
-      platform === "ios" && platformStyle !== "material"
-        ? "#cbcbcb"
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+        ? '#cbcbcb'
         : undefined,
     height: variables.footerHeight,
     paddingBottom: variables.footerPaddingBottom,

native-base-theme/components/FooterTab.js

 // @flow
 
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const footerTabTheme = {
-    "NativeBase.Button": {
-      ".active": {
-        "NativeBase.Text": {
+    'NativeBase.Button': {
+      '.active': {
+        'NativeBase.Text': {
           color: variables.tabBarActiveTextColor,
           fontSize: variables.tabBarTextSize,
           lineHeight: 16
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.tabBarActiveTextColor
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.tabBarActiveTextColor
         },
         backgroundColor: variables.tabActiveBgColor
       },
       flexDirection: null,
-      backgroundColor: "transparent",
+      backgroundColor: 'transparent',
       borderColor: null,
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowRadius: null,
       shadowOpacity: null,
-      alignSelf: "center",
+      alignSelf: 'center',
       flex: 1,
       height: variables.footerHeight,
-      justifyContent: "center",
-      ".badge": {
-        "NativeBase.Badge": {
-          "NativeBase.Text": {
+      justifyContent: 'center',
+      '.badge': {
+        'NativeBase.Badge': {
+          'NativeBase.Text': {
             fontSize: 11,
-            fontWeight: platform === "ios" ? "600" : undefined,
+            fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
             lineHeight: 14
           },
           top: -3,
-          alignSelf: "center",
+          alignSelf: 'center',
           left: 10,
           zIndex: 99,
           height: 18,
           padding: 1.7,
           paddingHorizontal: 3
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           marginTop: -18
         }
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         color: variables.tabBarTextColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.tabBarTextColor
       },
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         color: variables.tabBarTextColor,
         fontSize: variables.tabBarTextSize,
         lineHeight: 16
       }
     },
-    backgroundColor: Platform.OS === "android"
-      ? variables.footerDefaultBg
-      : undefined,
-    flexDirection: "row",
-    justifyContent: "space-between",
+    backgroundColor:
+      Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     flex: 1,
-    alignSelf: "stretch"
+    alignSelf: 'stretch'
   };
 
   return footerTabTheme;

native-base-theme/components/Form.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
-  const platform = variables.platform;
-
+export default () => {
   const theme = {
-    "NativeBase.Item": {
-      ".fixedLabel": {
-        "NativeBase.Label": {
+    'NativeBase.Item': {
+      '.fixedLabel': {
+        'NativeBase.Label': {
           paddingLeft: null
         },
         marginLeft: 15
       },
-      ".inlineLabel": {
-        "NativeBase.Label": {
+      '.inlineLabel': {
+        'NativeBase.Label': {
           paddingLeft: null
         },
         marginLeft: 15
       },
-      ".placeholderLabel": {
-        "NativeBase.Input": {}
+      '.placeholderLabel': {
+        'NativeBase.Input': {}
       },
-      ".stackedLabel": {
-        "NativeBase.Label": {
+      '.stackedLabel': {
+        'NativeBase.Label': {
           top: 5,
           paddingLeft: null
         },
-        "NativeBase.Input": {
+        'NativeBase.Input': {
           paddingLeft: null,
           marginLeft: null
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           marginTop: 36
         },
         marginLeft: 15
       },
-      ".floatingLabel": {
-        "NativeBase.Input": {
+      '.floatingLabel': {
+        'NativeBase.Input': {
           paddingLeft: null,
           top: 10,
           marginLeft: null
         },
-        "NativeBase.Label": {
+        'NativeBase.Label': {
           left: 0,
           top: 6
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           top: 6
         },
         marginTop: 15,
         marginLeft: 15
       },
-      ".regular": {
-        "NativeBase.Label": {
+      '.regular': {
+        'NativeBase.Label': {
           left: 0
         },
         marginLeft: 0
       },
-      ".rounded": {
-        "NativeBase.Label": {
+      '.rounded': {
+        'NativeBase.Label': {
           left: 0
         },
         marginLeft: 0
       },
-      ".underline": {
-        "NativeBase.Label": {
+      '.underline': {
+        'NativeBase.Label': {
           left: 0,
           top: 0,
-          position: "relative"
+          position: 'relative'
         },
-        "NativeBase.Input": {
+        'NativeBase.Input': {
           left: -15
         },
         marginLeft: 15
       },
-      ".last": {
+      '.last': {
         marginLeft: 0,
         paddingLeft: 15
       },
-      "NativeBase.Label": {
+      'NativeBase.Label': {
         paddingRight: 5
       },
       marginLeft: 15

native-base-theme/components/H1.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h1Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH1,
-    lineHeight: variables.lineHeightH1,
+    lineHeight: variables.lineHeightH1
   };
 
   return h1Theme;

native-base-theme/components/H2.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h2Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH2,
-    lineHeight: variables.lineHeightH2,
+    lineHeight: variables.lineHeightH2
   };
 
   return h2Theme;

native-base-theme/components/H3.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h3Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH3,

native-base-theme/components/Header.js

 // @flow
 
-import { PixelRatio, StatusBar } from "react-native";
+import { PixelRatio, StatusBar } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
   const platform = variables.platform;
 
   const headerTheme = {
-    ".span": {
+    '.span': {
       height: 128,
-      "NativeBase.Left": {
-        alignSelf: "flex-start"
+      'NativeBase.Left': {
+        alignSelf: 'flex-start'
       },
-      "NativeBase.Body": {
-        alignSelf: "flex-end",
-        alignItems: "flex-start",
-        justifyContent: "center",
+      'NativeBase.Body': {
+        alignSelf: 'flex-end',
+        alignItems: 'flex-start',
+        justifyContent: 'center',
         paddingBottom: 26
       },
-      "NativeBase.Right": {
-        alignSelf: "flex-start"
+      'NativeBase.Right': {
+        alignSelf: 'flex-start'
       }
     },
-    ".hasSubtitle": {
-      "NativeBase.Body": {
-        "NativeBase.Title": {
+    '.hasSubtitle': {
+      'NativeBase.Body': {
+        'NativeBase.Title': {
           fontSize: variables.titleFontSize - 2,
           fontFamily: variables.titleFontfamily,
-          textAlign: "center",
-          fontWeight: "500",
+          textAlign: 'center',
+          fontWeight: '500',
           paddingBottom: 3
         },
-        "NativeBase.Subtitle": {
+        'NativeBase.Subtitle': {
           fontSize: variables.subTitleFontSize,
           fontFamily: variables.titleFontfamily,
           color: variables.subtitleColor,
-          textAlign: "center"
+          textAlign: 'center'
         }
       }
     },
-    ".transparent": {
-      backgroundColor: "transparent",
-      borderBottomColor: "transparent",
+    '.transparent': {
+      backgroundColor: 'transparent',
+      borderBottomColor: 'transparent',
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowRadius: null,
       shadowOpacity: null,
-      paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
-      height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
+      paddingTop:
+        platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
+      height:
+        platform === PLATFORM.ANDROID
+          ? variables.toolbarHeight + StatusBar.currentHeight
+          : variables.toolbarHeight
     },
-    ".noShadow": {
+    '.noShadow': {
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowRadius: null,
       shadowOpacity: null
     },
-    ".hasTabs": {
+    '.hasTabs': {
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowOpacity: null,
       borderBottomWidth: null
     },
-    ".hasSegment": {
+    '.hasSegment': {
       elevation: 0,
       shadowColor: null,
       shadowOffset: null,
       shadowRadius: null,
       shadowOpacity: null,
       borderBottomWidth: null,
-      "NativeBase.Left": {
+      'NativeBase.Left': {
         flex: 0.3
       },
-      "NativeBase.Right": {
+      'NativeBase.Right': {
         flex: 0.3
       },
-      "NativeBase.Body": {
+      'NativeBase.Body': {
         flex: 1,
-        "NativeBase.Segment": {
+        'NativeBase.Segment': {
           marginRight: 0,
-          alignSelf: "center",
-          "NativeBase.Button": {
+          alignSelf: 'center',
+          'NativeBase.Button': {
             paddingLeft: 0,
             paddingRight: 0
           }
         }
       }
     },
-    ".noLeft": {
-      "NativeBase.Left": {
-        width: platform === "ios" ? undefined : 0,
-        flex: platform === "ios" ? 1 : 0
+    '.noLeft': {
+      'NativeBase.Left': {
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        flex: platform === PLATFORM.IOS ? 1 : 0
       },
-      "NativeBase.Body": {
-        "NativeBase.Title": {
-          paddingLeft: platform === "ios" ? undefined : 10
+      'NativeBase.Body': {
+        'NativeBase.Title': {
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
         },
-        "NativeBase.Subtitle": {
-          paddingLeft: platform === "ios" ? undefined : 10
+        'NativeBase.Subtitle': {
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
         }
       }
     },
-    "NativeBase.Button": {
-      justifyContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      ".transparent": {
-        "NativeBase.Text": {
+    'NativeBase.Button': {
+      justifyContent: 'center',
+      alignSelf: 'center',
+      alignItems: 'center',
+      '.transparent': {
+        'NativeBase.Text': {
           color: variables.toolbarBtnTextColor,
-          fontWeight: "600"
+          fontWeight: '600'
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.toolbarBtnColor
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.toolbarBtnColor
         },
         paddingHorizontal: variables.buttonPadding
       },
       paddingHorizontal: 15
     },
-    ".searchBar": {
-      "NativeBase.Item": {
-        "NativeBase.Icon": {
-          backgroundColor: "transparent",
+    '.searchBar': {
+      'NativeBase.Item': {
+        'NativeBase.Icon': {
+          backgroundColor: 'transparent',
           color: variables.dropdownLinkColor,
           fontSize: variables.toolbarSearchIconSize,
-          alignItems: "center",
+          alignItems: 'center',
           marginTop: 2,
           paddingRight: 10,
           paddingLeft: 10
         },
-        "NativeBase.IconNB": {
-          backgroundColor: "transparent",
+        'NativeBase.IconNB': {
+          backgroundColor: 'transparent',
           color: null,
-          alignSelf: "center"
+          alignSelf: 'center'
         },
-        "NativeBase.Input": {
-          alignSelf: "center",
+        'NativeBase.Input': {
+          alignSelf: 'center',
           lineHeight: null,
           height: variables.searchBarInputHeight
         },
-        alignSelf: "center",
-        alignItems: "center",
-        justifyContent: "flex-start",
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
         flex: 1,
         height: variables.searchBarHeight,
-        borderColor: "transparent",
+        borderColor: 'transparent',
         backgroundColor: variables.toolbarInputColor
       },
-      "NativeBase.Button": {
-        ".transparent": {
-          "NativeBase.Text": {
-            fontWeight: "500"
+      'NativeBase.Button': {
+        '.transparent': {
+          'NativeBase.Text': {
+            fontWeight: '500'
           },
           paddingHorizontal: null,
-          paddingLeft: platform === "ios" ? 10 : null
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
         },
-        paddingHorizontal: platform === "ios" ? undefined : null,
-        width: platform === "ios" ? undefined : 0,
-        height: platform === "ios" ? undefined : 0
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        height: platform === PLATFORM.IOS ? undefined : 0
       }
     },
-    ".rounded": {
-      "NativeBase.Item": {
+    '.rounded': {
+      'NativeBase.Item': {
         borderRadius:
-          platform === "ios" && platformStyle !== "material" ? 25 : 3
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+            ? 25
+            : 3
       }
     },
-    "NativeBase.Left": {
-      "NativeBase.Button": {
-        ".hasText": {
+    'NativeBase.Left': {
+      'NativeBase.Button': {
+        '.hasText': {
           marginLeft: -10,
           height: 30,
-          "NativeBase.Icon": {
+          'NativeBase.Icon': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize,
             marginTop: 2,
             marginRight: 5,
             marginLeft: 2
           },
-          "NativeBase.Text": {
+          'NativeBase.Text': {
             color: variables.toolbarBtnTextColor,
-            fontSize: platform === "ios" ? 17 : 0,
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
             marginLeft: 7,
             lineHeight: 19.5
           },
-          "NativeBase.IconNB": {
+          'NativeBase.IconNB': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize,
             marginTop: 2,
             marginLeft: 2
           }
         },
-        ".transparent": {
+        '.transparent': {
           marginLeft:
-            platform === "ios" && platformStyle !== "material" ? -3 : 0,
-          "NativeBase.Icon": {
+            platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+              ? -3
+              : 0,
+          'NativeBase.Icon': {
             color: variables.toolbarBtnColor,
             fontSize:
-              platform === "ios" && variables.platformStyle !== "material"
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
                 ? variables.iconHeaderSize + 1
                 : variables.iconHeaderSize,
             marginTop: 0,
             marginLeft: 1,
             paddingTop: 1
           },
-          "NativeBase.IconNB": {
+          'NativeBase.IconNB': {
             color: variables.toolbarBtnColor,
             fontSize:
-              platform === "ios" && variables.platformStyle !== "material"
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
                 ? variables.iconHeaderSize + 1
                 : variables.iconHeaderSize - 2,
             marginTop: 0,
             marginLeft: 1,
             paddingTop: 1
           },
-          "NativeBase.Text": {
+          'NativeBase.Text': {
             color: variables.toolbarBtnTextColor,
-            fontSize: platform === "ios" ? 17 : 0,
-            top: platform === "ios" ? 1 : -1.5,
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
             paddingLeft:
-              platform === "ios" && platformStyle !== "material" ? 2 : 5,
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+                ? 2
+                : 5,
             paddingRight:
-              platform === "ios" && platformStyle !== "material"
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
                 ? undefined
                 : 10
           },
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
           borderColor: null,
           elevation: 0,
           shadowColor: null,
           shadowRadius: null,
           shadowOpacity: null
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.toolbarBtnColor
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.toolbarBtnColor
         },
         alignSelf: null,
         paddingRight: variables.buttonPadding,
-        paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8
+        paddingLeft:
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+            ? 4
+            : 8
       },
-      flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4,
-      alignSelf: "center",
-      alignItems: "flex-start"
+      flex:
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+          ? 1
+          : 0.4,
+      alignSelf: 'center',
+      alignItems: 'flex-start'
     },
-    "NativeBase.Body": {
+    'NativeBase.Body': {
       flex: 1,
       alignItems:
-        platform === "ios" && platformStyle !== "material"
-          ? "center"
-          : "flex-start",
-      alignSelf: "center",
-      "NativeBase.Segment": {
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+          ? 'center'
+          : 'flex-start',
+      alignSelf: 'center',
+      'NativeBase.Segment': {
         borderWidth: 0,
-        alignSelf: "flex-end",
-        marginRight: platform === "ios" ? -40 : -55
+        alignSelf: 'flex-end',
+        marginRight: platform === PLATFORM.IOS ? -40 : -55
       },
-      "NativeBase.Button": {
-        alignSelf: "center",
-        ".transparent": {
-          backgroundColor: "transparent"
+      'NativeBase.Button': {
+        alignSelf: 'center',
+        '.transparent': {
+          backgroundColor: 'transparent'
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.toolbarBtnColor
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.toolbarBtnColor
         },
-        "NativeBase.Text": {
+        'NativeBase.Text': {
           color: variables.inverseTextColor,
-          backgroundColor: "transparent"
+          backgroundColor: 'transparent'
         }
       }
     },
-    "NativeBase.Right": {
-      "NativeBase.Button": {
-        ".hasText": {
+    'NativeBase.Right': {
+      'NativeBase.Button': {
+        '.hasText': {
           height: 30,
-          "NativeBase.Icon": {
+          'NativeBase.Icon': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize - 2,
             marginTop: 2,
             marginRight: 2,
             marginLeft: 5
           },
-          "NativeBase.Text": {
+          'NativeBase.Text': {
             color: variables.toolbarBtnTextColor,
-            fontSize: platform === "ios" ? 17 : 14,
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
             lineHeight: 19.5
           },
-          "NativeBase.IconNB": {
+          'NativeBase.IconNB': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize - 2,
             marginTop: 2,
             marginLeft: 5
           }
         },
-        ".transparent": {
-          marginRight: platform === "ios" ? -9 : -5,
+        '.transparent': {
+          marginRight: platform === PLATFORM.IOS ? -9 : -5,
           paddingLeft: 15,
           paddingRight: 12,
           paddingHorizontal: 15,
           borderRadius: 50,
-          "NativeBase.Icon": {
+          'NativeBase.Icon': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize - 2,
             marginTop: 0,
             marginRight: 0
             // paddingTop: 0
           },
-          "NativeBase.IconNB": {
+          'NativeBase.IconNB': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize - 2,
             marginTop: 0,
             marginRight: 0
             // paddingTop: 0
           },
-          "NativeBase.Text": {
+          'NativeBase.Text': {
             color: variables.toolbarBtnTextColor,
-            fontSize: platform === "ios" ? 17 : 14,
-            top: platform === "ios" ? 1 : -1.5,
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
             paddingRight:
-              platform === "ios" && variables.platformStyle !== "material"
+              platform === PLATFORM.IOS &&
+              variables.platformStyle !== PLATFORM.MATERIAL
                 ? 0
                 : undefined
           },
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
           borderColor: null,
           elevation: 0,
           shadowColor: null,
           shadowRadius: null,
           shadowOpacity: null
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.toolbarBtnColor
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.toolbarBtnColor
         },
         alignSelf: null,
         paddingHorizontal: variables.buttonPadding
       },
       flex: 1,
-      alignSelf: "center",
-      alignItems: "flex-end",
-      flexDirection: "row",
-      justifyContent: "flex-end"
+      alignSelf: 'center',
+      alignItems: 'flex-end',
+      flexDirection: 'row',
+      justifyContent: 'flex-end'
     },
     backgroundColor: variables.toolbarDefaultBg,
-    flexDirection: "row",
+    flexDirection: 'row',
     // paddingHorizontal: 10,
     paddingLeft:
-      platform === "ios" && variables.platformStyle !== "material" ? 6 : 10,
+      platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
+        ? 6
+        : 10,
     paddingRight: 10,
-    justifyContent: "center",
-    paddingTop: platform === "ios" ? 18 : 0,
+    justifyContent: 'center',
+    paddingTop: platform === PLATFORM.IOS ? 18 : 0,
     borderBottomWidth:
-      platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
+      platform === PLATFORM.IOS
+        ? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
+        : 0,
     borderBottomColor: variables.toolbarDefaultBorder,
     height:
-      variables.platform === "ios" && variables.platformStyle === "material"
+      variables.platform === PLATFORM.IOS &&
+      variables.platformStyle === PLATFORM.MATERIAL
         ? variables.toolbarHeight + 10
         : variables.toolbarHeight,
     elevation: 3,
-    shadowColor: platformStyle === "material" ? "#000" : undefined,
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
     shadowOffset:
-      platformStyle === "material" ? { width: 0, height: 2 } : undefined,
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
     top: 0,
     left: 0,
     right: 0

native-base-theme/components/Icon.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const iconTheme = {
     fontSize: variables.iconFontSize,
-    color: "#000"
+    color: variable.textColor
   };
 
   return iconTheme;

native-base-theme/components/Input.js

 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const inputTheme = {
     '.multiline': {
-      height: null,
+      height: null
     },
     height: variables.inputHeightBase,
     color: variables.inputColor,

native-base-theme/components/InputGroup.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const inputGroupTheme = {
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       fontSize: 24,
       color: variables.sTabBarActiveTextColor,
       paddingHorizontal: 5
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       fontSize: 24,
       color: variables.sTabBarActiveTextColor,
       paddingHorizontal: 5
     },
-    "NativeBase.Input": {
+    'NativeBase.Input': {
       height: variables.inputHeightBase,
       color: variables.inputColor,
       paddingLeft: 5,
       fontSize: variables.inputFontSize,
       lineHeight: variables.inputLineHeight
     },
-    ".underline": {
-      ".success": {
+    '.underline': {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       paddingLeft: 5,
       borderLeftWidth: 0,
       borderColor: variables.inputBorderColor
     },
-    ".regular": {
-      ".success": {
+    '.regular': {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       paddingLeft: 5,
       borderWidth: variables.borderWidth,
       borderColor: variables.inputBorderColor
     },
-    ".rounded": {
-      ".success": {
+    '.rounded': {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       paddingLeft: 5,
       borderColor: variables.inputBorderColor
     },
 
-    ".success": {
-      "NativeBase.Icon": {
+    '.success': {
+      'NativeBase.Icon': {
         color: variables.inputSuccessBorderColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.inputSuccessBorderColor
       },
-      ".rounded": {
+      '.rounded': {
         borderRadius: 30,
         borderColor: variables.inputSuccessBorderColor
       },
-      ".regular": {
+      '.regular': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".underline": {
+      '.underline': {
         borderWidth: variables.borderWidth,
         borderTopWidth: 0,
         borderRightWidth: 0,
       borderColor: variables.inputSuccessBorderColor
     },
 
-    ".error": {
-      "NativeBase.Icon": {
+    '.error': {
+      'NativeBase.Icon': {
         color: variables.inputErrorBorderColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.inputErrorBorderColor
       },
-      ".rounded": {
+      '.rounded': {
         borderRadius: 30,
         borderColor: variables.inputErrorBorderColor
       },
-      ".regular": {
+      '.regular': {
         borderColor: variables.inputErrorBorderColor
       },
-      ".underline": {
+      '.underline': {
         borderWidth: variables.borderWidth,
         borderTopWidth: 0,
         borderRightWidth: 0,
       },
       borderColor: variables.inputErrorBorderColor
     },
-    ".disabled": {
-      "NativeBase.Icon": {
-        color: "#384850"
+    '.disabled': {
+      'NativeBase.Icon': {
+        color: '#384850'
       },
-      "NativeBase.IconNB": {
-        color: "#384850"
+      'NativeBase.IconNB': {
+        color: '#384850'
       }
     },
 
     borderRightWidth: 0,
     borderLeftWidth: 0,
     borderColor: variables.inputBorderColor,
-    backgroundColor: "transparent",
-    flexDirection: "row",
-    alignItems: "center"
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    alignItems: 'center'
   };
 
   return inputGroupTheme;

native-base-theme/components/Item.js

 // @flow
 
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const itemTheme = {
-    ".floatingLabel": {
-      "NativeBase.Input": {
+    '.floatingLabel': {
+      'NativeBase.Input': {
         height: 50,
         top: 8,
         paddingTop: 3,
         paddingBottom: 7,
-        ".multiline": {
+        '.multiline': {
           minHeight: variables.inputHeightBase,
-          paddingTop: Platform.OS === "ios" ? 10 : 3,
-          paddingBottom: Platform.OS === "ios" ? 14 : 10
+          paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
         }
       },
-      "NativeBase.Label": {
+      'NativeBase.Label': {
         paddingTop: 5
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         top: 6,
         paddingTop: 8
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         top: 6,
         paddingTop: 8
       }
     },
-    ".fixedLabel": {
-      "NativeBase.Label": {
+    '.fixedLabel': {
+      'NativeBase.Label': {
         position: null,
         top: null,
         left: null,
         width: null,
         fontSize: variables.inputFontSize
       },
-      "NativeBase.Input": {
+      'NativeBase.Input': {
         flex: 2,
         fontSize: variables.inputFontSize
       }
     },
-    ".stackedLabel": {
-      "NativeBase.Label": {
+    '.stackedLabel': {
+      'NativeBase.Label': {
         position: null,
         top: null,
         left: null,
         right: null,
         paddingTop: 5,
-        alignSelf: "flex-start",
+        alignSelf: 'flex-start',
         fontSize: variables.inputFontSize - 2
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         marginTop: 36
       },
-      "NativeBase.Input": {
-        alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
+      'NativeBase.Input': {
+        alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
         flex: 1,
-        width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
+        width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
         fontSize: variables.inputFontSize,
         lineHeight: variables.inputLineHeight - 6,
-        ".secureTextEntry": {
-          fontSize: variables.inputFontSize - 4
+        '.secureTextEntry': {
+          fontSize: variables.inputFontSize
         },
-        ".multiline": {
-          paddingTop: Platform.OS === "ios" ? 9 : undefined,
-          paddingBottom: Platform.OS === "ios" ? 9 : undefined
+        '.multiline': {
+          paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
         }
       },
       flexDirection: null,
       minHeight: variables.inputHeightBase + 15
     },
-    ".inlineLabel": {
-      "NativeBase.Label": {
+    '.inlineLabel': {
+      'NativeBase.Label': {
         position: null,
         top: null,
         left: null,
         width: null,
         fontSize: variables.inputFontSize
       },
-      "NativeBase.Input": {
+      'NativeBase.Input': {
         paddingLeft: 5,
         fontSize: variables.inputFontSize
       },
-      flexDirection: "row"
+      flexDirection: 'row'
     },
-    "NativeBase.Label": {
+    'NativeBase.Label': {
       fontSize: variables.inputFontSize,
       color: variables.inputColorPlaceholder,
       paddingRight: 5
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       fontSize: 24,
       paddingRight: 8
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       fontSize: 24,
       paddingRight: 8
     },
-    "NativeBase.Input": {
-      ".multiline": {
+    'NativeBase.Input': {
+      '.multiline': {
         height: null
       },
       height: variables.inputHeightBase,
       color: variables.inputColor,
       flex: 1,
-      top: Platform.OS === "ios" ? 1.5 : undefined,
+      top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
       fontSize: variables.inputFontSize
     },
-    ".underline": {
-      "NativeBase.Input": {
+    '.underline': {
+      'NativeBase.Input': {
         paddingLeft: 15
       },
-      ".success": {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       borderWidth: variables.borderWidth * 2,
       borderLeftWidth: 0,
       borderColor: variables.inputBorderColor
     },
-    ".regular": {
-      "NativeBase.Input": {
+    '.regular': {
+      'NativeBase.Input': {
         paddingLeft: 8
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         paddingLeft: 10
       },
-      ".success": {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       borderWidth: variables.borderWidth * 2,
       borderColor: variables.inputBorderColor
     },
-    ".rounded": {
-      "NativeBase.Input": {
+    '.rounded': {
+      'NativeBase.Input': {
         paddingLeft: 8
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         paddingLeft: 10
       },
-      ".success": {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       borderWidth: variables.borderWidth * 2,
       borderColor: variables.inputBorderColor
     },
 
-    ".success": {
-      "NativeBase.Icon": {
+    '.success': {
+      'NativeBase.Icon': {
         color: variables.inputSuccessBorderColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.inputSuccessBorderColor
       },
-      ".rounded": {
+      '.rounded': {
         borderRadius: 30,
         borderColor: variables.inputSuccessBorderColor
       },
-      ".regular": {
+      '.regular': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".underline": {
+      '.underline': {
         borderWidth: variables.borderWidth * 2,
         borderTopWidth: 0,
         borderRightWidth: 0,
       borderColor: variables.inputSuccessBorderColor
     },
 
-    ".error": {
-      "NativeBase.Icon": {
+    '.error': {
+      'NativeBase.Icon': {
         color: variables.inputErrorBorderColor
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.inputErrorBorderColor
       },
-      ".rounded": {
+      '.rounded': {
         borderRadius: 30,
         borderColor: variables.inputErrorBorderColor
       },
-      ".regular": {
+      '.regular': {
         borderColor: variables.inputErrorBorderColor
       },
-      ".underline": {
+      '.underline': {
         borderWidth: variables.borderWidth * 2,
         borderTopWidth: 0,
         borderRightWidth: 0,
       },
       borderColor: variables.inputErrorBorderColor
     },
-    ".disabled": {
-      "NativeBase.Icon": {
-        color: "#384850"
+    '.disabled': {
+      'NativeBase.Icon': {
+        color: '#384850'
       },
-      "NativeBase.IconNB": {
-        color: "#384850"
+      'NativeBase.IconNB': {
+        color: '#384850'
       }
     },
-    ".picker": {
+    '.picker': {
       marginLeft: 0
     },
 
     borderRightWidth: 0,
     borderLeftWidth: 0,
     borderColor: variables.inputBorderColor,
-    backgroundColor: "transparent",
-    flexDirection: "row",
-    alignItems: "center",
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    alignItems: 'center',
     marginLeft: 2
   };
 

native-base-theme/components/Label.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const labelTheme = {
-    ".focused": {
+    '.focused': {
       width: 0
     },
     fontSize: 17

native-base-theme/components/Left.js

 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const leftTheme = {
     flex: 1,
     alignSelf: 'center',
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
   };
 
   return leftTheme;

native-base-theme/components/ListItem.js

 // @flow
 
-import { Platform, PixelRatio } from "react-native";
+import { Platform, PixelRatio } from 'react-native';
 
-import pickerTheme from "./Picker";
-import variable from "./../variables/platform";
+import pickerTheme from './Picker';
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
   const selectedStyle = {
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.listItemSelected
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.listItemSelected
     }
   };
 
   const listItemTheme = {
-    "NativeBase.InputGroup": {
-      "NativeBase.Icon": {
+    'NativeBase.InputGroup': {
+      'NativeBase.Icon': {
         paddingRight: 5
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         paddingRight: 5
       },
-      "NativeBase.Input": {
+      'NativeBase.Input': {
         paddingHorizontal: 5
       },
       flex: 1,
       borderWidth: null,
       margin: -10,
-      borderBottomColor: "transparent"
+      borderBottomColor: 'transparent'
     },
-    ".searchBar": {
-      "NativeBase.Item": {
-        "NativeBase.Icon": {
-          backgroundColor: "transparent",
+    '.searchBar': {
+      'NativeBase.Item': {
+        'NativeBase.Icon': {
+          backgroundColor: 'transparent',
           color: variables.dropdownLinkColor,
           fontSize:
-            platform === "ios"
+            platform === PLATFORM.IOS
               ? variables.iconFontSize - 10
               : variables.iconFontSize - 5,
-          alignItems: "center",
+          alignItems: 'center',
           marginTop: 2,
           paddingRight: 8
         },
-        "NativeBase.IconNB": {
-          backgroundColor: "transparent",
+        'NativeBase.IconNB': {
+          backgroundColor: 'transparent',
           color: null,
-          alignSelf: "center"
+          alignSelf: 'center'
         },
-        "NativeBase.Input": {
-          alignSelf: "center"
+        'NativeBase.Input': {
+          alignSelf: 'center'
         },
-        alignSelf: "center",
-        alignItems: "center",
-        justifyContent: "flex-start",
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
         flex: 1,
-        height: platform === "ios" ? 30 : 40,
-        borderColor: "transparent",
-        backgroundColor: "#fff",
+        height: platform === PLATFORM.IOS ? 30 : 40,
+        borderColor: 'transparent',
+        backgroundColor: '#fff',
         borderRadius: 5
       },
-      "NativeBase.Button": {
-        ".transparent": {
-          "NativeBase.Text": {
-            fontWeight: "500"
+      'NativeBase.Button': {
+        '.transparent': {
+          'NativeBase.Text': {
+            fontWeight: '500'
           },
           paddingHorizontal: null,
-          paddingLeft: platform === "ios" ? 10 : null
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
         },
-        paddingHorizontal: platform === "ios" ? undefined : null,
-        width: platform === "ios" ? undefined : 0,
-        height: platform === "ios" ? undefined : 0
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+        width: platform === PLATFORM.IOS ? undefined : 0,
+        height: platform === PLATFORM.IOS ? undefined : 0
       },
       backgroundColor: variables.toolbarInputColor,
       padding: 10,
       marginLeft: null
     },
-    "NativeBase.CheckBox": {
+    'NativeBase.CheckBox': {
       marginLeft: -10,
       marginRight: 10
     },
-    ".first": {
-      ".itemHeader": {
+    '.first': {
+      '.itemHeader': {
         paddingTop: variables.listItemPadding + 3
       }
     },
-    ".itemHeader": {
-      ".first": {
+    '.itemHeader': {
+      '.first': {
         paddingTop: variables.listItemPadding + 3
       },
-      borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
+      borderBottomWidth:
+        platform === PLATFORM.IOS ? variables.borderWidth : null,
       marginLeft: null,
       padding: variables.listItemPadding,
       paddingLeft: variables.listItemPadding + 5,
       paddingTop:
-        platform === "ios" ? variables.listItemPadding + 25 : undefined,
+        platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
       paddingBottom:
-        platform === "android" ? variables.listItemPadding + 20 : undefined,
-      flexDirection: "row",
+        platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
+      flexDirection: 'row',
       borderColor: variables.listBorderColor,
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         fontSize: 14,
-        color: platform === "ios" ? undefined : variables.listNoteColor
+        color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
       }
     },
-    ".itemDivider": {
+    '.itemDivider': {
       borderBottomWidth: null,
       marginLeft: null,
       padding: variables.listItemPadding,
       paddingLeft: variables.listItemPadding + 5,
       backgroundColor: variables.listDividerBg,
-      flexDirection: "row",
+      flexDirection: 'row',
       borderColor: variables.listBorderColor
     },
-    ".selected": {
-      "NativeBase.Left": {
+    '.selected': {
+      'NativeBase.Left': {
         ...selectedStyle
       },
-      "NativeBase.Body": {
+      'NativeBase.Body': {
         ...selectedStyle
       },
-      "NativeBase.Right": {
+      'NativeBase.Right': {
         ...selectedStyle
       },
       ...selectedStyle
     },
-    "NativeBase.Left": {
-      "NativeBase.Body": {
-        "NativeBase.Text": {
-          ".note": {
+    'NativeBase.Left': {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
+          '.note': {
             color: variables.listNoteColor,
-            fontWeight: "200"
+            fontWeight: '200'
           },
-          fontWeight: "600"
+          fontWeight: '600'
         },
         marginLeft: 10,
         alignItems: null,
         alignSelf: null
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         width: variables.iconFontSize - 10,
         fontSize: variables.iconFontSize - 10
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         width: variables.iconFontSize - 10,
         fontSize: variables.iconFontSize - 10
       },
-      "NativeBase.Text": {
-        alignSelf: "center"
+      'NativeBase.Text': {
+        alignSelf: 'center'
       },
-      flexDirection: "row"
+      flexDirection: 'row'
     },
-    "NativeBase.Body": {
-      "NativeBase.Text": {
+    'NativeBase.Body': {
+      'NativeBase.Text': {
         marginHorizontal: variables.listItemPadding,
-        ".note": {
+        '.note': {
           color: variables.listNoteColor,
-          fontWeight: "200"
+          fontWeight: '200'
         }
       },
       alignSelf: null,
       alignItems: null
     },
-    "NativeBase.Right": {
-      "NativeBase.Badge": {
+    'NativeBase.Right': {
+      'NativeBase.Badge': {
         alignSelf: null
       },
-      "NativeBase.PickerNB": {
-        "NativeBase.Button": {
+      'NativeBase.PickerNB': {
+        'NativeBase.Button': {
           marginRight: -15,
-          "NativeBase.Text": {
+          'NativeBase.Text': {
             color: variables.topTabBarActiveTextColor
           }
         }
       },
-      "NativeBase.Button": {
+      'NativeBase.Button': {
         alignSelf: null,
-        ".transparent": {
-          "NativeBase.Text": {
+        '.transparent': {
+          'NativeBase.Text': {
             color: variables.topTabBarActiveTextColor
           }
         }
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         alignSelf: null,
         fontSize: variables.iconFontSize - 8,
-        color: "#c9c8cd"
+        color: '#c9c8cd'
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         alignSelf: null,
         fontSize: variables.iconFontSize - 8,
-        color: "#c9c8cd"
+        color: '#c9c8cd'
       },
-      "NativeBase.Text": {
-        ".note": {
+      'NativeBase.Text': {
+        '.note': {
           color: variables.listNoteColor,
-          fontWeight: "200"
+          fontWeight: '200'
         },
         alignSelf: null
       },
-      "NativeBase.Thumbnail": {
+      'NativeBase.Thumbnail': {
         alignSelf: null
       },
-      "NativeBase.Image": {
+      'NativeBase.Image': {
         alignSelf: null
       },
-      "NativeBase.Radio": {
+      'NativeBase.Radio': {
         alignSelf: null
       },
-      "NativeBase.Checkbox": {
+      'NativeBase.Checkbox': {
         alignSelf: null
       },
-      "NativeBase.Switch": {
+      'NativeBase.Switch': {
         alignSelf: null
       },
       padding: null,
       flex: 0.28
     },
-    "NativeBase.Text": {
-      ".note": {
+    'NativeBase.Text': {
+      '.note': {
         color: variables.listNoteColor,
-        fontWeight: "200"
+        fontWeight: '200'
       },
-      alignSelf: "center"
+      alignSelf: 'center'
     },
-    ".last": {
+    '.last': {
       marginLeft: -(variables.listItemPadding + 5),
       paddingLeft: (variables.listItemPadding + 5) * 2,
       top: 1
     },
-    ".avatar": {
-      "NativeBase.Left": {
+    '.avatar': {
+      'NativeBase.Left': {
         flex: 0,
-        alignSelf: "flex-start",
+        alignSelf: 'flex-start',
         paddingTop: 14
       },
-      "NativeBase.Body": {
-        "NativeBase.Text": {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
           marginLeft: null
         },
         flex: 1,
         borderColor: variables.listBorderColor,
         marginLeft: variables.listItemPadding + 5
       },
-      "NativeBase.Right": {
-        "NativeBase.Text": {
-          ".note": {
+      'NativeBase.Right': {
+        'NativeBase.Text': {
+          '.note': {
             fontSize: variables.noteFontSize - 2
           }
         },
         flex: 0,
         paddingRight: variables.listItemPadding + 5,
-        alignSelf: "stretch",
+        alignSelf: 'stretch',
         paddingVertical: variables.listItemPadding,
         borderBottomWidth: variables.borderWidth,
         borderColor: variables.listBorderColor
       },
-      ".noBorder": {
-        "NativeBase.Body": {
+      '.noBorder': {
+        'NativeBase.Body': {
           borderBottomWidth: null
         },
-        "NativeBase.Right": {
+        'NativeBase.Right': {
           borderBottomWidth: null
         }
       },
       paddingVertical: null,
       paddingRight: null
     },
-    ".thumbnail": {
-      "NativeBase.Left": {
+    '.thumbnail': {
+      'NativeBase.Left': {
         flex: 0
       },
-      "NativeBase.Body": {
-        "NativeBase.Text": {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
           marginLeft: null
         },
         flex: 1,
         borderColor: variables.listBorderColor,
         marginLeft: variables.listItemPadding + 5
       },
-      "NativeBase.Right": {
-        "NativeBase.Button": {
-          ".transparent": {
-            "NativeBase.Text": {
+      'NativeBase.Right': {
+        'NativeBase.Button': {
+          '.transparent': {
+            'NativeBase.Text': {
               fontSize: variables.listNoteSize,
               color: variables.sTabBarActiveTextColor
             }
           height: null
         },
         flex: 0,
-        justifyContent: "center",
-        alignSelf: "stretch",
+        justifyContent: 'center',
+        alignSelf: 'stretch',
         paddingRight: variables.listItemPadding + 5,
         paddingVertical: variables.listItemPadding + 5,
         borderBottomWidth: variables.borderWidth,
         borderColor: variables.listBorderColor
       },
-      ".noBorder": {
-        "NativeBase.Body": {
+      '.noBorder': {
+        'NativeBase.Body': {
           borderBottomWidth: null
         },
-        "NativeBase.Right": {
+        'NativeBase.Right': {
           borderBottomWidth: null
         }
       },
       paddingVertical: null,
       paddingRight: null
     },
-    ".icon": {
-      ".last": {
-        "NativeBase.Body": {
+    '.icon': {
+      '.last': {
+        'NativeBase.Body': {
           borderBottomWidth: null
         },
-        "NativeBase.Right": {
+        'NativeBase.Right': {
           borderBottomWidth: null
         },
         borderBottomWidth: variables.borderWidth,
         borderColor: variables.listBorderColor
       },
-      "NativeBase.Left": {
-        "NativeBase.Button": {
-          "NativeBase.IconNB": {
+      'NativeBase.Left': {
+        'NativeBase.Button': {
+          'NativeBase.IconNB': {
             marginHorizontal: null,
             fontSize: variables.iconFontSize - 5
           },
-          "NativeBase.Icon": {
+          'NativeBase.Icon': {
             marginHorizontal: null,
             fontSize: variables.iconFontSize - 8
           },
-          alignSelf: "center",
+          alignSelf: 'center',
           height: 29,
           width: 29,
           borderRadius: 6,
           paddingVertical: null,
           paddingHorizontal: null,
-          alignItems: "center",
-          justifyContent: "center"
+          alignItems: 'center',
+          justifyContent: 'center'
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           width: variables.iconFontSize - 5,
           fontSize: variables.iconFontSize - 2
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           width: variables.iconFontSize - 5,
           fontSize: variables.iconFontSize - 2
         },
         paddingRight: variables.listItemPadding + 5,
         flex: 0,
         height: 44,
-        justifyContent: "center",
-        alignItems: "center"
+        justifyContent: 'center',
+        alignItems: 'center'
       },
-      "NativeBase.Body": {
-        "NativeBase.Text": {
+      'NativeBase.Body': {
+        'NativeBase.Text': {
           marginLeft: null,
           fontSize: 17
         },
         flex: 1,
         height: 44,
-        justifyContent: "center",
+        justifyContent: 'center',
         borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
         borderColor: variables.listBorderColor
       },
-      "NativeBase.Right": {
-        "NativeBase.Text": {
-          textAlign: "center",
-          color: "#8F8E95",
+      'NativeBase.Right': {
+        'NativeBase.Text': {
+          textAlign: 'center',
+          color: '#8F8E95',
           fontSize: 17
         },
-        "NativeBase.IconNB": {
-          color: "#C8C7CC",
+        'NativeBase.IconNB': {
+          color: '#C8C7CC',
           fontSize: variables.iconFontSize - 10,
-          alignSelf: "center",
+          alignSelf: 'center',
           paddingLeft: 10,
           paddingTop: 3
         },
-        "NativeBase.Icon": {
-          color: "#C8C7CC",
+        'NativeBase.Icon': {
+          color: '#C8C7CC',
           fontSize: variables.iconFontSize - 10,
-          alignSelf: "center",
+          alignSelf: 'center',
           paddingLeft: 10,
           paddingTop: 3
         },
-        "NativeBase.Switch": {
-          marginRight: Platform.OS === "ios" ? undefined : -5,
+        'NativeBase.Switch': {
+          marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
           alignSelf: null
         },
-        "NativeBase.PickerNB": {
+        'NativeBase.PickerNB': {
           ...pickerTheme()
         },
-        flexDirection: "row",
-        alignItems: "center",
+        flexDirection: 'row',
+        alignItems: 'center',
         flex: 0,
-        alignSelf: "stretch",
+        alignSelf: 'stretch',
         height: 44,
-        justifyContent: "flex-end",
+        justifyContent: 'flex-end',
         borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
         borderColor: variables.listBorderColor,
         paddingRight: variables.listItemPadding + 5
       },
-      ".noBorder": {
-        "NativeBase.Body": {
+      '.noBorder': {
+        'NativeBase.Body': {
           borderBottomWidth: null
         },
-        "NativeBase.Right": {
+        'NativeBase.Right': {
           borderBottomWidth: null
         }
       },
       paddingVertical: null,
       paddingRight: null,
       height: 44,
-      justifyContent: "center"
+      justifyContent: 'center'
     },
-    ".noBorder": {
+    '.noBorder': {
       borderBottomWidth: null
     },
-    ".noIndent": {
+    '.noIndent': {
       marginLeft: null,
       padding: variables.listItemPadding,
       paddingLeft: variables.listItemPadding + 6
     },
-    alignItems: "center",
-    flexDirection: "row",
+    alignItems: 'center',
+    flexDirection: 'row',
     paddingRight: variables.listItemPadding + 6,
     paddingVertical: variables.listItemPadding + 3,
     marginLeft: variables.listItemPadding + 6,

native-base-theme/components/Picker.android.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {
-    ".note": {
-      color: "#8F8E95"
+    '.note': {
+      color: '#8F8E95'
     },
     // width: 90,
     marginRight: -4,

native-base-theme/components/Picker.ios.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {};
 
   return pickerTheme;

native-base-theme/components/Picker.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {
-    ".note": {
-      color: "#8F8E95"
+    '.note': {
+      color: '#8F8E95'
     },
     // width: 90,
     marginRight: -4,

native-base-theme/components/Radio.js

 // @flow
 
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const radioTheme = {
-    ".selected": {
-      "NativeBase.IconNB": {
-        color: Platform.OS === "ios"
-          ? variables.radioColor
-          : variables.radioSelectedColorAndroid,
-        lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
-        height: Platform.OS === "ios" ? 20 : undefined
+    '.selected': {
+      'NativeBase.IconNB': {
+        color:
+          Platform.OS === PLATFORM.IOS
+            ? variables.radioColor
+            : variables.radioSelectedColorAndroid,
+        lineHeight:
+          Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
+        height: Platform.OS === PLATFORM.IOS ? 20 : undefined
       }
     },
-    "NativeBase.IconNB": {
-      color: Platform.OS === "ios" ? "transparent" : undefined,
-      lineHeight: Platform.OS === "ios"
-        ? undefined
-        : variables.radioBtnLineHeight,
-      fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
+    'NativeBase.IconNB': {
+      color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
+      lineHeight:
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
+      fontSize:
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
     }
   };
 

native-base-theme/components/Right.js

 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const rightTheme = {
     'NativeBase.Button': {
-      alignSelf: null,
+      alignSelf: null
     },
     flex: 1,
     alignSelf: 'center',
-    alignItems: 'flex-end',
+    alignItems: 'flex-end'
   };
 
   return rightTheme;

native-base-theme/components/Segment.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const segmentTheme = {
     height: 45,
     borderColor: variables.segmentBorderColorMain,
-    flexDirection: "row",
-    justifyContent: "center",
+    flexDirection: 'row',
+    justifyContent: 'center',
     backgroundColor: variables.segmentBackgroundColor,
-    "NativeBase.Button": {
-      alignSelf: "center",
+    'NativeBase.Button': {
+      alignSelf: 'center',
       borderRadius: 0,
       paddingTop: 3,
       paddingBottom: 3,
       height: 30,
-      backgroundColor: "transparent",
+      backgroundColor: 'transparent',
       borderWidth: 1,
       borderLeftWidth: 0,
       borderColor: variables.segmentBorderColor,
       elevation: 0,
-      ".active": {
+      '.active': {
         backgroundColor: variables.segmentActiveBackgroundColor,
-        "NativeBase.Text": {
+        'NativeBase.Text': {
           color: variables.segmentActiveTextColor
         },
-        "NativeBase.Icon": {
+        'NativeBase.Icon': {
           color: variables.segmentActiveTextColor
         }
       },
-      ".first": {
-        borderTopLeftRadius: platform === "ios" ? 5 : undefined,
-        borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
+      '.first': {
+        borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
+        borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
         borderLeftWidth: 1
       },
-      ".last": {
-        borderTopRightRadius: platform === "ios" ? 5 : undefined,
-        borderBottomRightRadius: platform === "ios" ? 5 : undefined
+      '.last': {
+        borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
+        borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
       },
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         color: variables.segmentTextColor,
         fontSize: 14
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         fontSize: 22,
         paddingTop: 0,
         color: variables.segmentTextColor

native-base-theme/components/Separator.js

 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const theme = {
     '.group': {
       height: 50,
       '.bordered': {
         height: 50,
         paddingVertical: variables.listItemPadding - 8,
-        paddingTop: variables.listItemPadding + 12,
-      },
+        paddingTop: variables.listItemPadding + 12
+      }
     },
     '.bordered': {
       '.noTopBorder': {
-        borderTopWidth: 0,
+        borderTopWidth: 0
       },
       '.noBottomBorder': {
-        borderBottomWidth: 0,
+        borderBottomWidth: 0
       },
       height: 35,
       paddingTop: variables.listItemPadding + 2,
       paddingBottom: variables.listItemPadding,
       borderBottomWidth: variables.borderWidth,
       borderTopWidth: variables.borderWidth,
-      borderColor: variables.listBorderColor,
+      borderColor: variables.listBorderColor
     },
     'NativeBase.Text': {
       fontSize: variables.tabBarTextSize - 2,
-      color: '#777',
+      color: '#777'
     },
     '.noTopBorder': {
-      borderTopWidth: 0,
+      borderTopWidth: 0
     },
     '.noBottomBorder': {
-      borderBottomWidth: 0,
+      borderBottomWidth: 0
     },
     height: 38,
     backgroundColor: '#F0EFF5',
     flex: 1,
     justifyContent: 'center',
-    paddingLeft: variables.listItemPadding + 5,
+    paddingLeft: variables.listItemPadding + 5
   };
 
   return theme;

native-base-theme/components/Spinner.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const spinnerTheme = {
     height: 80
   };

native-base-theme/components/Subtitle.js

 // @flow
 
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const subtitleTheme = {
     fontSize: variables.subTitleFontSize,
     fontFamily: variables.titleFontfamily,
     color: variables.subtitleColor,
-    textAlign: "center",
-    paddingLeft: Platform.OS === "ios" ? 4 : 0,
-    marginLeft: Platform.OS === "ios" ? undefined : -3
+    textAlign: 'center',
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
   };
 
   return subtitleTheme;

native-base-theme/components/SwipeRow.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const swipeRowTheme = {
-    "NativeBase.ListItem": {
-      ".list": {
-        backgroundColor: "#FFF",
+    'NativeBase.ListItem': {
+      '.list': {
+        backgroundColor: '#FFF'
       },
-      marginLeft: 0,
+      marginLeft: 0
     },
-    "NativeBase.Left": {
+    'NativeBase.Left': {
       flex: 0,
       alignSelf: null,
       alignItems: null,
-      "NativeBase.Button": {
+      'NativeBase.Button': {
         flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        alignSelf: "stretch",
-        borderRadius: 0,
-      },
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        borderRadius: 0
+      }
     },
-    "NativeBase.Right": {
+    'NativeBase.Right': {
       flex: 0,
       alignSelf: null,
       alignItems: null,
-      "NativeBase.Button": {
+      'NativeBase.Button': {
         flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        alignSelf: "stretch",
-        borderRadius: 0,
-      },
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        borderRadius: 0
+      }
     },
-    "NativeBase.Button": {
+    'NativeBase.Button': {
       flex: 1,
       height: null,
-      alignItems: "center",
-      justifyContent: "center",
-      alignSelf: "stretch",
-      borderRadius: 0,
-    },
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'stretch',
+      borderRadius: 0
+    }
   };
 
   return swipeRowTheme;

native-base-theme/components/Switch.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const switchTheme = {
-    marginVertical: -5,
+    marginVertical: -5
   };
 
   return switchTheme;

native-base-theme/components/Tab.js

 // @flow
 
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const tabTheme = {
     flex: 1,
-    backgroundColor: "#FFF"
+    backgroundColor: '#FFF'
   };
 
   return tabTheme;

native-base-theme/components/TabBar.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const tabBarTheme = {
-    ".tabIcon": {
+    '.tabIcon': {
       height: undefined
     },
-    ".vertical": {
+    '.vertical': {
       height: 60
     },
-    "NativeBase.Button": {
-      ".transparent": {
-        "NativeBase.Text": {
+    'NativeBase.Button': {
+      '.transparent': {
+        'NativeBase.Text': {
           fontSize: variables.tabFontSize,
           color: variables.sTabBarActiveTextColor,
-          fontWeight: "400"
+          fontWeight: '400'
         },
-        "NativeBase.IconNB": {
+        'NativeBase.IconNB': {
           color: variables.sTabBarActiveTextColor
         }
       },
-      "NativeBase.IconNB": {
+      'NativeBase.IconNB': {
         color: variables.sTabBarActiveTextColor
       },
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         fontSize: variables.tabFontSize,
         color: variables.sTabBarActiveTextColor,
-        fontWeight: "400"
+        fontWeight: '400'
       },
-      ".isTabActive": {
-        "NativeBase.Text": {
-          fontWeight: "900"
+      '.isTabActive': {
+        'NativeBase.Text': {
+          fontWeight: '900'
         }
       },
       flex: 1,
-      alignSelf: "stretch",
-      alignItems: "center",
-      justifyContent: "center",
+      alignSelf: 'stretch',
+      alignItems: 'center',
+      justifyContent: 'center',
       borderRadius: null,
-      borderBottomColor: "transparent",
+      borderBottomColor: 'transparent',
       backgroundColor: variables.tabBgColor
     },
     height: 45,
-    flexDirection: "row",
-    justifyContent: "space-around",
+    flexDirection: 'row',
+    justifyContent: 'space-around',
     borderWidth: 1,
     borderTopWidth: 0,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    borderBottomColor: "#ccc",
+    borderBottomColor: '#ccc',
     backgroundColor: variables.tabBgColor
   };
 

native-base-theme/components/TabContainer.js

 // @flow
 
-import variable from "./../variables/platform";
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-export default (variables /*: * */ = variable) => {
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
-  const platform = variables.platform;
 
   const tabContainerTheme = {
     elevation: 3,
     height: 50,
-    flexDirection: "row",
-    shadowColor: platformStyle === "material" ? "#000" : undefined,
-    shadowOffset: platformStyle === "material"
-      ? { width: 0, height: 2 }
-      : undefined,
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
-    justifyContent: "space-around",
-    borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
+    flexDirection: 'row',
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
+    shadowOffset:
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+    justifyContent: 'space-around',
+    borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
     borderColor: variables.topTabBarBorderColor
   };
 

native-base-theme/components/TabHeading.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const tabHeadingTheme = {
-    flexDirection: "row",
+    flexDirection: 'row',
     backgroundColor: variables.tabDefaultBg,
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    ".scrollable": {
+    alignItems: 'center',
+    justifyContent: 'center',
+    '.scrollable': {
       paddingHorizontal: 20,
-      flex: platform === "android" ? 0 : 1,
-      minWidth: platform === "android" ? undefined : 60
+      flex: platform === PLATFORM.ANDROID ? 0 : 1,
+      minWidth: platform === PLATFORM.ANDROID ? undefined : 60
     },
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       color: variables.topTabBarTextColor,
       marginHorizontal: 7
     },
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.topTabBarTextColor,
-      fontSize: platform === "ios" ? 26 : undefined
+      fontSize: platform === PLATFORM.IOS ? 26 : undefined
     },
-    ".active": {
-      "NativeBase.Text": {
+    '.active': {
+      'NativeBase.Text': {
         color: variables.topTabBarActiveTextColor,
-        fontWeight: "600"
+        fontWeight: '600'
       },
-      "NativeBase.Icon": {
+      'NativeBase.Icon': {
         color: variables.topTabBarActiveTextColor
       }
     }

native-base-theme/components/Text.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const textTheme = {
     fontSize: variables.DefaultFontSize,
     fontFamily: variables.fontFamily,
     color: variables.textColor,
-    ".note": {
-      color: "#a7a7a7",
+    '.note': {
+      color: '#a7a7a7',
       fontSize: variables.noteFontSize
     }
   };

native-base-theme/components/Textarea.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const textAreaTheme = {
-    ".underline": {
+    '.underline': {
       borderBottomWidth: variables.borderWidth,
       marginTop: 5,
       borderColor: variables.inputBorderColor
     },
-    ".bordered": {
+    '.bordered': {
       borderWidth: 1,
       marginTop: 5,
       borderColor: variables.inputBorderColor
     paddingLeft: 10,
     paddingRight: 5,
     fontSize: 15,
-    textAlignVertical: "top"
+    textAlignVertical: 'top'
   };
 
   return textAreaTheme;

native-base-theme/components/Thumbnail.js

 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const thumbnailTheme = {
     '.square': {
       borderRadius: 0,
       '.small': {
         width: 36,
         height: 36,
-        borderRadius: 0,
+        borderRadius: 0
       },
       '.large': {
         width: 80,
         height: 80,
-        borderRadius: 0,
-      },
+        borderRadius: 0
+      }
     },
     '.small': {
       width: 36,
       height: 36,
       borderRadius: 18,
       '.square': {
-        borderRadius: 0,
-      },
+        borderRadius: 0
+      }
     },
     '.large': {
       width: 80,
       height: 80,
       borderRadius: 40,
       '.square': {
-        borderRadius: 0,
-      },
+        borderRadius: 0
+      }
     },
     width: 56,
     height: 56,
-    borderRadius: 28,
+    borderRadius: 28
   };
 
   return thumbnailTheme;

native-base-theme/components/Title.js

 // @flow
 
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const titleTheme = {
     fontSize: variables.titleFontSize,
     fontFamily: variables.titleFontfamily,
     color: variables.titleFontColor,
-    fontWeight: Platform.OS === "ios" ? "700" : undefined,
-    textAlign: "center",
-    paddingLeft: Platform.OS === "ios" ? 4 : 0,
-    marginLeft: Platform.OS === "ios" ? undefined : -3,
+    fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
+    textAlign: 'center',
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
     paddingTop: 1
   };
 

native-base-theme/components/Toast.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const toastTheme = {
-    ".danger": {
+    '.danger': {
       backgroundColor: variables.brandDanger
     },
-    ".warning": {
+    '.warning': {
       backgroundColor: variables.brandWarning
     },
-    ".success": {
+    '.success': {
       backgroundColor: variables.brandSuccess
     },
-    backgroundColor: "rgba(0,0,0,0.8)",
-    borderRadius: platform === "ios" ? 5 : 0,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    borderRadius: platform === PLATFORM.IOS ? 5 : 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: 10,
     minHeight: 50,
-    "NativeBase.Text": {
-      color: "#fff",
+    'NativeBase.Text': {
+      color: '#fff',
       flex: 1
     },
-    "NativeBase.Button": {
-      backgroundColor: "transparent",
+    'NativeBase.Button': {
+      backgroundColor: 'transparent',
       height: 30,
       elevation: 0,
-      "NativeBase.Text": {
+      'NativeBase.Text': {
         fontSize: 14
       }
     }

native-base-theme/components/View.js

 // @flow
 
-import variable from "./../variables/platform";
+import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const viewTheme = {
-    ".padder": {
+    '.padder': {
       padding: variables.contentPadding
     }
   };

native-base-theme/components/index.js

+/* eslint-disable no-param-reassign */
 // @flow
 
-import _ from "lodash";
-import bodyTheme from "./Body";
-import leftTheme from "./Left";
-import rightTheme from "./Right";
-import headerTheme from "./Header";
-import switchTheme from "./Switch";
-import thumbnailTheme from "./Thumbnail";
-import containerTheme from "./Container";
-import contentTheme from "./Content";
-import buttonTheme from "./Button";
-import titleTheme from "./Title";
-import subtitleTheme from "./Subtitle";
-import inputGroupTheme from "./InputGroup";
-import badgeTheme from "./Badge";
-import checkBoxTheme from "./CheckBox";
-import cardTheme from "./Card";
-import radioTheme from "./Radio";
-import h3Theme from "./H3";
-import h2Theme from "./H2";
-import h1Theme from "./H1";
-import footerTheme from "./Footer";
-import footerTabTheme from "./FooterTab";
-import fabTheme from "./Fab";
-import itemTheme from "./Item";
-import labelTheme from "./Label";
-import textAreaTheme from "./Textarea";
-import textTheme from "./Text";
-import toastTheme from "./Toast";
-import tabTheme from "./Tab";
-import tabBarTheme from "./TabBar";
-import tabContainerTheme from "./TabContainer";
-import viewTheme from "./View";
-import tabHeadingTheme from "./TabHeading";
-import iconTheme from "./Icon";
-import inputTheme from "./Input";
-import swipeRowTheme from "./SwipeRow";
-import segmentTheme from "./Segment";
-import spinnerTheme from "./Spinner";
-import cardItemTheme from "./CardItem";
-import listItemTheme from "./ListItem";
-import formTheme from "./Form";
-import separatorTheme from "./Separator";
-import pickerTheme from "./Picker"
-import variable from "./../variables/platform";
-
-export default (variables /*: * */ = variable) => {
+import _ from 'lodash';
+
+import bodyTheme from './Body';
+import leftTheme from './Left';
+import rightTheme from './Right';
+import headerTheme from './Header';
+import switchTheme from './Switch';
+import thumbnailTheme from './Thumbnail';
+import containerTheme from './Container';
+import contentTheme from './Content';
+import buttonTheme from './Button';
+import titleTheme from './Title';
+import subtitleTheme from './Subtitle';
+import inputGroupTheme from './InputGroup';
+import badgeTheme from './Badge';
+import checkBoxTheme from './CheckBox';
+import cardTheme from './Card';
+import radioTheme from './Radio';
+import h3Theme from './H3';
+import h2Theme from './H2';
+import h1Theme from './H1';
+import footerTheme from './Footer';
+import footerTabTheme from './FooterTab';
+import fabTheme from './Fab';
+import itemTheme from './Item';
+import labelTheme from './Label';
+import textAreaTheme from './Textarea';
+import textTheme from './Text';
+import toastTheme from './Toast';
+import tabTheme from './Tab';
+import tabBarTheme from './TabBar';
+import tabContainerTheme from './TabContainer';
+import viewTheme from './View';
+import tabHeadingTheme from './TabHeading';
+import iconTheme from './Icon';
+import inputTheme from './Input';
+import swipeRowTheme from './SwipeRow';
+import segmentTheme from './Segment';
+import spinnerTheme from './Spinner';
+import cardItemTheme from './CardItem';
+import listItemTheme from './ListItem';
+import formTheme from './Form';
+import separatorTheme from './Separator';
+import pickerTheme from './Picker';
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
   const theme = {
     variables,
-    "NativeBase.Left": {
+    'NativeBase.Left': {
       ...leftTheme(variables)
     },
-    "NativeBase.Right": {
+    'NativeBase.Right': {
       ...rightTheme(variables)
     },
-    "NativeBase.Body": {
+    'NativeBase.Body': {
       ...bodyTheme(variables)
     },
 
-    "NativeBase.Header": {
+    'NativeBase.Header': {
       ...headerTheme(variables)
     },
 
-    "NativeBase.Button": {
+    'NativeBase.Button': {
       ...buttonTheme(variables)
     },
 
-    "NativeBase.Title": {
+    'NativeBase.Title': {
       ...titleTheme(variables)
     },
-    "NativeBase.Subtitle": {
+    'NativeBase.Subtitle': {
       ...subtitleTheme(variables)
     },
 
-    "NativeBase.InputGroup": {
+    'NativeBase.InputGroup': {
       ...inputGroupTheme(variables)
     },
 
-    "NativeBase.Input": {
+    'NativeBase.Input': {
       ...inputTheme(variables)
     },
 
-    "NativeBase.Badge": {
+    'NativeBase.Badge': {
       ...badgeTheme(variables)
     },
 
-    "NativeBase.CheckBox": {
+    'NativeBase.CheckBox': {
       ...checkBoxTheme(variables)
     },
 
-    "NativeBase.Radio": {
+    'NativeBase.Radio': {
       ...radioTheme(variables)
     },
 
-    "NativeBase.Card": {
+    'NativeBase.Card': {
       ...cardTheme(variables)
     },
 
-    "NativeBase.CardItem": {
+    'NativeBase.CardItem': {
       ...cardItemTheme(variables)
     },
 
-    "NativeBase.Toast": {
+    'NativeBase.Toast': {
       ...toastTheme(variables)
     },
 
-    "NativeBase.H1": {
+    'NativeBase.H1': {
       ...h1Theme(variables)
     },
-    "NativeBase.H2": {
+    'NativeBase.H2': {
       ...h2Theme(variables)
     },
-    "NativeBase.H3": {
+    'NativeBase.H3': {
       ...h3Theme(variables)
     },
-    "NativeBase.Form": {
+    'NativeBase.Form': {
       ...formTheme(variables)
     },
 
-    "NativeBase.Container": {
+    'NativeBase.Container': {
       ...containerTheme(variables)
     },
-    "NativeBase.Content": {
+    'NativeBase.Content': {
       ...contentTheme(variables)
     },
 
-    "NativeBase.Footer": {
+    'NativeBase.Footer': {
       ...footerTheme(variables)
     },
 
-    "NativeBase.Tabs": {
+    'NativeBase.Tabs': {
       flex: 1
     },
 
-    "NativeBase.FooterTab": {
+    'NativeBase.FooterTab': {
       ...footerTabTheme(variables)
     },
 
-    "NativeBase.ListItem": {
+    'NativeBase.ListItem': {
       ...listItemTheme(variables)
     },
 
-    "NativeBase.ListItem1": {
+    'NativeBase.ListItem1': {
       ...listItemTheme(variables)
     },
 
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       ...iconTheme(variables)
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       ...iconTheme(variables)
     },
-    "NativeBase.Text": {
+    'NativeBase.Text': {
       ...textTheme(variables)
     },
-    "NativeBase.Spinner": {
+    'NativeBase.Spinner': {
       ...spinnerTheme(variables)
     },
 
-    "NativeBase.Fab": {
+    'NativeBase.Fab': {
       ...fabTheme(variables)
     },
 
-    "NativeBase.Item": {
+    'NativeBase.Item': {
       ...itemTheme(variables)
     },
 
-    "NativeBase.Label": {
+    'NativeBase.Label': {
       ...labelTheme(variables)
     },
 
-    "NativeBase.Textarea": {
+    'NativeBase.Textarea': {
       ...textAreaTheme(variables)
     },
 
-    "NativeBase.PickerNB": {
+    'NativeBase.PickerNB': {
       ...pickerTheme(variables),
-      "NativeBase.Button": {
-        "NativeBase.Text": {}
+      'NativeBase.Button': {
+        'NativeBase.Text': {}
       }
     },
 
-    "NativeBase.Tab": {
+    'NativeBase.Tab': {
       ...tabTheme(variables)
     },
 
-    "NativeBase.Segment": {
+    'NativeBase.Segment': {
       ...segmentTheme(variables)
     },
 
-    "NativeBase.TabBar": {
+    'NativeBase.TabBar': {
       ...tabBarTheme(variables)
     },
-    "NativeBase.ViewNB": {
+    'NativeBase.ViewNB': {
       ...viewTheme(variables)
     },
-    "NativeBase.TabHeading": {
+    'NativeBase.TabHeading': {
       ...tabHeadingTheme(variables)
     },
-    "NativeBase.TabContainer": {
+    'NativeBase.TabContainer': {
       ...tabContainerTheme(variables)
     },
-    "NativeBase.Switch": {
+    'NativeBase.Switch': {
       ...switchTheme(variables)
     },
-    "NativeBase.Separator": {
+    'NativeBase.Separator': {
       ...separatorTheme(variables)
     },
-    "NativeBase.SwipeRow": {
+    'NativeBase.SwipeRow': {
       ...swipeRowTheme(variables)
     },
-    "NativeBase.Thumbnail": {
+    'NativeBase.Thumbnail': {
       ...thumbnailTheme(variables)
     }
   };
   const cssifyTheme = (grandparent, parent, parentKey) => {
     _.forEach(parent, (style, styleName) => {
       if (
-        styleName.indexOf(".") === 0 &&
+        styleName.indexOf('.') === 0 &&
         parentKey &&
-        parentKey.indexOf(".") === 0
+        parentKey.indexOf('.') === 0
       ) {
         if (grandparent) {
           if (!grandparent[styleName]) {
           }
         }
       }
-      if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") {
+      if (
+        style &&
+        typeof style === 'object' &&
+        styleName !== 'fontVariant' &&
+        styleName !== 'transform'
+      ) {
         cssifyTheme(parent, style, styleName);
       }
     });

native-base-theme/variables/commonColor.js

 // @flow
 
-import color from "color";
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
 
-import { Platform, Dimensions, PixelRatio } from "react-native";
+export const PLATFORM = {
+  ANDROID: 'android',
+  IOS: 'ios',
+  MATERIAL: 'material',
+  WEB: 'web'
+};
 
-const deviceHeight = Dimensions.get("window").height;
-const deviceWidth = Dimensions.get("window").width;
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 const platform = Platform.OS;
 const platformStyle = undefined;
 const isIphoneX =
-  platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
 
 export default {
   platformStyle,
   platform,
 
-  //Accordion
-  headerStyle: "#edebed",
-  iconStyle: "#000",
-  contentStyle: "#f5f4f5",
-  expandedIconStyle: "#000",
-  accordionBorderColor: "#d3d3d3",
+  // Accordion
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  accordionBorderColor: '#d3d3d3',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
 
-  //Android
+  // Android
   androidRipple: true,
-  androidRippleColor: "rgba(256, 256, 256, 0.3)",
-  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
-  btnUppercaseAndroidText: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
 
   // Badge
-  badgeBg: "#ED1727",
-  badgeColor: "#fff",
-  badgePadding: platform === "ios" ? 3 : 0,
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
 
   // Button
-  btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
-  btnDisabledBg: "#b5b5b5",
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  buttonDisabledBg: '#b5b5b5',
   buttonPadding: 6,
-  get btnPrimaryBg() {
+  get buttonPrimaryBg() {
     return this.brandPrimary;
   },
-  get btnPrimaryColor() {
+  get buttonPrimaryColor() {
     return this.inverseTextColor;
   },
-  get btnInfoBg() {
+  get buttonInfoBg() {
     return this.brandInfo;
   },
-  get btnInfoColor() {
+  get buttonInfoColor() {
     return this.inverseTextColor;
   },
-  get btnSuccessBg() {
+  get buttonSuccessBg() {
     return this.brandSuccess;
   },
-  get btnSuccessColor() {
+  get buttonSuccessColor() {
     return this.inverseTextColor;
   },
-  get btnDangerBg() {
+  get buttonDangerBg() {
     return this.brandDanger;
   },
-  get btnDangerColor() {
+  get buttonDangerColor() {
     return this.inverseTextColor;
   },
-  get btnWarningBg() {
+  get buttonWarningBg() {
     return this.brandWarning;
   },
-  get btnWarningColor() {
+  get buttonWarningColor() {
     return this.inverseTextColor;
   },
-  get btnTextSize() {
-    return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
+  get buttonTextSize() {
+    return platform === PLATFORM.IOS
+      ? this.fontSizeBase * 1.1
+      : this.fontSizeBase - 1;
   },
-  get btnTextSizeLarge() {
+  get buttonTextSizeLarge() {
     return this.fontSizeBase * 1.5;
   },
-  get btnTextSizeSmall() {
+  get buttonTextSizeSmall() {
     return this.fontSizeBase * 0.8;
   },
   get borderRadiusLarge() {
   },
 
   // Card
-  cardDefaultBg: "#fff",
-  cardBorderColor: "#ccc",
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
   cardBorderRadius: 2,
-  cardItemPadding: platform === "ios" ? 10 : 12,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
 
   // CheckBox
-  CheckboxRadius: platform === "ios" ? 13 : 0,
-  CheckboxBorderWidth: platform === "ios" ? 1 : 2,
-  CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
-  CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
-  CheckboxIconSize: platform === "ios" ? 21 : 16,
-  CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
-  CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-  checkboxBgColor: "#039BE5",
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+  checkboxBgColor: '#039BE5',
   checkboxSize: 20,
-  checkboxTickColor: "#fff",
+  checkboxTickColor: '#fff',
 
   // Color
-  brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
-  brandInfo: "#62B1F6",
-  brandSuccess: "#5cb85c",
-  brandDanger: "#d9534f",
-  brandWarning: "#f0ad4e",
-  brandDark: "#000",
-  brandLight: "#f4f4f4",
+  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
 
-  //Container
-  containerBgColor: "#fff",
+  // Date Picker
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
 
-  //Date Picker
-  datePickerTextColor: "#000",
-  datePickerBg: "transparent",
+  // FAB
+  fabWidth: 56,
 
   // Font
   DefaultFontSize: 16,
-  fontFamily: platform === "ios" ? "System" : "Roboto",
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
   fontSizeBase: 15,
   get fontSizeH1() {
     return this.fontSizeBase * 1.8;
 
   // Footer
   footerHeight: 55,
-  footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
   footerPaddingBottom: 0,
 
   // FooterTab
-  tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
-  tabBarTextSize: platform === "ios" ? 14 : 11,
-  activeTab: platform === "ios" ? "#007aff" : "#fff",
-  sTabBarActiveTextColor: "#007aff",
-  tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
-  tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
+  tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
 
   // Header
-  toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
-  toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-  toolbarHeight: platform === "ios" ? 64 : 56,
-  toolbarSearchIconSize: platform === "ios" ? 20 : 23,
-  toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
-  searchBarHeight: platform === "ios" ? 30 : 40,
-  searchBarInputHeight: platform === "ios" ? 30 : 50,
-  toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
-  iosStatusbar: "dark-content",
-  toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  iosStatusbar: 'dark-content',
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
   get statusBarColor() {
     return color(this.toolbarDefaultBg)
       .darken(0.2)
   },
 
   // Icon
-  iconFamily: "Ionicons",
-  iconFontSize: platform === "ios" ? 30 : 28,
-  iconHeaderSize: platform === "ios" ? 33 : 24,
+  iconFamily: 'Ionicons',
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
 
   // InputGroup
   inputFontSize: 17,
-  inputBorderColor: "#D9D5DC",
-  inputSuccessBorderColor: "#2b8339",
-  inputErrorBorderColor: "#ed2f2f",
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
   inputHeightBase: 50,
   get inputColor() {
     return this.textColor;
   },
   get inputColorPlaceholder() {
-    return "#575757";
+    return '#575757';
   },
 
   // Line Height
-  btnLineHeight: 19,
+  buttonLineHeight: 19,
   lineHeightH1: 32,
   lineHeightH2: 27,
   lineHeightH3: 22,
-  lineHeight: platform === "ios" ? 20 : 24,
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
 
   // List
-  listBg: "transparent",
-  listBorderColor: "#c9c9c9",
-  listDividerBg: "#f4f4f4",
-  listBtnUnderlayColor: "#DDD",
-  listItemPadding: platform === "ios" ? 10 : 12,
-  listNoteColor: "#808080",
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+  listNoteColor: '#808080',
   listNoteSize: 13,
-  listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
+  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
 
   // Progress Bar
-  defaultProgressColor: "#E4202D",
-  inverseProgressColor: "#1A191B",
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
 
   // Radio Button
-  radioBtnSize: platform === "ios" ? 25 : 23,
-  radioSelectedColorAndroid: "#3F51B5",
-  radioBtnLineHeight: platform === "ios" ? 29 : 24,
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+  radioSelectedColorAndroid: '#3F51B5',
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
   get radioColor() {
     return this.brandPrimary;
   },
 
   // Segment
-  segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-  segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
-  segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
-  segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
 
   // Spinner
-  defaultSpinnerColor: "#45D56E",
-  inverseSpinnerColor: "#1A191B",
+  defaultSpinnerColor: '#45D56E',
+  inverseSpinnerColor: '#1A191B',
 
   // Tab
-  tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-  topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-  topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
-  topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
-  topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
 
   // Tabs
-  tabBgColor: "#F8F8F8",
+  tabBgColor: '#F8F8F8',
   tabFontSize: 15,
 
   // Text
-  textColor: "#000",
-  inverseTextColor: "#fff",
+  textColor: '#000',
+  inverseTextColor: '#fff',
   noteFontSize: 14,
   get defaultTextColor() {
     return this.textColor;
   },
 
   // Title
-  titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
-  titleFontSize: platform === "ios" ? 17 : 19,
-  subTitleFontSize: platform === "ios" ? 11 : 14,
-  subtitleColor: platform === "ios" ? "#000" : "#fff",
-  titleFontColor: platform === "ios" ? "#000" : "#fff",
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+  subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
 
   // Other
-  borderRadiusBase: platform === "ios" ? 5 : 2,
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
   contentPadding: 10,
-  dropdownLinkColor: "#414142",
+  dropdownLinkColor: '#414142',
   inputLineHeight: 24,
   deviceWidth,
   deviceHeight,
   isIphoneX,
   inputGroupRoundedBorderRadius: 30,
 
-  //iPhoneX SafeArea
+  // iPhoneX SafeArea
   Inset: {
     portrait: {
       topInset: 24,

native-base-theme/variables/material.js

 // @flow
 
-import color from "color";
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
 
-import { Platform, Dimensions, PixelRatio } from "react-native";
+import { PLATFORM } from './commonColor';
 
-const deviceHeight = Dimensions.get("window").height;
-const deviceWidth = Dimensions.get("window").width;
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 const platform = Platform.OS;
-const platformStyle = "material";
+const platformStyle = PLATFORM.MATERIAL;
 const isIphoneX =
-platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
 
 export default {
   platformStyle,
   platform,
 
-  //Accordion
-  headerStyle: "#edebed",
-  iconStyle: "#000",
-  contentStyle: "#f5f4f5",
-  expandedIconStyle: "#000",
-  accordionBorderColor: "#d3d3d3",
+  // Accordion
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  accordionBorderColor: '#d3d3d3',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
 
   // Android
   androidRipple: true,
-  androidRippleColor: "rgba(256, 256, 256, 0.3)",
-  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
-  btnUppercaseAndroidText: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
 
   // Badge
-  badgeBg: "#ED1727",
-  badgeColor: "#fff",
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
   badgePadding: 0,
 
   // Button
-  btnFontFamily: "Roboto",
-  btnDisabledBg: "#b5b5b5",
+  buttonFontFamily: 'Roboto',
+  buttonDisabledBg: '#b5b5b5',
   buttonPadding: 6,
-  get btnPrimaryBg() {
+  get buttonPrimaryBg() {
     return this.brandPrimary;
   },
-  get btnPrimaryColor() {
+  get buttonPrimaryColor() {
     return this.inverseTextColor;
   },
-  get btnInfoBg() {
+  get buttonInfoBg() {
     return this.brandInfo;
   },
-  get btnInfoColor() {
+  get buttonInfoColor() {
     return this.inverseTextColor;
   },
-  get btnSuccessBg() {
+  get buttonSuccessBg() {
     return this.brandSuccess;
   },
-  get btnSuccessColor() {
+  get buttonSuccessColor() {
     return this.inverseTextColor;
   },
-  get btnDangerBg() {
+  get buttonDangerBg() {
     return this.brandDanger;
   },
-  get btnDangerColor() {
+  get buttonDangerColor() {
     return this.inverseTextColor;
   },
-  get btnWarningBg() {
+  get buttonWarningBg() {
     return this.brandWarning;
   },
-  get btnWarningColor() {
+  get buttonWarningColor() {
     return this.inverseTextColor;
   },
-  get btnTextSize() {
+  get buttonTextSize() {
     return this.fontSizeBase - 1;
   },
-  get btnTextSizeLarge() {
+  get buttonTextSizeLarge() {
     return this.fontSizeBase * 1.5;
   },
-  get btnTextSizeSmall() {
+  get buttonTextSizeSmall() {
     return this.fontSizeBase * 0.8;
   },
   get borderRadiusLarge() {
   },
 
   // Card
-  cardDefaultBg: "#fff",
-  cardBorderColor: "#ccc",
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
   cardBorderRadius: 2,
-  cardItemPadding: platform === "ios" ? 10 : 12,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
 
   // CheckBox
   CheckboxRadius: 0,
   CheckboxIconSize: 16,
   CheckboxIconMarginTop: 1,
   CheckboxFontSize: 17,
-  checkboxBgColor: "#039BE5",
+  checkboxBgColor: '#039BE5',
   checkboxSize: 20,
-  checkboxTickColor: "#fff",
+  checkboxTickColor: '#fff',
 
   // Color
-  brandPrimary: "#3F51B5",
-  brandInfo: "#62B1F6",
-  brandSuccess: "#5cb85c",
-  brandDanger: "#d9534f",
-  brandWarning: "#f0ad4e",
-  brandDark: "#000",
-  brandLight: "#f4f4f4",
+  brandPrimary: '#3F51B5',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
 
-  //Container
-  containerBgColor: "#fff",
+  // Date Picker
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
 
-  //Date Picker
-  datePickerTextColor: "#000",
-  datePickerBg: "transparent",
+  // FAB
+  fabWidth: 56,
 
   // Font
   DefaultFontSize: 16,
-  fontFamily: "Roboto",
+  fontFamily: 'Roboto',
   fontSizeBase: 15,
   get fontSizeH1() {
     return this.fontSizeBase * 1.8;
 
   // Footer
   footerHeight: 55,
-  footerDefaultBg: "#3F51B5",
+  footerDefaultBg: '#3F51B5',
   footerPaddingBottom: 0,
 
   // FooterTab
-  tabBarTextColor: "#bfc6ea",
+  tabBarTextColor: '#bfc6ea',
   tabBarTextSize: 11,
-  activeTab: "#fff",
-  sTabBarActiveTextColor: "#007aff",
-  tabBarActiveTextColor: "#fff",
-  tabActiveBgColor: "#3F51B5",
+  activeTab: '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: '#fff',
+  tabActiveBgColor: '#3F51B5',
 
   // Header
-  toolbarBtnColor: "#fff",
-  toolbarDefaultBg: "#3F51B5",
+  toolbarBtnColor: '#fff',
+  toolbarDefaultBg: '#3F51B5',
   toolbarHeight: 56,
   toolbarSearchIconSize: 23,
-  toolbarInputColor: "#fff",
-  searchBarHeight: platform === "ios" ? 30 : 40,
-  searchBarInputHeight: platform === "ios" ? 40 : 50,
-  toolbarBtnTextColor: "#fff",
-  toolbarDefaultBorder: "#3F51B5",
-  iosStatusbar: "light-content",
+  toolbarInputColor: '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
+  toolbarBtnTextColor: '#fff',
+  toolbarDefaultBorder: '#3F51B5',
+  iosStatusbar: 'light-content',
   get statusBarColor() {
     return color(this.toolbarDefaultBg)
       .darken(0.2)
   },
 
   // Icon
-  iconFamily: "Ionicons",
+  iconFamily: 'Ionicons',
   iconFontSize: 28,
   iconHeaderSize: 24,
 
   // InputGroup
   inputFontSize: 17,
-  inputBorderColor: "#D9D5DC",
-  inputSuccessBorderColor: "#2b8339",
-  inputErrorBorderColor: "#ed2f2f",
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
   inputHeightBase: 50,
   get inputColor() {
     return this.textColor;
   },
   get inputColorPlaceholder() {
-    return "#575757";
+    return '#575757';
   },
 
   // Line Height
-  btnLineHeight: 19,
+  buttonLineHeight: 19,
   lineHeightH1: 32,
   lineHeightH2: 27,
   lineHeightH3: 22,
   lineHeight: 24,
 
   // List
-  listBg: "transparent",
-  listBorderColor: "#c9c9c9",
-  listDividerBg: "#f4f4f4",
-  listBtnUnderlayColor: "#DDD",
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
   listItemPadding: 12,
-  listNoteColor: "#808080",
+  listNoteColor: '#808080',
   listNoteSize: 13,
-  listItemSelected: "#3F51B5",
+  listItemSelected: '#3F51B5',
 
   // Progress Bar
-  defaultProgressColor: "#E4202D",
-  inverseProgressColor: "#1A191B",
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
 
   // Radio Button
   radioBtnSize: 23,
-  radioSelectedColorAndroid: "#3F51B5",
+  radioSelectedColorAndroid: '#3F51B5',
   radioBtnLineHeight: 24,
   get radioColor() {
     return this.brandPrimary;
   },
 
   // Segment
-  segmentBackgroundColor: "#3F51B5",
-  segmentActiveBackgroundColor: "#fff",
-  segmentTextColor: "#fff",
-  segmentActiveTextColor: "#3F51B5",
-  segmentBorderColor: "#fff",
-  segmentBorderColorMain: "#3F51B5",
+  segmentBackgroundColor: '#3F51B5',
+  segmentActiveBackgroundColor: '#fff',
+  segmentTextColor: '#fff',
+  segmentActiveTextColor: '#3F51B5',
+  segmentBorderColor: '#fff',
+  segmentBorderColorMain: '#3F51B5',
 
   // Spinner
-  defaultSpinnerColor: "#45D56E",
-  inverseSpinnerColor: "#1A191B",
+  defaultSpinnerColor: '#45D56E',
+  inverseSpinnerColor: '#1A191B',
 
   // Tab
-  tabDefaultBg: "#3F51B5",
-  topTabBarTextColor: "#b3c7f9",
-  topTabBarActiveTextColor: "#fff",
-  topTabBarBorderColor: "#fff",
-  topTabBarActiveBorderColor: "#fff",
+  tabDefaultBg: '#3F51B5',
+  topTabBarTextColor: '#b3c7f9',
+  topTabBarActiveTextColor: '#fff',
+  topTabBarBorderColor: '#fff',
+  topTabBarActiveBorderColor: '#fff',
 
   // Tabs
-  tabBgColor: "#F8F8F8",
+  tabBgColor: '#F8F8F8',
   tabFontSize: 15,
 
   // Text
-  textColor: "#000",
-  inverseTextColor: "#fff",
+  textColor: '#000',
+  inverseTextColor: '#fff',
   noteFontSize: 14,
   get defaultTextColor() {
     return this.textColor;
   },
 
   // Title
-  titleFontfamily: "Roboto",
+  titleFontfamily: 'Roboto',
   titleFontSize: 19,
   subTitleFontSize: 14,
-  subtitleColor: "#FFF",
-  titleFontColor: "#FFF",
+  subtitleColor: '#FFF',
+  titleFontColor: '#FFF',
 
   // Other
   borderRadiusBase: 2,
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
   contentPadding: 10,
-  dropdownLinkColor: "#414142",
+  dropdownLinkColor: '#414142',
   inputLineHeight: 24,
   deviceWidth,
   deviceHeight,
   isIphoneX,
   inputGroupRoundedBorderRadius: 30,
 
-  //iPhoneX SafeArea
+  // iPhoneX SafeArea
   Inset: {
     portrait: {
       topInset: 24,

native-base-theme/variables/platform.js

 // @flow
 
-import color from "color";
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
 
-import {Dimensions, PixelRatio, Platform} from "react-native";
+import { PLATFORM } from './commonColor';
 
-const deviceHeight = Dimensions.get("window").height;
-const deviceWidth = Dimensions.get("window").width;
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 const platform = Platform.OS;
 const platformStyle = undefined;
 const isIphoneX =
-    platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
 
 export default {
-    platformStyle,
-    platform,
-
-    //Accordion
-    headerStyle: "#edebed",
-    iconStyle: "#000",
-    contentStyle: "#f5f4f5",
-    expandedIconStyle: "#000",
-    accordionBorderColor: "#d3d3d3",
-
-    // Android
-    androidRipple: true,
-    androidRippleColor: "rgba(256, 256, 256, 0.3)",
-    androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
-    btnUppercaseAndroidText: true,
-
-    // Badge
-    badgeBg: "#ED1727",
-    badgeColor: "#fff",
-    badgePadding: platform === "ios" ? 3 : 0,
-
-    // Button
-    btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
-    btnTextColor: '#fff',
-    btnDisabledBg: "#b5b5b5",
-    buttonPadding: 6,
-    get btnPrimaryBg() {
-        return this.brandPrimary;
+  platformStyle,
+  platform,
+
+  // Accordion
+  accordionBorderColor: '#d3d3d3',
+  accordionContentPadding: 10,
+  accordionIconFontSize: 18,
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
+
+  // Android
+  androidRipple: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
+
+  // Badge
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+  // Button
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  buttonTextColor: '#fff',
+  buttonDisabledBg: '#b5b5b5',
+  buttonPadding: 6,
+  buttonDefaultActiveOpacity: 0.5,
+  buttonDefaultFlex: 1,
+  buttonDefaultBorderRadius: 2,
+  buttonDefaultBorderWidth: 1,
+  get buttonPrimaryBg() {
+    return this.brandPrimary;
+  },
+  get buttonPrimaryColor() {
+    return this.inverseTextColor;
+  },
+  get buttonInfoBg() {
+    return this.brandInfo;
+  },
+  get buttonInfoColor() {
+    return this.inverseTextColor;
+  },
+  get buttonSuccessBg() {
+    return this.brandSuccess;
+  },
+  get buttonSuccessColor() {
+    return this.inverseTextColor;
+  },
+  get buttonDangerBg() {
+    return this.brandDanger;
+  },
+  get buttonDangerColor() {
+    return this.inverseTextColor;
+  },
+  get buttonWarningBg() {
+    return this.brandWarning;
+  },
+  get buttonWarningColor() {
+    return this.inverseTextColor;
+  },
+  get buttonTextSize() {
+    return platform === PLATFORM.IOS
+      ? this.fontSizeBase * 1.1
+      : this.fontSizeBase - 1;
+  },
+  get buttonTextSizeLarge() {
+    return this.fontSizeBase * 1.5;
+  },
+  get buttonTextSizeSmall() {
+    return this.fontSizeBase * 0.8;
+  },
+  get borderRadiusLarge() {
+    return this.fontSizeBase * 3.8;
+  },
+  get iconSizeLarge() {
+    return this.iconFontSize * 1.5;
+  },
+  get iconSizeSmall() {
+    return this.iconFontSize * 0.6;
+  },
+
+  // Card
+  cardDefaultBg: '#fff',
+  cardBorderColor: '#ccc',
+  cardBorderRadius: 2,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+  // CheckBox
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+  checkboxBgColor: '#be1522',
+  checkboxSize: 20,
+  checkboxTickColor: '#fff',
+  checkboxDefaultColor: 'transparent',
+  checkboxTextShadowRadius: 0,
+
+  // Color
+  brandPrimary: '#be1522',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#fff',
+  sideMenuBgColor: "#f2f2f2",
+
+  // Date Picker
+  datePickerFlex: 1,
+  datePickerPadding: 10,
+  datePickerTextColor: '#000',
+  datePickerBg: 'transparent',
+
+  // FAB
+  fabBackgroundColor: 'blue',
+  fabBorderRadius: 28,
+  fabBottom: 0,
+  fabButtonBorderRadius: 20,
+  fabButtonHeight: 40,
+  fabButtonLeft: 7,
+  fabButtonMarginBottom: 10,
+  fabContainerBottom: 20,
+  fabDefaultPosition: 20,
+  fabElevation: 4,
+  fabIconColor: '#fff',
+  fabIconSize: 24,
+  fabShadowColor: '#000',
+  fabShadowOffsetHeight: 2,
+  fabShadowOffsetWidth: 0,
+  fabShadowOpacity: 0.4,
+  fabShadowRadius: 2,
+  fabWidth: 56,
+
+  // Font
+  DefaultFontSize: 16,
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
+  fontSizeBase: 15,
+  get fontSizeH1() {
+    return this.fontSizeBase * 1.8;
+  },
+  get fontSizeH2() {
+    return this.fontSizeBase * 1.6;
+  },
+  get fontSizeH3() {
+    return this.fontSizeBase * 1.4;
+  },
+
+  // Footer
+  footerHeight: 55,
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
+  footerPaddingBottom: 0,
+
+  // FooterTab
+  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+  // Header
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
+  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
+  get statusBarColor() {
+    return color(this.toolbarDefaultBg)
+      .darken(0.2)
+      .hex();
+  },
+  get darkenHeader() {
+    return color(this.tabBgColor)
+      .darken(0.03)
+      .hex();
+  },
+
+  // Icon
+  iconFamily: 'Ionicons',
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+  // InputGroup
+  inputFontSize: 17,
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
+  inputHeightBase: 50,
+  get inputColor() {
+    return this.textColor;
+  },
+  get inputColorPlaceholder() {
+    return '#575757';
+  },
+
+  // Line Height
+  buttonLineHeight: 19,
+  lineHeightH1: 32,
+  lineHeightH2: 27,
+  lineHeightH3: 22,
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+  listItemSelected: '#be1522',
+
+  // List
+  listBg: 'transparent',
+  listBorderColor: '#c9c9c9',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#DDD',
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+  listNoteColor: '#808080',
+  listNoteSize: 13,
+
+  // Progress Bar
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
+
+  // Radio Button
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+  radioSelectedColorAndroid: '#be1522',
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+  get radioColor() {
+    return this.brandPrimary;
+  },
+
+  // Segment
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+  // Spinner
+  defaultSpinnerColor: '#be1522',
+  inverseSpinnerColor: '#1A191B',
+
+  // Tab
+  tabBarDisabledTextColor: '#BDBDBD',
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+
+  // Tabs
+  tabBgColor: '#F8F8F8',
+  tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
+  tabFontSize: 15,
+
+  // Text
+  textColor: '#000',
+  textDisabledColor: "#c1c1c1",
+  inverseTextColor: '#fff',
+  noteFontSize: 14,
+  get defaultTextColor() {
+    return this.textColor;
+  },
+
+  // Title
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
+
+  // CUSTOM
+  customMaterialIconColor: "#5d5d5d",
+  fetchedDataSectionListErrorText: "#898989",
+
+  // Calendar/Agenda
+  agendaBackgroundColor: '#f3f3f4',
+  agendaEmptyLine: '#dbdbdc',
+
+  // PROXIWASH
+  proxiwashFinishedColor: "rgba(54,165,22,0.31)",
+  proxiwashReadyColor: "transparent",
+  proxiwashRunningColor: "rgba(94,104,241,0.3)",
+  proxiwashBrokenColor: "rgba(162,162,162,0.31)",
+  proxiwashErrorColor: "rgba(204,7,0,0.31)",
+
+  // Screens
+  planningColor: '#d9b10a',
+  proximoColor: '#ec5904',
+  proxiwashColor: '#1fa5ee',
+  menuColor: '#e91314',
+  tutorinsaColor: '#f93943',
+
+
+  // Other
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+  contentPadding: 10,
+  dropdownLinkColor: '#414142',
+  inputLineHeight: 24,
+  deviceWidth,
+  deviceHeight,
+  isIphoneX,
+  inputGroupRoundedBorderRadius: 30,
+
+  // iPhoneX SafeArea
+  Inset: {
+    portrait: {
+      topInset: 24,
+      leftInset: 0,
+      rightInset: 0,
+      bottomInset: 34
     },
-    get btnPrimaryColor() {
-        return this.inverseTextColor;
-    },
-    get btnInfoBg() {
-        return this.brandInfo;
-    },
-    get btnInfoColor() {
-        return this.inverseTextColor;
-    },
-    get btnSuccessBg() {
-        return this.brandSuccess;
-    },
-    get btnSuccessColor() {
-        return this.inverseTextColor;
-    },
-    get btnDangerBg() {
-        return this.brandDanger;
-    },
-    get btnDangerColor() {
-        return this.inverseTextColor;
-    },
-    get btnWarningBg() {
-        return this.brandWarning;
-    },
-    get btnWarningColor() {
-        return this.inverseTextColor;
-    },
-    get btnTextSize() {
-        return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
-    },
-    get btnTextSizeLarge() {
-        return this.fontSizeBase * 1.5;
-    },
-    get btnTextSizeSmall() {
-        return this.fontSizeBase * 0.8;
-    },
-    get borderRadiusLarge() {
-        return this.fontSizeBase * 3.8;
-    },
-    get iconSizeLarge() {
-        return this.iconFontSize * 1.5;
-    },
-    get iconSizeSmall() {
-        return this.iconFontSize * 0.6;
-    },
-
-    // Card
-    cardDefaultBg: "#fff",
-    cardBorderColor: "#ccc",
-    cardBorderRadius: 2,
-    cardItemPadding: platform === "ios" ? 10 : 12,
-
-    // CheckBox
-    CheckboxRadius: platform === "ios" ? 13 : 0,
-    CheckboxBorderWidth: platform === "ios" ? 1 : 2,
-    CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
-    CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
-    CheckboxIconSize: platform === "ios" ? 21 : 16,
-    CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
-    CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-    checkboxBgColor: "#be1522",
-    checkboxSize: 20,
-    checkboxTickColor: "#fff",
-
-    // Color
-    brandPrimary: "#be1522",
-    brandInfo: "#62B1F6",
-    brandSuccess: "#5cb85c",
-    brandDanger: "#d9534f",
-    brandWarning: "#f0ad4e",
-    brandDark: "#000",
-    brandLight: "#f4f4f4",
-
-    //Container
-    containerBgColor: "#fff",
-    sideMenuBgColor: "#f2f2f2",
-    //Date Picker
-    datePickerTextColor: "#000",
-    datePickerBg: "transparent",
-
-    // Font
-    DefaultFontSize: 16,
-    fontFamily: platform === "ios" ? "System" : "Roboto",
-    fontSizeBase: 15,
-    get fontSizeH1() {
-        return this.fontSizeBase * 1.8;
-    },
-    get fontSizeH2() {
-        return this.fontSizeBase * 1.6;
-    },
-    get fontSizeH3() {
-        return this.fontSizeBase * 1.4;
-    },
-
-    // Footer
-    footerHeight: 55,
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
-    footerPaddingBottom: 0,
-
-    // FooterTab
-    tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-    tabBarTextSize: platform === "ios" ? 14 : 11,
-    activeTab: platform === "ios" ? "#007aff" : "#fff",
-    sTabBarActiveTextColor: "#007aff",
-    tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
-    tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
-
-    // Header
-    toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
-    toolbarHeight: platform === "ios" ? 64 : 56,
-    toolbarSearchIconSize: platform === "ios" ? 20 : 23,
-    toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
-    toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
-    searchBarHeight: platform === "ios" ? 30 : 40,
-    searchBarInputHeight: platform === "ios" ? 30 : 50,
-    toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
-    iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
-    get statusBarColor() {
-        return color(this.toolbarDefaultBg)
-            .darken(0.2)
-            .hex();
-    },
-    get darkenHeader() {
-        return color(this.tabBgColor)
-            .darken(0.03)
-            .hex();
-    },
-
-    // Icon
-    iconFamily: "Ionicons",
-    iconFontSize: platform === "ios" ? 30 : 28,
-    iconHeaderSize: platform === "ios" ? 33 : 24,
-
-    // InputGroup
-    inputFontSize: 17,
-    inputBorderColor: "#D9D5DC",
-    inputSuccessBorderColor: "#2b8339",
-    inputErrorBorderColor: "#ed2f2f",
-    inputHeightBase: 50,
-    get inputColor() {
-        return this.textColor;
-    },
-    get inputColorPlaceholder() {
-        return "#575757";
-    },
-
-    // Line Height
-    btnLineHeight: 19,
-    lineHeightH1: 32,
-    lineHeightH2: 27,
-    lineHeightH3: 22,
-    lineHeight: platform === "ios" ? 20 : 24,
-    listItemSelected: platform === "ios" ? "#be1522" : "#be1522",
-
-    // List
-    listBg: "transparent",
-    listBorderColor: "#c9c9c9",
-    listDividerBg: "#f4f4f4",
-    listBtnUnderlayColor: "#DDD",
-    listItemPadding: platform === "ios" ? 10 : 12,
-    listNoteColor: "#808080",
-    listNoteSize: 13,
-
-    // Progress Bar
-    defaultProgressColor: "#E4202D",
-    inverseProgressColor: "#1A191B",
-
-    // Radio Button
-    radioBtnSize: platform === "ios" ? 25 : 23,
-    radioSelectedColorAndroid: "#E4202D",
-    radioBtnLineHeight: platform === "ios" ? 29 : 24,
-    get radioColor() {
-        return this.brandPrimary;
-    },
-
-    // Segment
-    segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-    segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
-    segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
-
-    // Spinner
-    defaultSpinnerColor: "#be1522",
-    inverseSpinnerColor: "#1A191B",
-
-    // Tab
-    tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
-    topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-    topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
-    topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
-    topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
-
-    // Tabs
-    tabBgColor: "#F8F8F8",
-    tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
-    tabFontSize: 15,
-
-    // Text
-    textColor: "#000",
-    textDisabledColor: "#c1c1c1",
-    inverseTextColor: "#fff",
-    noteFontSize: 14,
-    get defaultTextColor() {
-        return this.textColor;
-    },
-
-    // Title
-    titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
-    titleFontSize: platform === "ios" ? 17 : 19,
-    subTitleFontSize: platform === "ios" ? 11 : 14,
-    subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
-    titleFontColor: platform === "ios" ? "#000" : "#FFF",
-
-
-    // CUSTOM
-    customMaterialIconColor: "#5d5d5d",
-    fetchedDataSectionListErrorText: "#898989",
-
-    // Calendar/Agenda
-    agendaBackgroundColor: '#f3f3f4',
-    agendaEmptyLine: '#dbdbdc',
-
-    // PROXIWASH
-    proxiwashFinishedColor: "rgba(54,165,22,0.31)",
-    proxiwashReadyColor: "transparent",
-    proxiwashRunningColor: "rgba(94,104,241,0.3)",
-    proxiwashBrokenColor: "rgba(162,162,162,0.31)",
-    proxiwashErrorColor: "rgba(204,7,0,0.31)",
-
-    // Screens
-    planningColor: '#d9b10a',
-    proximoColor: '#ec5904',
-    proxiwashColor: '#1fa5ee',
-    menuColor: '#e91314',
-    tutorinsaColor: '#f93943',
-
-
-    // Other
-    borderRadiusBase: platform === "ios" ? 5 : 2,
-    borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-    contentPadding: 10,
-    dropdownLinkColor: "#414142",
-    inputLineHeight: 24,
-    deviceWidth,
-    deviceHeight,
-    isIphoneX,
-    inputGroupRoundedBorderRadius: 30,
-
-    //iPhoneX SafeArea
-    Inset: {
-        portrait: {
-            topInset: 24,
-            leftInset: 0,
-            rightInset: 0,
-            bottomInset: 34
-        },
-        landscape: {
-            topInset: 0,
-            leftInset: 44,
-            rightInset: 44,
-            bottomInset: 21
-        }
+    landscape: {
+      topInset: 0,
+      leftInset: 44,
+      rightInset: 44,
+      bottomInset: 21
     }
+  }
 };

native-base-theme/variables/platformDark.js

 // @flow
 
-import color from "color";
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
 
-import {Dimensions, PixelRatio, Platform} from "react-native";
+import { PLATFORM } from './commonColor';
 
-const deviceHeight = Dimensions.get("window").height;
-const deviceWidth = Dimensions.get("window").width;
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 const platform = Platform.OS;
 const platformStyle = undefined;
 const isIphoneX =
-    platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
+  platform === PLATFORM.IOS &&
+  (deviceHeight === 812 ||
+    deviceWidth === 812 ||
+    deviceHeight === 896 ||
+    deviceWidth === 896);
 
 export default {
-    platformStyle,
-    platform,
-
-    //Accordion
-    headerStyle: "#edebed",
-    iconStyle: "#000",
-    contentStyle: "#f5f4f5",
-    expandedIconStyle: "#000",
-    accordionBorderColor: "#d3d3d3",
-
-    // Android
-    androidRipple: true,
-    androidRippleColor: "rgba(256, 256, 256, 0.3)",
-    androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
-    btnUppercaseAndroidText: true,
-
-    // Badge
-    badgeBg: "#ED1727",
-    badgeColor: "#fff",
-    badgePadding: platform === "ios" ? 3 : 0,
-
-    // Button
-    btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
-    btnTextColor: '#fff',
-    btnDisabledBg: "#b5b5b5",
-    buttonPadding: 6,
-    get btnPrimaryBg() {
-        return this.brandPrimary;
+  platformStyle,
+  platform,
+
+  // Accordion
+  accordionBorderColor: '#d3d3d3',
+  accordionContentPadding: 10,
+  accordionIconFontSize: 18,
+  contentStyle: '#f5f4f5',
+  expandedIconStyle: '#000',
+  headerStyle: '#edebed',
+  iconStyle: '#000',
+
+  // ActionSheet
+  elevation: 4,
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+  innerTouchableBackgroundColor: '#fff',
+  listItemHeight: 50,
+  listItemBorderColor: 'transparent',
+  marginHorizontal: -15,
+  marginLeft: 14,
+  marginTop: 15,
+  minHeight: 56,
+  padding: 15,
+  touchableTextColor: '#757575',
+
+  // Android
+  androidRipple: true,
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+  buttonUppercaseAndroidText: true,
+
+  // Badge
+  badgeBg: '#ED1727',
+  badgeColor: '#fff',
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+  // Button
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  buttonTextColor: '#fff',
+  buttonDisabledBg: '#b5b5b5',
+  buttonPadding: 6,
+  buttonDefaultActiveOpacity: 0.5,
+  buttonDefaultFlex: 1,
+  buttonDefaultBorderRadius: 2,
+  buttonDefaultBorderWidth: 1,
+  get buttonPrimaryBg() {
+    return this.brandPrimary;
+  },
+  get buttonPrimaryColor() {
+    return this.textColor;
+  },
+  get buttonInfoBg() {
+    return this.brandInfo;
+  },
+  get buttonInfoColor() {
+    return this.textColor;
+  },
+  get buttonSuccessBg() {
+    return this.brandSuccess;
+  },
+  get buttonSuccessColor() {
+    return this.textColor;
+  },
+  get buttonDangerBg() {
+    return this.brandDanger;
+  },
+  get buttonDangerColor() {
+    return this.textColor;
+  },
+  get buttonWarningBg() {
+    return this.brandWarning;
+  },
+  get buttonWarningColor() {
+    return this.textColor;
+  },
+  get buttonTextSize() {
+    return platform === PLATFORM.IOS
+      ? this.fontSizeBase * 1.1
+      : this.fontSizeBase - 1;
+  },
+  get buttonTextSizeLarge() {
+    return this.fontSizeBase * 1.5;
+  },
+  get buttonTextSizeSmall() {
+    return this.fontSizeBase * 0.8;
+  },
+  get borderRadiusLarge() {
+    return this.fontSizeBase * 3.8;
+  },
+  get iconSizeLarge() {
+    return this.iconFontSize * 1.5;
+  },
+  get iconSizeSmall() {
+    return this.iconFontSize * 0.6;
+  },
+
+  // Card
+  cardDefaultBg: '#2A2A2A',
+  cardBorderColor: '#1a1a1a',
+  cardBorderRadius: 2,
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+  // CheckBox
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+  checkboxBgColor: '#be1522',
+  checkboxSize: 20,
+  checkboxTickColor: '#fff',
+  checkboxDefaultColor: 'transparent',
+  checkboxTextShadowRadius: 0,
+
+  // Color
+  brandPrimary: '#be1522',
+  brandInfo: '#62B1F6',
+  brandSuccess: '#5cb85c',
+  brandDanger: '#d9534f',
+  brandWarning: '#f0ad4e',
+  brandDark: '#000',
+  brandLight: '#f4f4f4',
+
+  // Container
+  containerBgColor: '#222222',
+  sideMenuBgColor: "#1c1c1c",
+
+  // Date Picker
+  datePickerFlex: 1,
+  datePickerPadding: 10,
+  datePickerTextColor: '#fff',
+  datePickerBg: 'transparent',
+
+  // FAB
+  fabBackgroundColor: 'blue',
+  fabBorderRadius: 28,
+  fabBottom: 0,
+  fabButtonBorderRadius: 20,
+  fabButtonHeight: 40,
+  fabButtonLeft: 7,
+  fabButtonMarginBottom: 10,
+  fabContainerBottom: 20,
+  fabDefaultPosition: 20,
+  fabElevation: 4,
+  fabIconColor: '#fff',
+  fabIconSize: 24,
+  fabShadowColor: '#000',
+  fabShadowOffsetHeight: 2,
+  fabShadowOffsetWidth: 0,
+  fabShadowOpacity: 0.4,
+  fabShadowRadius: 2,
+  fabWidth: 56,
+
+  // Font
+  DefaultFontSize: 16,
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
+  fontSizeBase: 15,
+  get fontSizeH1() {
+    return this.fontSizeBase * 1.8;
+  },
+  get fontSizeH2() {
+    return this.fontSizeBase * 1.6;
+  },
+  get fontSizeH3() {
+    return this.fontSizeBase * 1.4;
+  },
+
+  // Footer
+  footerHeight: 55,
+  footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
+  footerPaddingBottom: 0,
+
+  // FooterTab
+  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  sTabBarActiveTextColor: '#007aff',
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+  // Header
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
+  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
+  get statusBarColor() {
+    return color(this.toolbarDefaultBg)
+      .darken(0.2)
+      .hex();
+  },
+  get darkenHeader() {
+    return color(this.tabBgColor)
+      .darken(0.03)
+      .hex();
+  },
+
+  // Icon
+  iconFamily: 'Ionicons',
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+  // InputGroup
+  inputFontSize: 17,
+  inputBorderColor: '#D9D5DC',
+  inputSuccessBorderColor: '#2b8339',
+  inputErrorBorderColor: '#ed2f2f',
+  inputHeightBase: 50,
+  get inputColor() {
+    return this.textColor;
+  },
+  get inputColorPlaceholder() {
+    return '#575757';
+  },
+
+  // Line Height
+  buttonLineHeight: 19,
+  lineHeightH1: 32,
+  lineHeightH2: 27,
+  lineHeightH3: 22,
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+  listItemSelected: '#be1522',
+
+  // List
+  listBg: 'transparent',
+  listBorderColor: '#3e3e3e',
+  listDividerBg: '#f4f4f4',
+  listBtnUnderlayColor: '#3a3a3a',
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+  listNoteColor: '#acacac',
+  listNoteSize: 13,
+
+  // Progress Bar
+  defaultProgressColor: '#E4202D',
+  inverseProgressColor: '#1A191B',
+
+  // Radio Button
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+  radioSelectedColorAndroid: '#be1522',
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+  get radioColor() {
+    return this.brandPrimary;
+  },
+
+  // Segment
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+  // Spinner
+  defaultSpinnerColor: '#be1522',
+  inverseSpinnerColor: '#1A191B',
+
+  // Tab
+  tabBarDisabledTextColor: '#BDBDBD',
+  tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
+
+  // Tabs
+  tabBgColor: '#2b2b2b',
+  tabIconColor: "#fff",
+  tabFontSize: 15,
+
+  // Text
+  textColor: '#ebebeb',
+  textDisabledColor: "#5b5b5b",
+  inverseTextColor: '#000',
+  noteFontSize: 14,
+  get defaultTextColor() {
+    return this.textColor;
+  },
+
+  // Title
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
+
+  // CUSTOM
+  customMaterialIconColor: "#b3b3b3",
+  fetchedDataSectionListErrorText: "#acacac",
+
+  // Calendar/Agenda
+  agendaBackgroundColor: '#373737',
+  agendaEmptyLine: '#464646',
+
+  // PROXIWASH
+  proxiwashFinishedColor: "rgba(17,149,32,0.53)",
+  proxiwashReadyColor: "transparent",
+  proxiwashRunningColor: "rgba(29,59,175,0.65)",
+  proxiwashBrokenColor: "#000000",
+  proxiwashErrorColor: "rgba(213,8,0,0.57)",
+
+  // Screens
+  planningColor: '#d99e09',
+  proximoColor: '#ec5904',
+  proxiwashColor: '#1fa5ee',
+  menuColor: '#b81213',
+  tutorinsaColor: '#f93943',
+
+
+  // Other
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+  contentPadding: 10,
+  dropdownLinkColor: '#414142',
+  inputLineHeight: 24,
+  deviceWidth,
+  deviceHeight,
+  isIphoneX,
+  inputGroupRoundedBorderRadius: 30,
+
+  // iPhoneX SafeArea
+  Inset: {
+    portrait: {
+      topInset: 24,
+      leftInset: 0,
+      rightInset: 0,
+      bottomInset: 34
     },
-    get btnPrimaryColor() {
-        return this.textColor;
-    },
-    get btnInfoBg() {
-        return this.brandInfo;
-    },
-    get btnInfoColor() {
-        return this.textColor;
-    },
-    get btnSuccessBg() {
-        return this.brandSuccess;
-    },
-    get btnSuccessColor() {
-        return this.textColor;
-    },
-    get btnDangerBg() {
-        return this.brandDanger;
-    },
-    get btnDangerColor() {
-        return this.textColor;
-    },
-    get btnWarningBg() {
-        return this.brandWarning;
-    },
-    get btnWarningColor() {
-        return this.textColor;
-    },
-    get btnTextSize() {
-        return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
-    },
-    get btnTextSizeLarge() {
-        return this.fontSizeBase * 1.5;
-    },
-    get btnTextSizeSmall() {
-        return this.fontSizeBase * 0.8;
-    },
-    get borderRadiusLarge() {
-        return this.fontSizeBase * 3.8;
-    },
-    get iconSizeLarge() {
-        return this.iconFontSize * 1.5;
-    },
-    get iconSizeSmall() {
-        return this.iconFontSize * 0.6;
-    },
-
-    // Card
-    cardDefaultBg: "#2A2A2A",
-    cardBorderColor: "#1a1a1a",
-    cardBorderRadius: 2,
-    cardItemPadding: platform === "ios" ? 10 : 12,
-
-    // CheckBox
-    CheckboxRadius: platform === "ios" ? 13 : 0,
-    CheckboxBorderWidth: platform === "ios" ? 1 : 2,
-    CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
-    CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
-    CheckboxIconSize: platform === "ios" ? 21 : 16,
-    CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
-    CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-    checkboxBgColor: "#E4202D",
-    checkboxSize: 20,
-    checkboxTickColor: "#fff",
-
-    // Color
-    brandPrimary: "#be1522",
-    brandInfo: "#62B1F6",
-    brandSuccess: "#5cb85c",
-    brandDanger: "#d9534f",
-    brandWarning: "#f0ad4e",
-    brandDark: "#000",
-    brandLight: "#f4f4f4",
-
-    //Container
-    containerBgColor: "#222222",
-    sideMenuBgColor: "#1c1c1c",
-
-    //Date Picker
-    datePickerTextColor: "#fff",
-    datePickerBg: "transparent",
-
-    // Font
-    DefaultFontSize: 16,
-    fontFamily: platform === "ios" ? "System" : "Roboto",
-    fontSizeBase: 15,
-    get fontSizeH1() {
-        return this.fontSizeBase * 1.8;
-    },
-    get fontSizeH2() {
-        return this.fontSizeBase * 1.6;
-    },
-    get fontSizeH3() {
-        return this.fontSizeBase * 1.4;
-    },
-
-    // Footer
-    footerHeight: 55,
-    footerDefaultBg: platform === "ios" ? "#333333" : "#be1522",
-    footerPaddingBottom: 0,
-
-    // FooterTab
-    tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-    tabBarTextSize: platform === "ios" ? 14 : 11,
-    activeTab: platform === "ios" ? "#007aff" : "#fff",
-    sTabBarActiveTextColor: "#007aff",
-    tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
-    tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
-
-    // Header
-    toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
-    toolbarHeight: platform === "ios" ? 64 : 56,
-    toolbarSearchIconSize: platform === "ios" ? 20 : 23,
-    toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
-    toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
-    searchBarHeight: platform === "ios" ? 30 : 40,
-    searchBarInputHeight: platform === "ios" ? 30 : 50,
-    toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
-    iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
-    get statusBarColor() {
-        return color(this.toolbarDefaultBg)
-            .darken(0.2)
-            .hex();
-    },
-    get darkenHeader() {
-        return color(this.tabBgColor)
-            .darken(0.03)
-            .hex();
-    },
-
-    // Icon
-    iconFamily: "Ionicons",
-    iconFontSize: platform === "ios" ? 30 : 28,
-    iconHeaderSize: platform === "ios" ? 33 : 24,
-
-    // InputGroup
-    inputFontSize: 17,
-    inputBorderColor: "#D9D5DC",
-    inputSuccessBorderColor: "#2b8339",
-    inputErrorBorderColor: "#ed2f2f",
-    inputHeightBase: 50,
-    get inputColor() {
-        return this.textColor;
-    },
-    get inputColorPlaceholder() {
-        return "#575757";
-    },
-
-    // Line Height
-    btnLineHeight: 19,
-    lineHeightH1: 32,
-    lineHeightH2: 27,
-    lineHeightH3: 22,
-    lineHeight: platform === "ios" ? 20 : 24,
-    listItemSelected: "#be1522",
-
-    // List
-    listBg: "transparent",
-    listBorderColor: "#3e3e3e",
-    listDividerBg: "#f4f4f4",
-    listBtnUnderlayColor: "#3a3a3a",
-    listItemPadding: platform === "ios" ? 10 : 12,
-    listNoteColor: "#acacac",
-    listNoteSize: 13,
-
-    // Progress Bar
-    defaultProgressColor: "#E4202D",
-    inverseProgressColor: "#1A191B",
-
-    // Radio Button
-    radioBtnSize: platform === "ios" ? 25 : 23,
-    radioSelectedColorAndroid: "#E4202D",
-    radioBtnLineHeight: platform === "ios" ? 29 : 24,
-    get radioColor() {
-        return "#be1522";
-    },
-
-    // Segment
-    segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
-    segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
-    segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
-    segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
-
-    // Spinner
-    defaultSpinnerColor: "#be1522",
-    inverseSpinnerColor: "#1A191B",
-
-    // Tab
-    tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
-    topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
-    topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
-    topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
-    topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
-
-    // Tabs
-    tabBgColor: "#2b2b2b",
-    tabIconColor: "#fff",
-    tabFontSize: 15,
-
-    // Text
-    textColor: "#ebebeb",
-    textDisabledColor: "#5b5b5b",
-    inverseTextColor: "#000",
-    noteFontSize: 14,
-    get defaultTextColor() {
-        return this.textColor;
-    },
-
-    // Title
-    titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
-    titleFontSize: platform === "ios" ? 17 : 19,
-    subTitleFontSize: platform === "ios" ? 11 : 14,
-    subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
-    titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
-
-
-    // CUSTOM
-    customMaterialIconColor: "#b3b3b3",
-    fetchedDataSectionListErrorText: "#acacac",
-
-    // Calendar/Agenda
-    agendaBackgroundColor: '#373737',
-    agendaEmptyLine: '#464646',
-
-    // PROXIWASH
-    proxiwashFinishedColor: "rgba(17,149,32,0.53)",
-    proxiwashReadyColor: "transparent",
-    proxiwashRunningColor: "rgba(29,59,175,0.65)",
-    proxiwashBrokenColor: "#000000",
-    proxiwashErrorColor: "rgba(213,8,0,0.57)",
-
-    // Screens
-    planningColor: '#d99e09',
-    proximoColor: '#ec5904',
-    proxiwashColor: '#1fa5ee',
-    menuColor: '#b81213',
-    tutorinsaColor: '#f93943',
-
-    // Other
-    borderRadiusBase: platform === "ios" ? 5 : 2,
-    borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-    contentPadding: 10,
-    dropdownLinkColor: "#414142",
-    inputLineHeight: 24,
-    deviceWidth,
-    deviceHeight,
-    isIphoneX,
-    inputGroupRoundedBorderRadius: 30,
-
-    //iPhoneX SafeArea
-    Inset: {
-        portrait: {
-            topInset: 24,
-            leftInset: 0,
-            rightInset: 0,
-            bottomInset: 34
-        },
-        landscape: {
-            topInset: 0,
-            leftInset: 44,
-            rightInset: 44,
-            bottomInset: 21
-        }
+    landscape: {
+      topInset: 0,
+      leftInset: 44,
+      rightInset: 44,
+      bottomInset: 21
     }
+  }
 };