v.1.2.0 - upgrade to the latest ReactNative version

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

.flowconfig

@@ -11,20 +11,26 @@
 ; Ignore duplicate module providers
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
+node_modules/react-native/Libraries/react-native/React.js
 
 ; Ignore polyfills
-.*/Libraries/polyfills/.*
+node_modules/react-native/Libraries/polyfills/.*
 
-; Ignore metro
-.*/node_modules/metro/.*
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/HMRLoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
 
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow/
-node_modules/react-native/flow-github/
 
 [options]
 emoji=true
@@ -32,6 +38,10 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
 module.system=haste
 module.system.haste.use_name_reducers=true
 # get basename
@@ -44,27 +54,46 @@ module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
 module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
 module.system.haste.paths.blacklist=.*/__tests__/.*
 module.system.haste.paths.blacklist=.*/__mocks__/.*
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
 module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/IntegrationTests/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation.js
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
 
 munge_underscores=true
 
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
-module.file_ext=.js
-module.file_ext=.jsx
-module.file_ext=.json
-module.file_ext=.native.js
-
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+inexact-spread=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
 [version]
-^0.86.0
+^0.98.0

.gitignore

@@ -1,5 +1,3 @@
-android/*.log
-
 # OSX
 #
 .DS_Store
@@ -56,3 +54,6 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# CocoaPods
+/ios/Pods/

App.js

@@ -222,15 +222,13 @@ export default class App extends Component<Props> {
     javascriptToInject () {
       return ``
     }
-    
-    componentWillMount() {
+
+    componentDidMount() {
         OneSignal.init(ONESIGNALAPPID, {kOSSettingsKeyAutoPrompt : true});
 
         OneSignal.addEventListener('received', this.onNotificationReceived);
         OneSignal.addEventListener('opened', this.onNotificationOpened.bind(this));
-    }
 
-    componentDidMount() {
         if (Platform.OS === 'android') {
             this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
                 this.onBack(); // works best when the goBack is async
@@ -240,10 +238,12 @@ export default class App extends Component<Props> {
     }
     
     componentWillUnmount() {
-        this.backHandler.remove();
-        
         OneSignal.removeEventListener('received', this.onNotificationReceived);        
         OneSignal.removeEventListener('opened', this.onNotificationOpened);
+
+        if (Platform.OS === 'android') {
+            this.backHandler.remove();
+        }
     }
     
     onNotificationReceived(notification) {
@@ -252,10 +252,7 @@ export default class App extends Component<Props> {
     
     onNotificationOpened(openResult) {
         if ('undefined' !== typeof(openResult.notification.payload.additionalData) && 'undefined' !== typeof(openResult.notification.payload.additionalData.url) && !openResult.notification.isAppInFocus) {
-            this.setState({
-                url: openResult.notification.payload.additionalData.url,
-                searchbar: false,
-            });
+            this.injectJavaScript(`window.location = '${openResult.notification.payload.additionalData.url}';`);
         }
     }
     
@@ -307,6 +304,7 @@ export default class App extends Component<Props> {
                     geolocationEnabled={true}
                     builtInZoomControls={false}
                     decelerationRate="normal"
+                    cacheEnabled={true}
                     injectedJavaScript={this.javascriptToInject()}
                     onShouldStartLoadWithRequest={this.onWebViewShouldStartLoadWithRequest.bind(this)}
 
@@ -417,15 +415,15 @@ export default class App extends Component<Props> {
                     <View style={styles.drawerImageContainer}>
                         <Image style={styles.drawerImage} source={require('./img/logo-loading.png')} />
                     </View>
-                    <Button iconLeft transparent onPress={this.onDrawerLoginMenu.bind(this)}>
+                    <Button style={styles.drawerButton} iconLeft transparent onPress={this.onDrawerLoginMenu.bind(this)}>
                         <Icon style={styles.drawerButtonIcon} name='ios-key' />
                         <Text>Login</Text>
                     </Button>
-                    <Button iconLeft transparent onPress={this.onDrawerJoinMenu.bind(this)}>
+                    <Button style={styles.drawerButton} iconLeft transparent onPress={this.onDrawerJoinMenu.bind(this)}>
                         <Icon style={styles.drawerButtonIcon} name='ios-add-circle-outline' />
                         <Text>Join</Text>
                     </Button>
-                    <Button iconLeft transparent onPress={this.onDrawerForgotMenu.bind(this)}>
+                    <Button style={styles.drawerButton} iconLeft transparent onPress={this.onDrawerForgotMenu.bind(this)}>
                         <Icon style={styles.drawerButtonIcon} name='ios-lock' />
                         <Text>Forgot Password</Text>
                     </Button>
@@ -472,6 +470,9 @@ const styles = StyleSheet.create({
         height:33.5, 
         width:125,
     },
+    drawerButton: {
+        justifyContent: 'flex-start',
+    },
     drawerButtonIcon: {
         width: 20,
         justifyContent: 'center',

README.md → README.md

@@ -1,6 +1,5 @@
 /**
  * @format
- * @lint-ignore-every XPLATJSCOPYRIGHT1
  */
 
 import 'react-native';

android/app/build.gradle

@@ -18,6 +18,9 @@ import com.android.build.OutputFile
  *   // the entry file for bundle generation
  *   entryFile: "index.android.js",
  *
+ *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
+ *   bundleCommand: "ram-bundle",
+ *
  *   // whether to bundle JS and assets in debug mode
  *   bundleInDebug: false,
  *
@@ -73,7 +76,8 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    entryFile: "index.js",
+    enableHermes: false,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -93,16 +97,42 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
+/**
+ * The preferred build flavor of JavaScriptCore.
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US.  Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and mirrored here.  If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
-    buildToolsVersion rootProject.ext.buildToolsVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
 
     defaultConfig {
         applicationId "com.una.android"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 110
-        versionName "1.1"
+        versionCode 1200
+        versionName "1.2.0"
     }
     signingConfigs {
         release {
@@ -119,37 +149,67 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a"
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+        }
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
         }
     }
     buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
         release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://facebook.github.io/react-native/docs/signed-apk-android.
+            signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            signingConfig signingConfigs.release
         }
     }
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
-            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3]
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
                         versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
             }
+
         }
     }
+
+    packagingOptions {
+        pickFirst '**/armeabi-v7a/libc++_shared.so'
+        pickFirst '**/x86/libc++_shared.so'
+        pickFirst '**/arm64-v8a/libc++_shared.so'
+        pickFirst '**/x86_64/libc++_shared.so'
+        pickFirst '**/x86/libjsc.so'
+        pickFirst '**/armeabi-v7a/libjsc.so'
+    }
 }
 
 dependencies {
     implementation project(':react-native-webview')
     implementation project(':react-native-onesignal')
     implementation fileTree(dir: "libs", include: ["*.jar"])
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules
+
+    if (enableHermes) {
+      def hermesPath = "../../node_modules/hermesvm/android/";
+      debugImplementation files(hermesPath + "hermes-debug.aar")
+      releaseImplementation files(hermesPath + "hermes-release.aar")
+    } else {
+      implementation jscFlavor
+    }
 }
 
 // Run this once to be able to run the application with BUCK
@@ -158,3 +218,5 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/proguard-rules.pro

@@ -8,10 +8,3 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -20,7 +20,7 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
-        <intent-filter android:label="UNA.IO">
+      <intent-filter android:label="UNA.IO">
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <data android:scheme="https" android:host="una.io" />

android/app/src/main/java/com/una/android/MainApplication.java

@@ -1,16 +1,18 @@
 package com.una.android;
 
 import android.app.Application;
+import android.util.Log;
 
+import com.facebook.react.PackageList;
+import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
+import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 
-import java.util.Arrays;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
@@ -23,11 +25,11 @@ public class MainApplication extends Application implements ReactApplication {
 
     @Override
     protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-          new MainReactPackage(),
-          new RNCWebViewPackage(),
-          new ReactNativeOneSignalPackage()
-      );
+      @SuppressWarnings("UnnecessaryLocalVariable")
+      List<ReactPackage> packages = new PackageList(this).getPackages();
+      // Packages that cannot be autolinked yet can be added manually here, for example:
+      // packages.add(new MyReactNativePackage());
+      return packages;
     }
 
     @Override

android/build.gradle

@@ -2,10 +2,10 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "28.0.2"
+        buildToolsVersion = "28.0.3"
         minSdkVersion = 16
         compileSdkVersion = 28
-        targetSdkVersion = 27
+        targetSdkVersion = 28
         supportLibVersion = "28.0.0"
     }
     repositories {
@@ -13,7 +13,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.3.1'
+        classpath('com.android.tools.build:gradle:3.4.2')
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -23,17 +23,16 @@ buildscript {
 allprojects {
     repositories {
         mavenLocal()
-        google()
-        jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
+            url("$rootDir/../node_modules/react-native/android")
+        }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../node_modules/jsc-android/dist")
         }
-    }
-}
-
 
-task wrapper(type: Wrapper) {
-    gradleVersion = '4.7'
-    distributionUrl = distributionUrl.replace("bin", "all")
+        google()
+        jcenter()
+    }
 }

android/gradle.properties

@@ -17,8 +17,10 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
+android.useAndroidX=true
+android.enableJetifier=true
+
 MYAPP_RELEASE_STORE_FILE=una-release-key.keystore
 MYAPP_RELEASE_KEY_ALIAS=una
 MYAPP_RELEASE_STORE_PASSWORD=
 MYAPP_RELEASE_KEY_PASSWORD=
-

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,5 @@
-#Thu Mar 14 11:00:40 AEDT 2019
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

android/gradlew

@@ -1,5 +1,21 @@
 #!/usr/bin/env sh
 
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
 ##############################################################################
 ##
 ##  Gradle start up script for UN*X
@@ -28,7 +44,7 @@ APP_NAME="Gradle"
 APP_BASE_NAME=`basename "$0"`
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD="maximum"

android/gradlew.bat

@@ -1,3 +1,19 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
 @if "%DEBUG%" == "" @echo off
 @rem ##########################################################################
 @rem
@@ -14,7 +30,7 @@ set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
 @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
 
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome

android/keystores/BUCK

@@ -1,8 +0,0 @@
-keystore(
-    name = "debug",
-    properties = "debug.keystore.properties",
-    store = "debug.keystore",
-    visibility = [
-        "PUBLIC",
-    ],
-)

android/keystores/debug.keystore.properties

@@ -1,4 +0,0 @@
-key.store=debug.keystore
-key.alias=androiddebugkey
-key.store.password=android
-key.alias.password=android

android/settings.gradle

@@ -1,8 +1,7 @@
 rootProject.name = 'una'
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
-
 include ':react-native-onesignal'
 project(':react-native-onesignal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-onesignal/android')
-
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

app.json

@@ -1,4 +1,4 @@
 {
   "name": "una",
   "displayName": "UNA"
-}
+}

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["module:metro-react-native-babel-preset"]
-}
+  presets: ['module:metro-react-native-babel-preset'],
+};

ios/Podfile

@@ -0,0 +1,51 @@
+platform :ios, '9.0'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+target 'una' do
+  # Pods for una
+  pod 'React', :path => '../node_modules/react-native/'
+  pod 'React-Core', :path => '../node_modules/react-native/React'
+  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
+  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
+  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
+  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
+  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
+  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
+  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
+  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
+  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
+  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
+  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
+  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
+
+  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
+  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
+  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
+  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
+  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+
+  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+
+  pod 'react-native-onesignal', :path => '../node_modules/react-native-onesignal'
+
+  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
+
+  target 'unaTests' do
+    inherit! :search_paths
+    # Pods for testing
+  end
+
+  use_native_modules!
+end
+
+target 'una-tvOS' do
+  # Pods for una-tvOS
+
+  target 'una-tvOSTests' do
+    inherit! :search_paths
+    # Pods for testing
+  end
+
+end

ios/Podfile.lock

@@ -0,0 +1,203 @@
+PODS:
+  - boost-for-react-native (1.63.0)
+  - DoubleConversion (1.1.6)
+  - Folly (2018.10.22.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - Folly/Default (= 2018.10.22.00)
+    - glog
+  - Folly/Default (2018.10.22.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - glog
+  - glog (0.3.5)
+  - OneSignal (2.10.0)
+  - React (0.60.4):
+    - React-Core (= 0.60.4)
+    - React-DevSupport (= 0.60.4)
+    - React-RCTActionSheet (= 0.60.4)
+    - React-RCTAnimation (= 0.60.4)
+    - React-RCTBlob (= 0.60.4)
+    - React-RCTImage (= 0.60.4)
+    - React-RCTLinking (= 0.60.4)
+    - React-RCTNetwork (= 0.60.4)
+    - React-RCTSettings (= 0.60.4)
+    - React-RCTText (= 0.60.4)
+    - React-RCTVibration (= 0.60.4)
+    - React-RCTWebSocket (= 0.60.4)
+  - React-Core (0.60.4):
+    - Folly (= 2018.10.22.00)
+    - React-cxxreact (= 0.60.4)
+    - React-jsiexecutor (= 0.60.4)
+    - yoga (= 0.60.4.React)
+  - React-cxxreact (0.60.4):
+    - boost-for-react-native (= 1.63.0)
+    - DoubleConversion
+    - Folly (= 2018.10.22.00)
+    - glog
+    - React-jsinspector (= 0.60.4)
+  - React-DevSupport (0.60.4):
+    - React-Core (= 0.60.4)
+    - React-RCTWebSocket (= 0.60.4)
+  - React-fishhook (0.60.4)
+  - React-jsi (0.60.4):
+    - boost-for-react-native (= 1.63.0)
+    - DoubleConversion
+    - Folly (= 2018.10.22.00)
+    - glog
+    - React-jsi/Default (= 0.60.4)
+  - React-jsi/Default (0.60.4):
+    - boost-for-react-native (= 1.63.0)
+    - DoubleConversion
+    - Folly (= 2018.10.22.00)
+    - glog
+  - React-jsiexecutor (0.60.4):
+    - DoubleConversion
+    - Folly (= 2018.10.22.00)
+    - glog
+    - React-cxxreact (= 0.60.4)
+    - React-jsi (= 0.60.4)
+  - React-jsinspector (0.60.4)
+  - react-native-onesignal (3.3.1):
+    - OneSignal (= 2.10.0)
+    - React (< 1.0.0, >= 0.13.0)
+  - react-native-webview (5.12.1):
+    - React
+  - React-RCTActionSheet (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTAnimation (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTBlob (0.60.4):
+    - React-Core (= 0.60.4)
+    - React-RCTNetwork (= 0.60.4)
+    - React-RCTWebSocket (= 0.60.4)
+  - React-RCTImage (0.60.4):
+    - React-Core (= 0.60.4)
+    - React-RCTNetwork (= 0.60.4)
+  - React-RCTLinking (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTNetwork (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTSettings (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTText (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTVibration (0.60.4):
+    - React-Core (= 0.60.4)
+  - React-RCTWebSocket (0.60.4):
+    - React-Core (= 0.60.4)
+    - React-fishhook (= 0.60.4)
+  - yoga (0.60.4.React)
+
+DEPENDENCIES:
+  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - React (from `../node_modules/react-native/`)
+  - React-Core (from `../node_modules/react-native/React`)
+  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-DevSupport (from `../node_modules/react-native/React`)
+  - React-fishhook (from `../node_modules/react-native/Libraries/fishhook`)
+  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
+  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
+  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-onesignal (from `../node_modules/react-native-onesignal`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
+  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
+  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
+  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
+  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
+  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
+  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
+  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
+  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
+  - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
+  - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
+
+SPEC REPOS:
+  https://github.com/cocoapods/specs.git:
+    - boost-for-react-native
+    - OneSignal
+
+EXTERNAL SOURCES:
+  DoubleConversion:
+    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+  Folly:
+    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+  glog:
+    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  React:
+    :path: "../node_modules/react-native/"
+  React-Core:
+    :path: "../node_modules/react-native/React"
+  React-cxxreact:
+    :path: "../node_modules/react-native/ReactCommon/cxxreact"
+  React-DevSupport:
+    :path: "../node_modules/react-native/React"
+  React-fishhook:
+    :path: "../node_modules/react-native/Libraries/fishhook"
+  React-jsi:
+    :path: "../node_modules/react-native/ReactCommon/jsi"
+  React-jsiexecutor:
+    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
+  React-jsinspector:
+    :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-onesignal:
+    :path: "../node_modules/react-native-onesignal"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
+  React-RCTActionSheet:
+    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
+  React-RCTAnimation:
+    :path: "../node_modules/react-native/Libraries/NativeAnimation"
+  React-RCTBlob:
+    :path: "../node_modules/react-native/Libraries/Blob"
+  React-RCTImage:
+    :path: "../node_modules/react-native/Libraries/Image"
+  React-RCTLinking:
+    :path: "../node_modules/react-native/Libraries/LinkingIOS"
+  React-RCTNetwork:
+    :path: "../node_modules/react-native/Libraries/Network"
+  React-RCTSettings:
+    :path: "../node_modules/react-native/Libraries/Settings"
+  React-RCTText:
+    :path: "../node_modules/react-native/Libraries/Text"
+  React-RCTVibration:
+    :path: "../node_modules/react-native/Libraries/Vibration"
+  React-RCTWebSocket:
+    :path: "../node_modules/react-native/Libraries/WebSocket"
+  yoga:
+    :path: "../node_modules/react-native/ReactCommon/yoga"
+
+SPEC CHECKSUMS:
+  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
+  Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
+  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
+  OneSignal: 0f5ff711d9f25da54885e4ab06ef0abc221a46ef
+  React: ff7ee2ae5ee1c1d9ae2183b4111045b25294bb01
+  React-Core: 8e0ea421cae5609d2562850f98421b15030476fa
+  React-cxxreact: 326880209990151a7182a813311054e9772ba510
+  React-DevSupport: e9f10e6721e78e87622fc985db695c0c0168db8a
+  React-fishhook: 1f0e5b08449403fa75c3fb3881a0beefbada14af
+  React-jsi: 21d3153b1153fbf6510a92b6b11e33e725cb7432
+  React-jsiexecutor: 7549641e48bafae7bfee3f3ea19bf4901639c5de
+  React-jsinspector: 73f24a02fa684ed6a2b828ba116874a2191ded88
+  react-native-onesignal: d5497ae1e9b85e4c20836f7fb98df5945736f6b9
+  react-native-webview: 21c396687cb983fadc6ccc0751cc74f554131f3f
+  React-RCTActionSheet: 9f71d7ae3e8fb10e08d162cbf14c621349dbfab3
+  React-RCTAnimation: 981d8c95b0e30918a9832ccac32af83562a27fae
+  React-RCTBlob: 21e73d1020a302a75fed30dbaee9f15287b80baa
+  React-RCTImage: c0bc6ac0926517b6fb7e4c279b04843113e99d1d
+  React-RCTLinking: 1af3f3c59114bed3deec0107c62e7efad0932ee5
+  React-RCTNetwork: 35df9de46e19cda5c56380be1a7759b9b8cb2fcd
+  React-RCTSettings: f580504c2cd1f44e25add10fb9ed3954f67f8ac5
+  React-RCTText: e0f224898b13af9aa036ea7cb3d438daa68c1044
+  React-RCTVibration: 0bea40cd51bd089bd591a8f74c86e91fdf2666c5
+  React-RCTWebSocket: 163873f4cdd5f1058a9483443404fc3801581cb6
+  yoga: c2c050f6ae6e222534760cc82f559b89214b67e2
+
+PODFILE CHECKSUM: c61dcd53d417f283cea6498991712810d15ec3a3
+
+COCOAPODS: 1.7.5

ios/una-tvOS/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -22,6 +22,19 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -36,19 +49,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
 </dict>
 </plist>

ios/una.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:una.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

ios/una.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

ios/una/AppDelegate.h

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : UIResponder <UIApplicationDelegate>
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
 

ios/una/AppDelegate.m

@@ -7,6 +7,7 @@
 
 #import "AppDelegate.h"
 
+#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
@@ -14,15 +15,12 @@
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:@"una"
+                                            initialProperties:nil];
 
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"una"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-  rootView.backgroundColor = [UIColor blackColor];
+  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];
@@ -32,4 +30,13 @@
   return YES;
 }
 
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
 @end

ios/una/Base.lproj/LaunchScreen.xib

@@ -1,12 +1,9 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
-        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
@@ -15,18 +12,31 @@
             <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
-                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="logo.png" translatesAutoresizingMaskIntoConstraints="NO" id="u2j-1h-Mgc">
-                    <rect key="frame" x="115" y="207" width="250" height="67"/>
-                    <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
-                </imageView>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="una" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
             </subviews>
-            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
             <nil key="simulatedStatusBarMetrics"/>
             <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
             <point key="canvasLocation" x="548" y="455"/>
         </view>
     </objects>
-    <resources>
-        <image name="logo.png" width="250" height="67"/>
-    </resources>
 </document>

ios/una/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.1</string>
+	<string>1.2.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1112</string>
+	<string>1200</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -81,6 +81,13 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

metro.config.js

@@ -0,0 +1,17 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+};

native-base-theme/components/Badge.js

@@ -1,36 +1,37 @@
 // @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

@@ -1,12 +1,10 @@
 // @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

@@ -1,158 +1,159 @@
 // @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,
@@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => {
       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.inverseTextColor,
-      fontSize: variables.btnTextSize,
+      fontSize: variables.buttonTextSize,
       paddingHorizontal: 16,
-      backgroundColor: "transparent"
-      // childPosition: 1
+      backgroundColor: 'transparent'
     },
 
-    "NativeBase.Icon": {
+    'NativeBase.Icon': {
       color: variables.inverseTextColor,
       fontSize: 24,
       marginHorizontal: 16,
-      paddingTop: platform === "ios" ? 2 : undefined
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
     },
-    "NativeBase.IconNB": {
+    'NativeBase.IconNB': {
       color: variables.inverseTextColor,
       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

@@ -1,19 +1,19 @@
 // @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,
@@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => {
     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

@@ -1,21 +1,23 @@
 // @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
     },
@@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => {
   };
 
   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
           }
         },
@@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => {
         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

@@ -1,31 +1,31 @@
 // @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

@@ -1,14 +1,15 @@
 // @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

@@ -1,14 +1,12 @@
 // @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

@@ -1,28 +1,24 @@
 // @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

@@ -1,31 +1,32 @@
 // @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,
@@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => {
         },
         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,
@@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => {
           ...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,
@@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => {
         },
         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

@@ -1,78 +1,78 @@
 // @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

@@ -1,85 +1,81 @@
 // @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

@@ -1,12 +1,12 @@
 // @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

@@ -1,12 +1,12 @@
 // @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

@@ -1,8 +1,8 @@
 // @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

@@ -1,65 +1,70 @@
 // @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,
@@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
             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,
@@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
             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,
@@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => {
             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,
@@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => {
           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,
@@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => {
             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,
@@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => {
             marginRight: 0
             // paddingTop: 0
           },
-          "NativeBase.IconNB": {
+          'NativeBase.IconNB': {
             color: variables.toolbarBtnColor,
             fontSize: variables.iconHeaderSize - 2,
             marginTop: 0,
@@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => {
             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,
@@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => {
           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.toolbarHeight + StatusBar.height
+      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

@@ -1,11 +1,11 @@
 // @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

@@ -2,10 +2,10 @@
 
 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

@@ -1,20 +1,20 @@
 // @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,
@@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => {
       fontSize: variables.inputFontSize,
       lineHeight: variables.inputLineHeight
     },
-    ".underline": {
-      ".success": {
+    '.underline': {
+      '.success': {
         borderColor: variables.inputSuccessBorderColor
       },
-      ".error": {
+      '.error': {
         borderColor: variables.inputErrorBorderColor
       },
       paddingLeft: 5,
@@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => {
       },
       borderColor: variables.inputErrorBorderColor
     },
-    ".disabled": {
-      "NativeBase.Icon": {
-        color: "#384850"
+    '.disabled': {
+      'NativeBase.Icon': {
+        color: '#384850'
       },
-      "NativeBase.IconNB": {
-        color: "#384850"
+      'NativeBase.IconNB': {
+        color: '#384850'
       }
     },
 
@@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => {
     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

@@ -1,37 +1,38 @@
 // @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,
@@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => {
         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": {
+        '.secureTextEntry': {
           fontSize: variables.inputFontSize - 4
         },
-        ".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,
@@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => {
         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,
@@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => {
       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,
@@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => {
       },
       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
     },
 
@@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => {
     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

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