diff --git a/.eslintignore b/.eslintignore
index 6942f1a5b..09fc1a1e5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
 vendor/
 Components/Styles/
-dist/
\ No newline at end of file
+dist/
+src/basic/Tabs/
+src/basic/SwipeRow.js
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
index b0ee3ab1c..be814fb57 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,18 @@
 {
+  "extends": ["airbnb", "prettier"],
   "parser": "babel-eslint",
   "rules": {
-    "indent": ["warn", 2]
+    "indent": ["error", 2],
+    "react/require-extension": "off",
+    "import/order": ["error", { "newlines-between": "always" }],
+    "func-names": "off",
+    "import/prefer-default-export": "off",
+    "no-prototype-builtins": "off",
+    "no-nested-ternary": "warn",
+    "no-underscore-dangle": "off",
+    "no-unused-expressions": "off",
+    "react/jsx-filename-extension": "off",
+    "react/prop-types": "off"
   },
   "plugins": ["react", "jsx-a11y", "import", "react-native"]
 }
diff --git a/package-lock.json b/package-lock.json
index 7670bc6d0..80bab1cce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1259,8 +1259,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "asn1": {
       "version": "0.2.4",
@@ -2780,7 +2779,6 @@
       "version": "15.6.3",
       "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
       "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
-      "dev": true,
       "requires": {
         "fbjs": "^0.8.9",
         "loose-envify": "^1.3.1",
@@ -3070,7 +3068,6 @@
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
       "requires": {
         "iconv-lite": "~0.4.13"
       }
@@ -3348,7 +3345,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
       "integrity": "sha512-vDrcCFE3+2ixNT5H83g28bO/uYAwibJxerXPj+E7op4qzBCsAV36QfvdAyVOoNxKAH2Os/e01T/2x++V0LPukA==",
-      "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
       },
@@ -3356,8 +3352,7 @@
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
-          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
-          "dev": true
+          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
         }
       }
     },
@@ -3419,15 +3414,6 @@
         "object-assign": "^4.0.1"
       }
     },
-    "eslint-plugin-prettier": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz",
-      "integrity": "sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA==",
-      "dev": true,
-      "requires": {
-        "prettier-linter-helpers": "^1.0.0"
-      }
-    },
     "eslint-plugin-react": {
       "version": "6.10.3",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz",
@@ -4141,12 +4127,6 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "dev": true
     },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
@@ -4172,7 +4152,6 @@
       "version": "0.8.17",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
       "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "dev": true,
       "requires": {
         "core-js": "^1.0.0",
         "isomorphic-fetch": "^2.1.1",
@@ -4186,8 +4165,7 @@
         "core-js": {
           "version": "1.2.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
-          "dev": true
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
         }
       }
     },
@@ -5420,7 +5398,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -5850,7 +5827,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
       "requires": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
@@ -7905,7 +7881,6 @@
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
       "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "dev": true,
       "requires": {
         "encoding": "^0.1.11",
         "is-stream": "^1.0.1"
@@ -8514,15 +8489,6 @@
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
       "dev": true
     },
-    "prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "requires": {
-        "fast-diff": "^1.1.2"
-      }
-    },
     "pretty-format": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz",
@@ -8586,7 +8552,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -9763,8 +9728,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sane": {
       "version": "2.5.2",
@@ -10170,8 +10134,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
       "version": "1.1.1",
@@ -10948,8 +10911,7 @@
     "ua-parser-js": {
       "version": "0.7.20",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
-      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==",
-      "dev": true
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
     },
     "uglify-js": {
       "version": "3.6.0",
@@ -11242,8 +11204,7 @@
     "whatwg-fetch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
-      "dev": true
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
     },
     "whatwg-mimetype": {
       "version": "2.3.0",
diff --git a/package.json b/package.json
index 9877066b2..6f76906f6 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "blueimp-md5": "^2.5.0",
     "clamp": "^1.0.1",
     "color": "~1.0.3",
+    "create-react-class": "^15.6.3",
+    "eslint-config-prettier": "^6.0.0",
     "fs-extra": "^2.0.0",
     "jest-react-native": "^18.0.0",
     "lodash": "4.17.11",
diff --git a/src/basic/Accordion.js b/src/basic/Accordion.js
index a43174231..02805dce9 100644
--- a/src/basic/Accordion.js
+++ b/src/basic/Accordion.js
@@ -1,4 +1,6 @@
-import React, { Component } from 'react';
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
 import {
   Animated,
   TouchableWithoutFeedback,
@@ -6,9 +8,11 @@ import {
   StyleSheet,
   View
 } from 'react-native';
+
+import variable from '../theme/variables/platform';
+
 import { Text } from './Text';
 import { Icon } from './Icon';
-import variable from '../theme/variables/platform';
 
 class DefaultHeader extends React.Component {
   render() {
@@ -18,6 +22,7 @@ class DefaultHeader extends React.Component {
     return (
       <View
         style={[
+          // eslint-disable-next-line no-use-before-define
           styles.defaultHeader,
           this.props.headerStyle
             ? this.props.headerStyle
@@ -83,7 +88,7 @@ class AccordionSubItem extends React.Component {
     }).start();
   }
   render() {
-    let { fadeAnim } = this.state;
+    const { fadeAnim } = this.state;
     return (
       <Animated.View style={{ ...this.props.style, opacity: fadeAnim }}>
         {this.props.children}
@@ -133,7 +138,13 @@ class AccordionItem extends React.Component {
 }
 
 export class Accordion extends React.Component {
-  state = { selected: undefined };
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: props.expanded
+    };
+  }
+
   setSelected(index) {
     if (this.state.selected === index) {
       this.setState({ selected: undefined });
@@ -142,10 +153,6 @@ export class Accordion extends React.Component {
     }
   }
 
-  componentDidMount() {
-    this.setState({ selected: this.props.expanded });
-  }
-
   render() {
     const variables = this.context.theme
       ? this.context.theme['@@shoutem.theme/themeStyle'].variables
@@ -168,7 +175,7 @@ export class Accordion extends React.Component {
             item={item}
             expanded={this.state.selected === index}
             index={index}
-            setSelected={this.setSelected.bind(this)}
+            setSelected={i => this.setSelected(i)}
             headerStyle={this.props.headerStyle}
             contentStyle={this.props.contentStyle}
             renderHeader={this.props.renderHeader}
diff --git a/src/basic/Actionsheet.js b/src/basic/Actionsheet.js
index e8ac49690..695e2645e 100644
--- a/src/basic/Actionsheet.js
+++ b/src/basic/Actionsheet.js
@@ -1,7 +1,7 @@
+/* eslint-disable radix */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  View,
   Modal,
   Platform,
   ActionSheetIOS,
@@ -11,17 +11,25 @@ import {
   Dimensions
 } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
+import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 import { Text } from './Text';
-import { Button } from './Button';
-import { ViewNB } from './View';
 import { Icon } from './Icon';
 import { Left } from './Left';
 import { Right } from './Right';
 import { Body } from './Body';
 import { ListItem } from './ListItem';
-import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class ActionSheetContainer extends Component {
+  static actionsheetInstance;
+  static show(config, callback) {
+    this.actionsheetInstance._root.showActionSheet(config, callback);
+  }
+  static hide() {
+    this.actionsheetInstance._root.hideActionSheet();
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -29,22 +37,23 @@ class ActionSheetContainer extends Component {
       items: []
     };
   }
-  static actionsheetInstance;
-  static show(config, callback) {
-    this.actionsheetInstance._root.showActionSheet(config, callback);
-  }
-  static hide() {
-    this.actionsheetInstance._root.hideActionSheet();
+
+  componentDidMount() {
+    if (!this.props.autoHide && this.props.duration) {
+      console.warn(`It's not recommended to set autoHide false with duration`);
+    }
   }
+
   showActionSheet(config, callback) {
     if (Platform.OS === 'ios') {
-      if (typeof config.options[0] == 'object') {
-        let options = config.options;
-        let filtered = options.map(item => {
+      if (typeof config.options[0] === 'object') {
+        const options = config.options;
+        const filtered = options.map(item => {
           return item.text;
         });
-        config.options = filtered;
-        ActionSheetIOS.showActionSheetWithOptions(config, callback);
+
+        const filteredConfig = { ...config, options: filtered };
+        ActionSheetIOS.showActionSheetWithOptions(filteredConfig, callback);
       } else {
         ActionSheetIOS.showActionSheetWithOptions(config, callback);
       }
@@ -56,7 +65,7 @@ class ActionSheetContainer extends Component {
         destructiveButtonIndex: config.destructiveButtonIndex,
         cancelButtonIndex: config.cancelButtonIndex,
         modalVisible: true,
-        callback: callback
+        callback
       });
     }
   }
@@ -65,16 +74,11 @@ class ActionSheetContainer extends Component {
     this.setState({ modalVisible: false });
   }
 
-  componentDidMount() {
-    if (!this.props.autoHide && this.props.duration) {
-      console.warn(`It's not recommended to set autoHide false with duration`);
-    }
-  }
   render() {
     return (
       <Modal
         animationType={'fade'}
-        transparent={true}
+        transparent
         visible={this.state.modalVisible}
         onRequestClose={() => {
           this.state.callback(this.state.cancelButtonIndex);
diff --git a/src/basic/Badge.js b/src/basic/Badge.js
index 915fd4cc4..4374c7e7d 100644
--- a/src/basic/Badge.js
+++ b/src/basic/Badge.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
-import variables from '../theme/variables/platform';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Badge extends Component {
diff --git a/src/basic/Base/NativeBaseComponent.js b/src/basic/Base/NativeBaseComponent.js
index a60e589c1..08f1c792b 100644
--- a/src/basic/Base/NativeBaseComponent.js
+++ b/src/basic/Base/NativeBaseComponent.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export default class NativeBaseComponent extends Component {
@@ -8,8 +8,8 @@ export default class NativeBaseComponent extends Component {
   };
 
   static propTypes = {
-    theme: PropTypes.object,
-    foregroundColor: PropTypes.string
+    // eslint-disable-next-line react/forbid-prop-types
+    theme: PropTypes.object
   };
 
   static childContextTypes = {
diff --git a/src/basic/Body.js b/src/basic/Body.js
index cd28aae7b..abbea7430 100644
--- a/src/basic/Body.js
+++ b/src/basic/Body.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Body extends Component {
diff --git a/src/basic/Button.js b/src/basic/Button.js
index 71ef1a1f1..004af7921 100644
--- a/src/basic/Button.js
+++ b/src/basic/Button.js
@@ -1,3 +1,4 @@
+/* eslint-disable new-cap */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -8,12 +9,13 @@ import {
   StyleSheet
 } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
-import variable from './../theme/variables/platform';
-import { Text } from './Text';
-import computeProps from '../utils/computeProps';
 
+import variable from '../theme/variables/platform';
+import computeProps from '../utils/computeProps';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
+import { Text } from './Text';
+
 class Button extends Component {
   static contextTypes = {
     theme: PropTypes.object
@@ -33,8 +35,6 @@ class Button extends Component {
     };
   }
 
-  _root: React$Element<TouchableOpacity | TouchableNativeFeedback>;
-
   prepareRootProps() {
     const defaultProps = {
       style: this.getInitialStyle().borderedBtn
@@ -72,7 +72,7 @@ class Button extends Component {
       Platform.OS === 'ios' ||
       Platform.OS === 'web' ||
       variables.androidRipple === false ||
-      Platform['Version'] < 21
+      Platform.Version < 21
     ) {
       return (
         <TouchableOpacity
@@ -87,65 +87,64 @@ class Button extends Component {
           {children}
         </TouchableOpacity>
       );
-    } else {
-      if (this.props.rounded) {
-        let buttonStyle = { ...this.prepareRootProps().style };
-        let buttonFlex =
-          this.props.full || this.props.block
-            ? variable.buttonDefaultFlex
-            : buttonStyle.flex;
-        return (
-          <View
-            style={[
-              { maxHeight: buttonStyle.height },
-              buttonStyle,
-              { paddingTop: undefined, paddingBottom: undefined }
-            ]}
-          >
-            <TouchableNativeFeedback
-              ref={c => (this._root = c)}
-              background={TouchableNativeFeedback.Ripple(
-                this.props.androidRippleColor || variables.androidRippleColor,
-                true
-              )}
-              {...this.prepareRootProps()}
-            >
-              <View
-                style={[
-                  styles.childContainer,
-                  {
-                    paddingTop: buttonStyle.paddingTop,
-                    paddingBottom: buttonStyle.paddingBottom,
-                    height: buttonStyle.height,
-                    flexGrow: buttonFlex
-                  }
-                ]}
-              >
-                {children}
-              </View>
-            </TouchableNativeFeedback>
-          </View>
-        );
-      } else {
-        return (
+    }
+    if (this.props.rounded) {
+      const buttonStyle = { ...this.prepareRootProps().style };
+      const buttonFlex =
+        this.props.full || this.props.block
+          ? variable.buttonDefaultFlex
+          : buttonStyle.flex;
+      return (
+        <View
+          style={[
+            { maxHeight: buttonStyle.height },
+            buttonStyle,
+            { paddingTop: undefined, paddingBottom: undefined }
+          ]}
+        >
           <TouchableNativeFeedback
             ref={c => (this._root = c)}
-            onPress={this.props.onPress}
-            background={
-              this.props.transparent
-                ? TouchableNativeFeedback.Ripple('transparent')
-                : TouchableNativeFeedback.Ripple(
-                    variables.androidRippleColor,
-                    false
-                  )
-            }
+            background={TouchableNativeFeedback.Ripple(
+              this.props.androidRippleColor || variables.androidRippleColor,
+              true
+            )}
             {...this.prepareRootProps()}
           >
-            <View {...this.prepareRootProps()}>{children}</View>
+            <View
+              style={[
+                // eslint-disable-next-line no-use-before-define
+                styles.childContainer,
+                {
+                  paddingTop: buttonStyle.paddingTop,
+                  paddingBottom: buttonStyle.paddingBottom,
+                  height: buttonStyle.height,
+                  flexGrow: buttonFlex
+                }
+              ]}
+            >
+              {children}
+            </View>
           </TouchableNativeFeedback>
-        );
-      }
+        </View>
+      );
     }
+    return (
+      <TouchableNativeFeedback
+        ref={c => (this._root = c)}
+        onPress={this.props.onPress}
+        background={
+          this.props.transparent
+            ? TouchableNativeFeedback.Ripple('transparent')
+            : TouchableNativeFeedback.Ripple(
+                variables.androidRippleColor,
+                false
+              )
+        }
+        {...this.prepareRootProps()}
+      >
+        <View {...this.prepareRootProps()}>{children}</View>
+      </TouchableNativeFeedback>
+    );
   }
 }
 
diff --git a/src/basic/Card.js b/src/basic/Card.js
index 7c5a4b438..5ce6b95e4 100644
--- a/src/basic/Card.js
+++ b/src/basic/Card.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ListView, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Card extends Component {
@@ -36,6 +36,7 @@ Card.propTypes = {
     PropTypes.number,
     PropTypes.array
   ]),
+  // eslint-disable-next-line react/forbid-prop-types
   dataArray: PropTypes.array,
   renderRow: PropTypes.func
 };
diff --git a/src/basic/CardItem.js b/src/basic/CardItem.js
index ce0755bd5..d1ef88b08 100644
--- a/src/basic/CardItem.js
+++ b/src/basic/CardItem.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class CardItem extends Component {
@@ -17,13 +17,12 @@ class CardItem extends Component {
           {this.props.children}
         </TouchableOpacity>
       );
-    } else {
-      return (
-        <View ref={c => (this._root = c)} {...this.props}>
-          {this.props.children}
-        </View>
-      );
     }
+    return (
+      <View ref={c => (this._root = c)} {...this.props}>
+        {this.props.children}
+      </View>
+    );
   }
 }
 
diff --git a/src/basic/Checkbox.js b/src/basic/Checkbox.js
index a7e9e0c89..38efa398b 100644
--- a/src/basic/Checkbox.js
+++ b/src/basic/Checkbox.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { TouchableOpacity, Platform } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import IconNB from 'react-native-vector-icons/Ionicons';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 import variable from '../theme/variables/platform';
-import _ from 'lodash';
 import computeProps from '../utils/computeProps';
 
 class CheckBox extends Component {
diff --git a/src/basic/Container.js b/src/basic/Container.js
index bf9bab2f3..c4c363da8 100644
--- a/src/basic/Container.js
+++ b/src/basic/Container.js
@@ -1,13 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
-import { ViewPropTypes } from '../utils';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
+import { ViewPropTypes } from '../utils';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
-import { ToastContainer as Toast } from './ToastContainer';
-import { ActionSheetContainer as ActionSheet } from './Actionsheet';
-import { Text } from './Text';
 
 class Container extends Component {
   render() {
diff --git a/src/basic/Content.js b/src/basic/Content.js
index 85d5601ea..e775de4d8 100644
--- a/src/basic/Content.js
+++ b/src/basic/Content.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import variable from '../theme/variables/platform';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
@@ -16,7 +17,7 @@ class Content extends Component {
     };
   }
   layoutChange(val) {
-    let maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
+    const maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
     if (val.width >= maxComp) this.setState({ orientation: 'landscape' });
     else {
       this.setState({ orientation: 'portrait' });
@@ -163,7 +164,6 @@ Content.propTypes = {
   ]),
   padder: PropTypes.bool,
   disableKBDismissScroll: PropTypes.bool,
-  enableResetScrollToCoords: PropTypes.bool,
   keyboardShouldPersistTaps: PropTypes.string
 };
 
diff --git a/src/basic/DatePicker.js b/src/basic/DatePicker.js
index 1dafef192..c08ba3f75 100644
--- a/src/basic/DatePicker.js
+++ b/src/basic/DatePicker.js
@@ -6,9 +6,11 @@ import {
   DatePickerIOS,
   DatePickerAndroid
 } from 'react-native';
-import { Text } from './Text';
+
 import variable from '../theme/variables/platform';
 
+import { Text } from './Text';
+
 export class DatePicker extends React.Component {
   static defaultProps = {
     disabled: false
@@ -32,13 +34,13 @@ export class DatePicker extends React.Component {
     }
   }
 
-  showDatePicker() {
+  showDatePicker = () => {
     if (Platform.OS === 'android') {
       this.openAndroidDatePicker();
     } else {
       this.setState({ modalVisible: true });
     }
-  }
+  };
 
   async openAndroidDatePicker() {
     try {
@@ -52,7 +54,7 @@ export class DatePicker extends React.Component {
       });
       const { action, year, month, day } = newDate;
       if (action === 'dateSetAction') {
-        let selectedDate = new Date(year, month, day);
+        const selectedDate = new Date(year, month, day);
         this.setState({ chosenDate: selectedDate });
         this.props.onDateChange(selectedDate);
       }
@@ -76,8 +78,8 @@ export class DatePicker extends React.Component {
       <View>
         <View>
           <Text
-            onPress={
-              !this.props.disabled ? this.showDatePicker.bind(this) : undefined
+            onPress={() =>
+              !this.props.disabled ? this.showDatePicker() : undefined
             }
             style={[
               { padding: 10, color: variables.datePickerTextColor },
@@ -96,7 +98,7 @@ export class DatePicker extends React.Component {
             <Modal
               supportedOrientations={['portrait', 'landscape']}
               animationType={this.props.animationType}
-              transparent={this.props.modalTransparent} //from api
+              transparent={this.props.modalTransparent} // from api
               visible={this.state.modalVisible}
               onRequestClose={() => {}}
             >
@@ -110,7 +112,7 @@ export class DatePicker extends React.Component {
                     ? this.state.chosenDate
                     : this.state.defaultDate
                 }
-                onDateChange={this.setDate.bind(this)}
+                onDateChange={date => this.setDate(date)}
                 minimumDate={this.props.minimumDate}
                 maximumDate={this.props.maximumDate}
                 mode="date"
diff --git a/src/basic/DeckSwiper.js b/src/basic/DeckSwiper.js
index e02cbbad8..375e38d4a 100644
--- a/src/basic/DeckSwiper.js
+++ b/src/basic/DeckSwiper.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { View, Animated, PanResponder, ViewPropTypes } from 'react-native';
 import clamp from 'clamp';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 const SWIPE_THRESHOLD = 120;
@@ -26,129 +27,13 @@ class DeckSwiper extends Component {
     };
   }
 
-  componentWillReceiveProps({ dataSource }) {
-    if (dataSource.length !== this.props.dataSource.length) {
-      if (dataSource.length <= 1) {
-        this.setState({
-          ...this.state,
-          selectedItem: dataSource[0],
-          selectedItem2: undefined,
-          disabled: dataSource.length === 0,
-          lastCard: dataSource.length === 1
-        });
-        return;
-      }
-
-      const visibleIndex = dataSource.indexOf(this.state.selectedItem);
-      const currentIndex = visibleIndex < 0 ? visibleIndex + 1 : visibleIndex;
-      const nextIndex =
-        currentIndex + 1 === dataSource.length ? 0 : currentIndex + 1;
-
-      this.setState({
-        selectedItem: dataSource[currentIndex],
-        selectedItem2: dataSource[nextIndex]
-      });
-    }
-  }
-
-  getInitialStyle() {
-    return {
-      topCard: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0
-      }
-    };
-  }
-
-  findNextIndexes(currentIndex) {
-    const newIdx = currentIndex + 1;
-    const newIdx2 = currentIndex + 2;
-
-    if (
-      newIdx2 > this.props.dataSource.length - 1 &&
-      newIdx === this.props.dataSource.length - 1
-    ) {
-      return [newIdx, 0];
-    } else if (newIdx > this.props.dataSource.length - 1) {
-      return [0, 1];
-    }
-    return [newIdx, newIdx2];
-  }
-
-  selectNext() {
-    const dataSource = this.props.dataSource;
-    const currentIndex = dataSource.indexOf(this.state.selectedItem);
-
-    // if not looping, check for these conditionals and if true return from selectNext()
-    if (!this.state.looping) {
-      // reached end -> only display static renderEmpty() -> no swiping
-      if (currentIndex === dataSource.length - 1) {
-        return this.setState({
-          disabled: true
-        });
-      } else if (currentIndex === dataSource.length - 2) {
-        // show last card with renderEmpty() component behind it
-        return setTimeout(() => {
-          this.setState({
-            selectedItem: dataSource[currentIndex + 1]
-          });
-          setTimeout(() => {
-            this.setState({
-              lastCard: true
-            });
-          }, 350);
-        }, 50);
-      }
-    }
-
-    const nextIndexes = this.findNextIndexes(currentIndex);
-    setTimeout(() => {
-      this.setState({
-        selectedItem: this.props.dataSource[nextIndexes[0]]
-      });
-      setTimeout(() => {
-        this.setState({
-          selectedItem2: this.props.dataSource[nextIndexes[1]]
-        });
-      }, 350);
-    }, 50);
-  }
-
-  swipeRight() {
-    if (this.props.onSwiping) this.props.onSwiping('right');
-    setTimeout(() => {
-      Animated.timing(this.state.fadeAnim, { toValue: 1 }).start();
-      Animated.spring(this.state.enter, { toValue: 1, friction: 7 }).start();
-      this.selectNext();
-      Animated.decay(this.state.pan, {
-        velocity: { x: 8, y: 1 },
-        deceleration: 0.98
-      }).start(this._resetState.bind(this));
-    }, 300);
-  }
-
-  swipeLeft() {
-    if (this.props.onSwiping) this.props.onSwiping('left');
-    setTimeout(() => {
-      Animated.timing(this.state.fadeAnim, { toValue: 1 }).start();
-      Animated.spring(this.state.enter, { toValue: 1, friction: 7 }).start();
-      this.selectNext();
-      Animated.decay(this.state.pan, {
-        velocity: { x: -8, y: 1 },
-        deceleration: 0.98
-      }).start(this._resetState.bind(this));
-    }, 300);
-  }
-
   componentWillMount() {
     this._panResponder = PanResponder.create({
       onMoveShouldSetResponderCapture: () => true,
       onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
         Math.abs(gestureState.dx) > 5,
 
-      onPanResponderGrant: (e, gestureState) => {
+      onPanResponderGrant: () => {
         this.state.pan.setOffset({
           x: this.state.pan.x._value,
           y: this.state.pan.y._value
@@ -165,7 +50,6 @@ class DeckSwiper extends Component {
             this.props.onSwiping('left', gestureState.dx);
         }
         let val = Math.abs(gestureState.dx * 0.0013);
-        const opa = Math.abs(gestureState.dx * 0.0022);
         if (val > 0.2) {
           val = 0.2;
         }
@@ -214,19 +98,44 @@ class DeckSwiper extends Component {
     });
   }
 
-  _resetState() {
-    this.state.pan.setValue({ x: 0, y: 0 });
-    this.state.enter.setValue(0.8);
-    this.state.fadeAnim.setValue(0.8);
-    this.setState({
-      card1Top: !this.state.card1Top,
-      card2Top: !this.state.card2Top
-    });
-    if (this.props.onSwiping) this.props.onSwiping(null);
+  componentWillReceiveProps({ dataSource }) {
+    if (dataSource.length !== this.props.dataSource.length) {
+      if (dataSource.length <= 1) {
+        this.setState({
+          ...this.state,
+          selectedItem: dataSource[0],
+          selectedItem2: undefined,
+          disabled: dataSource.length === 0,
+          lastCard: dataSource.length === 1
+        });
+        return;
+      }
+
+      const visibleIndex = dataSource.indexOf(this.state.selectedItem);
+      const currentIndex = visibleIndex < 0 ? visibleIndex + 1 : visibleIndex;
+      const nextIndex =
+        currentIndex + 1 === dataSource.length ? 0 : currentIndex + 1;
+
+      this.setState({
+        selectedItem: dataSource[currentIndex],
+        selectedItem2: dataSource[nextIndex]
+      });
+    }
   }
 
+  getInitialStyle = () => {
+    return {
+      topCard: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0
+      }
+    };
+  };
+
   getCardStyles() {
-    const { pan, pan2, enter } = this.state;
+    const { pan, enter } = this.state;
 
     const [translateX, translateY] = [pan.x, pan.y];
     // let [translateX, translateY] = [pan2.x, pan2.y];
@@ -251,6 +160,99 @@ class DeckSwiper extends Component {
     return [animatedCardStyles, animatedCardStyles2];
   }
 
+  _resetState() {
+    this.state.pan.setValue({ x: 0, y: 0 });
+    this.state.enter.setValue(0.8);
+    this.state.fadeAnim.setValue(0.8);
+    this.setState({
+      card1Top: !this.state.card1Top,
+      card2Top: !this.state.card2Top
+    });
+    if (this.props.onSwiping) this.props.onSwiping(null);
+  }
+
+  swipeRight() {
+    if (this.props.onSwiping) this.props.onSwiping('right');
+    setTimeout(() => {
+      Animated.timing(this.state.fadeAnim, { toValue: 1 }).start();
+      Animated.spring(this.state.enter, { toValue: 1, friction: 7 }).start();
+      this.selectNext();
+      Animated.decay(this.state.pan, {
+        velocity: { x: 8, y: 1 },
+        deceleration: 0.98
+      }).start(this._resetState.bind(this));
+    }, 300);
+  }
+
+  swipeLeft() {
+    if (this.props.onSwiping) this.props.onSwiping('left');
+    setTimeout(() => {
+      Animated.timing(this.state.fadeAnim, { toValue: 1 }).start();
+      Animated.spring(this.state.enter, { toValue: 1, friction: 7 }).start();
+      this.selectNext();
+      Animated.decay(this.state.pan, {
+        velocity: { x: -8, y: 1 },
+        deceleration: 0.98
+      }).start(this._resetState.bind(this));
+    }, 300);
+  }
+
+  selectNext() {
+    const dataSource = this.props.dataSource;
+    const currentIndex = dataSource.indexOf(this.state.selectedItem);
+
+    // if not looping, check for these conditionals and if true return from selectNext()
+    if (!this.state.looping) {
+      // reached end -> only display static renderEmpty() -> no swiping
+      if (currentIndex === dataSource.length - 1) {
+        return this.setState({
+          disabled: true
+        });
+      } else if (currentIndex === dataSource.length - 2) {
+        // show last card with renderEmpty() component behind it
+        return setTimeout(() => {
+          this.setState({
+            selectedItem: dataSource[currentIndex + 1]
+          });
+          setTimeout(() => {
+            this.setState({
+              lastCard: true
+            });
+          }, 350);
+        }, 50);
+      }
+    }
+
+    const nextIndexes = this.findNextIndexes(currentIndex);
+    setTimeout(() => {
+      this.setState({
+        selectedItem: this.props.dataSource[nextIndexes[0]]
+      });
+      setTimeout(() => {
+        this.setState({
+          selectedItem2: this.props.dataSource[nextIndexes[1]]
+        });
+      }, 350);
+    }, 50);
+
+    return null;
+  }
+
+  findNextIndexes(currentIndex) {
+    const newIdx = currentIndex + 1;
+    const newIdx2 = currentIndex + 2;
+
+    if (
+      newIdx2 > this.props.dataSource.length - 1 &&
+      newIdx === this.props.dataSource.length - 1
+    ) {
+      return [newIdx, 0];
+    } else if (newIdx > this.props.dataSource.length - 1) {
+      return [0, 1];
+    }
+    return [newIdx, newIdx2];
+  }
+
   render() {
     if (this.state.disabled) {
       // disable swiping and renderEmpty
@@ -331,6 +333,7 @@ DeckSwiper.propTypes = {
     PropTypes.number,
     PropTypes.array
   ]),
+  // eslint-disable-next-line react/forbid-prop-types
   dataSource: PropTypes.array
 };
 
diff --git a/src/basic/Drawer/index.js b/src/basic/Drawer/index.js
index 8d49d5501..f1b22c1c0 100644
--- a/src/basic/Drawer/index.js
+++ b/src/basic/Drawer/index.js
@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
 import RNDrawer from 'react-native-drawer';
-import PropTypes from 'prop-types';
 
 export default class Drawer extends Component {
-  constructor(props) {
-    super(props);
-  }
   render() {
     return <RNDrawer ref={c => (this._root = c)} {...this.props} />;
   }
diff --git a/src/basic/Fab.js b/src/basic/Fab.js
index e842ad63f..fb4339674 100644
--- a/src/basic/Fab.js
+++ b/src/basic/Fab.js
@@ -1,41 +1,24 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import computeProps from '../utils/computeProps';
-// import Button from './../Button';
 import {
   Platform,
   Animated,
-  Dimensions,
   TouchableOpacity,
   TouchableNativeFeedback,
   View,
   StyleSheet
 } from 'react-native';
-import { Icon } from './Icon';
-import { IconNB } from './IconNB';
-import { Button } from './Button';
-import variables from './../theme/variables/platform';
 import _ from 'lodash';
-import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 import { connectStyle } from 'native-base-shoutem-theme';
 
-const { height, width } = Dimensions.get('window');
+import variables from '../theme/variables/platform';
+import computeProps from '../utils/computeProps';
+import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
+import { Button } from './Button';
 
 const AnimatedFab = Animated.createAnimatedComponent(Button);
 
 class Fab extends Component {
-  props: Animated.props & {
-    pos?: string,
-    top?: number,
-    left?: number,
-    right?: number,
-    bottom?: number
-  };
-
-  state: {
-    buttons: void | React$Element<Button>,
-    active: boolean
-  };
   constructor(props) {
     super(props);
     this.containerHeight = new Animated.Value(56);
@@ -47,7 +30,133 @@ class Fab extends Component {
     };
   }
 
-  fabTopValue(pos) {
+  componentDidMount() {
+    const childrenArray = React.Children.toArray(this.props.children);
+    const icon = _.remove(childrenArray, item => {
+      if (item.type.displayName === 'Styled(Button)') {
+        return true;
+      }
+      return null;
+    });
+    // eslint-disable-next-line react/no-did-mount-set-state
+    this.setState({
+      buttons: icon.length
+    });
+    this.activeTimer = setTimeout(() => {
+      this.setState({
+        active: this.props.active
+      });
+    }, 0);
+  }
+
+  componentWillUnmount() {
+    if (this.activeTimer) {
+      clearTimeout(this.activeTimer);
+    }
+  }
+
+  getOtherButtonStyle(child, i) {
+    const type = {
+      top: this.props.direction
+        ? this.fabOtherBtns(this.props.direction, i).top
+        : undefined,
+      left: this.props.direction
+        ? this.fabOtherBtns(this.props.direction, i).left
+        : 8,
+      right: this.props.direction
+        ? this.fabOtherBtns(this.props.direction, i).right
+        : 0,
+      bottom: this.props.direction
+        ? this.fabOtherBtns(this.props.direction, i).bottom
+        : this.props.active === false
+        ? Platform.OS === 'ios'
+          ? 8
+          : 8
+        : i * 50 + 50
+    };
+
+    return _.merge(
+      this.getInitialStyle().buttonStyle,
+      StyleSheet.flatten(child.props.style),
+      type
+    );
+  }
+
+  getContainerStyle() {
+    return _.merge(this.getInitialStyle().container, this.props.containerStyle);
+  }
+
+  getInitialStyle(iconStyle) {
+    return {
+      fab: {
+        height: 56,
+        width: 56,
+        borderRadius: 28,
+        elevation: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.4,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowRadius: 2,
+        position: 'absolute',
+        bottom: 0,
+        backgroundColor: 'blue'
+      },
+      container: {
+        position: 'absolute',
+        top: this.props.position
+          ? this.fabTopValue(this.props.position).top
+          : undefined,
+        bottom: this.props.position
+          ? this.fabTopValue(this.props.position).bottom
+          : 20,
+        right: this.props.position
+          ? this.fabTopValue(this.props.position).right
+          : 20,
+        left: this.props.position
+          ? this.fabTopValue(this.props.position).left
+          : undefined,
+        width: 56,
+        height: this.containerHeight,
+        flexDirection: this.props.direction
+          ? this.props.direction === 'left' || this.props.direction === 'right'
+            ? 'row'
+            : 'column'
+          : 'column',
+        alignItems: 'center'
+      },
+      iconStyle: {
+        color: '#fff',
+        fontSize: 24,
+        lineHeight: Platform.OS === 'ios' ? 27 : undefined,
+        ...iconStyle
+      },
+      buttonStyle: {
+        position: 'absolute',
+        height: 40,
+        width: 40,
+        left: 7,
+        borderRadius: 20,
+        transform: this.state.active
+          ? [{ scale: new Animated.Value(1) }]
+          : [{ scale: this.buttonScale }],
+        marginBottom: 10,
+        backgroundColor: 'blue'
+      }
+    };
+  }
+
+  prepareButtonProps = child => {
+    const inp = _.clone(child.props);
+    delete inp.style;
+
+    const defaultProps = {};
+
+    return computeProps(inp, defaultProps);
+  };
+
+  fabTopValue = pos => {
     if (pos === 'topLeft') {
       return {
         top: 20,
@@ -77,7 +186,8 @@ class Fab extends Component {
         right: 20
       };
     }
-  }
+    return null;
+  };
 
   fabOtherBtns(direction, i) {
     if (direction === 'up') {
@@ -129,182 +239,19 @@ class Fab extends Component {
         right: 0
       };
     }
-  }
-
-  getInitialStyle(iconStyle) {
-    return {
-      fab: {
-        height: 56,
-        width: 56,
-        borderRadius: 28,
-        elevation: 4,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.4,
-        justifyContent: 'center',
-        alignItems: 'center',
-        shadowRadius: 2,
-        position: 'absolute',
-        bottom: 0,
-        backgroundColor: 'blue'
-      },
-      container: {
-        position: 'absolute',
-        top: this.props.position
-          ? this.fabTopValue(this.props.position).top
-          : undefined,
-        bottom: this.props.position
-          ? this.fabTopValue(this.props.position).bottom
-          : 20,
-        right: this.props.position
-          ? this.fabTopValue(this.props.position).right
-          : 20,
-        left: this.props.position
-          ? this.fabTopValue(this.props.position).left
-          : undefined,
-        width: 56,
-        height: this.containerHeight,
-        flexDirection: this.props.direction
-          ? this.props.direction === 'left' || this.props.direction === 'right'
-            ? 'row'
-            : 'column'
-          : 'column',
-        alignItems: 'center'
-      },
-      iconStyle: {
-        color: '#fff',
-        fontSize: 24,
-        lineHeight: Platform.OS == 'ios' ? 27 : undefined,
-        ...iconStyle
-      },
-      buttonStyle: {
-        position: 'absolute',
-        height: 40,
-        width: 40,
-        left: 7,
-        borderRadius: 20,
-        transform: this.state.active
-          ? [{ scale: new Animated.Value(1) }]
-          : [{ scale: this.buttonScale }],
-        marginBottom: 10,
-        backgroundColor: 'blue'
-      }
-    };
-  }
-
-  getContainerStyle() {
-    return _.merge(this.getInitialStyle().container, this.props.containerStyle);
+    return null;
   }
 
   prepareFabProps() {
-    var defaultProps = {
+    const defaultProps = {
       style: this.getInitialStyle().fab
     };
-    var incomingProps = _.clone(this.props);
+    const incomingProps = _.clone(this.props);
     delete incomingProps.onPress;
 
     return computeProps(incomingProps, defaultProps);
   }
 
-  getOtherButtonStyle(child, i) {
-    const type = {
-      top: this.props.direction
-        ? this.fabOtherBtns(this.props.direction, i).top
-        : undefined,
-      left: this.props.direction
-        ? this.fabOtherBtns(this.props.direction, i).left
-        : 8,
-      right: this.props.direction
-        ? this.fabOtherBtns(this.props.direction, i).right
-        : 0,
-      bottom: this.props.direction
-        ? this.fabOtherBtns(this.props.direction, i).bottom
-        : this.props.active === false
-        ? Platform.OS === 'ios'
-          ? 8
-          : 8
-        : i * 50 + 50
-    };
-
-    return _.merge(
-      this.getInitialStyle().buttonStyle,
-      StyleSheet.flatten(child.props.style),
-      type
-    );
-  }
-  prepareButtonProps(child) {
-    var inp = _.clone(child.props);
-    delete inp.style;
-
-    var defaultProps = {};
-
-    return computeProps(inp, defaultProps);
-  }
-
-  componentDidMount() {
-    let childrenArray = React.Children.toArray(this.props.children);
-    let icon = _.remove(childrenArray, item => {
-      if (item.type.displayName === 'Styled(Button)') {
-        return true;
-      }
-    });
-    this.setState({
-      buttons: icon.length
-    });
-    this.activeTimer = setTimeout(() => {
-      this.setState({
-        active: this.props.active
-      });
-    }, 0);
-  }
-
-  componentWillUnmount() {
-    if (this.activeTimer) {
-      clearTimeout(this.activeTimer);
-    }
-  }
-
-  renderFab() {
-    let childrenArray = React.Children.toArray(this.props.children);
-    let icon = _.remove(childrenArray, item => {
-      if (item.type.displayName === 'Styled(Button)') {
-        return true;
-      }
-    });
-    // this.setState({
-    //   buttons: icon.length
-    // });
-    return React.cloneElement(childrenArray[0], {
-      style: this.getInitialStyle(childrenArray[0].props.style).iconStyle
-    });
-  }
-
-  renderButtons() {
-    let childrenArray = React.Children.toArray(this.props.children);
-    // let icon = _.remove(childrenArray, item => {
-    // 	if (item.type == Icon) {
-    // 		return true;
-    // 	}
-    // });
-
-    let newChildren = [];
-
-    {
-      childrenArray.slice(1).map((child, i) => {
-        newChildren.push(
-          <AnimatedFab
-            style={this.getOtherButtonStyle(child, i)}
-            {...this.prepareButtonProps(child, i)}
-            fabButton={true}
-            key={i}
-          >
-            {child.props.children}
-          </AnimatedFab>
-        );
-      });
-    }
-    return newChildren;
-  }
   upAnimate() {
     if (!this.props.active) {
       Animated.spring(this.containerHeight, {
@@ -422,16 +369,16 @@ class Fab extends Component {
   }
   _animate() {
     const {
-      props: { direction, position }
+      props: { direction }
     } = this;
-    if (this.props.direction) {
-      if (this.props.direction === 'up') {
+    if (direction) {
+      if (direction === 'up') {
         this.upAnimate();
-      } else if (this.props.direction === 'left') {
+      } else if (direction === 'left') {
         this.leftAnimate();
-      } else if (this.props.direction === 'right') {
+      } else if (direction === 'right') {
         this.rightAnimate();
-      } else if (this.props.direction === 'down') {
+      } else if (direction === 'down') {
         this.downAnimate();
       }
     } else {
@@ -451,17 +398,45 @@ class Fab extends Component {
     }
   }
 
-  render() {
-    const {
-      props: { active }
-    } = this;
+  renderButtons() {
+    const childrenArray = React.Children.toArray(this.props.children);
 
+    const newChildren = [];
+    childrenArray.slice(1).map((child, i) =>
+      newChildren.push(
+        <AnimatedFab
+          style={this.getOtherButtonStyle(child, i)}
+          {...this.prepareButtonProps(child, i)}
+          fabButton
+          key={i}
+        >
+          {child.props.children}
+        </AnimatedFab>
+      )
+    );
+    return newChildren;
+  }
+
+  renderFab() {
+    const childrenArray = React.Children.toArray(this.props.children);
+    _.remove(childrenArray, item => {
+      if (item.type.displayName === 'Styled(Button)') {
+        return true;
+      }
+      return null;
+    });
+    return React.cloneElement(childrenArray[0], {
+      style: this.getInitialStyle(childrenArray[0].props.style).iconStyle
+    });
+  }
+
+  render() {
     return (
       <Animated.View style={this.getContainerStyle()}>
         {this.renderButtons()}
         {Platform.OS === 'ios' ||
         variables.androidRipple === false ||
-        Platform['Version'] <= 21 ? (
+        Platform.Version <= 21 ? (
           <TouchableOpacity
             onPress={() => this.fabOnPress()}
             {...this.prepareFabProps()}
@@ -472,6 +447,7 @@ class Fab extends Component {
         ) : (
           <TouchableNativeFeedback
             onPress={() => this.fabOnPress()}
+            // eslint-disable-next-line new-cap
             background={TouchableNativeFeedback.Ripple(
               variables.androidRippleColor,
               false
diff --git a/src/basic/Footer.js b/src/basic/Footer.js
index afe059322..d660f8a6f 100644
--- a/src/basic/Footer.js
+++ b/src/basic/Footer.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-import _ from 'lodash';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import variable from '../theme/variables/platform';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
@@ -18,7 +18,7 @@ class Footer extends Component {
     };
   }
   layoutChange(val) {
-    let maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
+    const maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
     if (val.width >= maxComp) this.setState({ orientation: 'landscape' });
     else {
       this.setState({ orientation: 'portrait' });
@@ -27,14 +27,14 @@ class Footer extends Component {
 
   calculateHeight(mode, inSet) {
     let inset = null;
-    if (inSet != undefined) {
+    if (inSet !== undefined) {
       inset = inSet;
     } else {
       inset = variable.Inset;
     }
     const InsetValues = mode === 'portrait' ? inset.portrait : inset.landscape;
     let oldHeight = null;
-    if (this.props.style.height != undefined) {
+    if (this.props.style.height !== undefined) {
       oldHeight = this.props.style.height;
     } else if (this.props.style[1]) {
       oldHeight = this.props.style[1].height
@@ -43,13 +43,13 @@ class Footer extends Component {
     } else {
       oldHeight = this.props.style[0].height;
     }
-    let height = oldHeight + InsetValues.bottomInset;
+    const height = oldHeight + InsetValues.bottomInset;
     return height;
   }
 
   calculatePadder(mode, inSet) {
     let inset = null;
-    if (inSet != undefined) {
+    if (inSet !== undefined) {
       inset = inSet;
     } else {
       inset = variable.Inset;
diff --git a/src/basic/FooterTab.js b/src/basic/FooterTab.js
index 644351cec..7934cb2df 100644
--- a/src/basic/FooterTab.js
+++ b/src/basic/FooterTab.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class FooterTab extends Component {
diff --git a/src/basic/Form.js b/src/basic/Form.js
index dc29bac53..96ce0511c 100644
--- a/src/basic/Form.js
+++ b/src/basic/Form.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Form extends Component {
diff --git a/src/basic/Gravatar.js b/src/basic/Gravatar.js
index 114ea8083..259830d58 100644
--- a/src/basic/Gravatar.js
+++ b/src/basic/Gravatar.js
@@ -4,10 +4,12 @@ import { Image } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
 import _ from 'lodash';
 import md5 from 'blueimp-md5';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
-import NativeBaseComponent from './Base/NativeBaseComponent';
 import computeProps from '../utils/computeProps';
 
+import NativeBaseComponent from './Base/NativeBaseComponent';
+
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/';
 
 class Gravatar extends NativeBaseComponent {
diff --git a/src/basic/H1.js b/src/basic/H1.js
index 09719b34b..2bb573b4f 100644
--- a/src/basic/H1.js
+++ b/src/basic/H1.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class H1 extends Component {
diff --git a/src/basic/H2.js b/src/basic/H2.js
index 68a9773f1..04742315e 100644
--- a/src/basic/H2.js
+++ b/src/basic/H2.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class H2 extends Component {
diff --git a/src/basic/H3.js b/src/basic/H3.js
index 4b89dd9ed..40a963266 100644
--- a/src/basic/H3.js
+++ b/src/basic/H3.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class H3 extends Component {
diff --git a/src/basic/Header.js b/src/basic/Header.js
index 2bc4bd03c..d9d6923a2 100644
--- a/src/basic/Header.js
+++ b/src/basic/Header.js
@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, StatusBar, ViewPropTypes, StyleSheet } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 import variable from '../theme/variables/platform';
-import _ from 'lodash';
+
 class Header extends Component {
   static contextTypes = {
     theme: PropTypes.object
@@ -16,7 +17,7 @@ class Header extends Component {
     };
   }
   layoutChange(val) {
-    let maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
+    const maxComp = Math.max(variable.deviceWidth, variable.deviceHeight);
     if (val.width >= maxComp) this.setState({ orientation: 'landscape' });
     else {
       this.setState({ orientation: 'portrait' });
@@ -24,14 +25,14 @@ class Header extends Component {
   }
   calculateHeight(mode, inSet) {
     let inset = null;
-    if (inSet != undefined) {
+    if (inSet !== undefined) {
       inset = inSet;
     } else {
       inset = variable.Inset;
     }
     const InsetValues = mode === 'portrait' ? inset.portrait : inset.landscape;
     let oldHeight = null;
-    if (this.props.style.height != undefined) {
+    if (this.props.style.height !== undefined) {
       oldHeight = this.props.style.height;
     } else if (this.props.style[1]) {
       oldHeight = this.props.style[1].height
@@ -40,19 +41,19 @@ class Header extends Component {
     } else {
       oldHeight = this.props.style[0].height;
     }
-    let height = oldHeight + InsetValues.topInset;
+    const height = oldHeight + InsetValues.topInset;
     return height;
   }
   calculatePadder(mode, inSet) {
     let inset = null;
-    if (inSet != undefined) {
+    if (inSet !== undefined) {
       inset = inSet;
     } else {
       inset = variable.Inset;
     }
     const InsetValues = mode === 'portrait' ? inset.portrait : inset.landscape;
     let topPadder = null;
-    let style = StyleSheet.flatten(this.props.style);
+    const style = StyleSheet.flatten(this.props.style);
     if (style.padding !== undefined || style.paddingTop !== undefined) {
       topPadder =
         (style.paddingTop ? style.paddingTop : style.padding) +
diff --git a/src/basic/Icon/index.js b/src/basic/Icon/index.js
index 6d61d384e..96c1a7b14 100644
--- a/src/basic/Icon/index.js
+++ b/src/basic/Icon/index.js
@@ -1,15 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import { Platform } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
 
+import variable from '../../theme/variables/platform';
+import mapPropsToStyleNames from '../../utils/mapPropsToStyleNames';
 import { IconNB } from '../IconNB';
-import ic from './NBIcons.json';
-import variable from './../../theme/variables/platform';
-import _ from 'lodash';
 
-import mapPropsToStyleNames from '../../utils/mapPropsToStyleNames';
+import ic from './NBIcons.json';
 
 class Icon extends Component {
   static contextTypes = {
@@ -42,24 +40,23 @@ class Icon extends Component {
     } else {
       return this.props.name;
     }
+    return null;
   }
 
   getIconName() {
     if (Platform.OS === 'ios') {
       if (this.props.ios) {
         return this.props.ios;
-      } else {
-        return this.props.active
-          ? ic[this.props.name].ios.active
-          : ic[this.props.name].ios.default;
       }
+      return this.props.active
+        ? ic[this.props.name].ios.active
+        : ic[this.props.name].ios.default;
     } else if (this.props.android) {
       return this.props.android;
-    } else {
-      return this.props.active
-        ? ic[this.props.name].android.active
-        : ic[this.props.name].android.default;
     }
+    return this.props.active
+      ? ic[this.props.name].android.active
+      : ic[this.props.name].android.default;
   }
 
   render() {
@@ -79,15 +76,14 @@ class Icon extends Component {
           name={this.getIconName()}
         />
       );
-    } else {
-      return (
-        <IconNB
-          ref={c => (this._root = c)}
-          {...this.props}
-          name={this.getName()}
-        />
-      );
     }
+    return (
+      <IconNB
+        ref={c => (this._root = c)}
+        {...this.props}
+        name={this.getName()}
+      />
+    );
   }
 }
 
diff --git a/src/basic/IconNB.js b/src/basic/IconNB.js
index 8c1000d39..dcf158829 100644
--- a/src/basic/IconNB.js
+++ b/src/basic/IconNB.js
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import { connectStyle } from 'native-base-shoutem-theme';
-
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import Entypo from 'react-native-vector-icons/Entypo';
 import EvilIcons from 'react-native-vector-icons/EvilIcons';
@@ -24,9 +22,20 @@ class IconNB extends Component {
     theme: PropTypes.object
   };
 
+  componentWillMount() {
+    this.setIcon(this.props.type);
+  }
+
+  componentWillUpdate(nextProps) {
+    if (nextProps.type && this.props.type !== nextProps.type) {
+      this.setIcon(nextProps.type);
+    }
+  }
+
   setIcon(iconType) {
-    if (iconType == undefined && this.context.theme) {
-      iconType = this.context.theme['@@shoutem.theme/themeStyle'].variables
+    if (iconType === undefined && this.context.theme) {
+      // eslint-disable-next-line
+      let iconType = this.context.theme['@@shoutem.theme/themeStyle'].variables
         .iconFamily;
     }
     switch (iconType) {
@@ -74,27 +83,12 @@ class IconNB extends Component {
     }
   }
 
-  componentWillMount() {
-    this.setIcon(this.props.type);
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-    if (nextProps.type && this.props.type != nextProps.type) {
-      this.setIcon(nextProps.type);
-    }
-  }
-
   render() {
     return <this.Icon ref={c => (this._root = c)} {...this.props} />;
   }
 }
 
 IconNB.propTypes = {
-  style: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.number,
-    PropTypes.array
-  ]),
   type: PropTypes.oneOf([
     'AntDesign',
     'Entypo',
diff --git a/src/basic/Input.js b/src/basic/Input.js
index 5ee85b619..08f8a1732 100644
--- a/src/basic/Input.js
+++ b/src/basic/Input.js
@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
-import variable from '../theme/variables/platform';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+import variable from '../theme/variables/platform';
+
 import NativeBaseComponent from './Base/NativeBaseComponent';
 
 class Input extends NativeBaseComponent {
@@ -17,7 +19,7 @@ class Input extends NativeBaseComponent {
           this._textInput = c;
           this._root = c;
         }}
-        editable={this.props.disabled ? false : true}
+        editable={!this.props.disabled}
         underlineColorAndroid="rgba(0,0,0,0)"
         placeholderTextColor={
           this.props.placeholderTextColor
diff --git a/src/basic/InputGroup.js b/src/basic/InputGroup.js
index cbcfedc66..5b5dfb6d8 100644
--- a/src/basic/InputGroup.js
+++ b/src/basic/InputGroup.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
+import { connectStyle } from 'native-base-shoutem-theme';
 
 import variables from '../theme/variables/platform';
-import { connectStyle } from 'native-base-shoutem-theme';
 import computeProps from '../utils/computeProps';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
diff --git a/src/basic/Item.js b/src/basic/Item.js
index 082a0a960..75d6a69e5 100644
--- a/src/basic/Item.js
+++ b/src/basic/Item.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-loop-func */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -5,23 +6,25 @@ import {
   Animated,
   Platform,
   View,
-  StyleSheet,
+  StyleSheet
 } from 'react-native';
-import { Input } from './Input';
-import { Label } from './Label';
-import { Icon } from './Icon';
-import { Thumbnail } from './Thumbnail';
-
+import _ from 'lodash';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import variables from '../theme/variables/platform';
 import computeProps from '../utils/computeProps';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
-import _ from 'lodash';
+
+import { Input } from './Input';
+import { Label } from './Label';
+import { Icon } from './Icon';
+import { Thumbnail } from './Thumbnail';
 
 class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isFocussed: true,
       text: '',
       topAnim: new Animated.Value(18),
       opacAnim: new Animated.Value(1)
@@ -30,7 +33,6 @@ class Item extends Component {
   componentDidMount() {
     if (this.props.floatingLabel) {
       if (this.inputProps && this.inputProps.value) {
-        this.setState({ isFocused: true });
         this.floatUp(-16);
       }
       if (this.inputProps && this.inputProps.getRef)
@@ -39,13 +41,13 @@ class Item extends Component {
   }
   componentWillReceiveProps(nextProps) {
     const childrenArray = React.Children.toArray(nextProps.children);
-    let inputProps = {};
+
     _.remove(childrenArray, item => {
       if (item.type.displayName === 'Styled(Input)') {
-        inputProps = item.props;
         this.inputProps = item.props;
         return item;
       }
+      return null;
     });
     if (this.props.floatingLabel) {
       if (this.inputProps && this.inputProps.value) {
@@ -57,6 +59,17 @@ class Item extends Component {
     }
   }
 
+  getInitialStyle() {
+    return {
+      roundedInputGroup: {
+        borderWidth: this.props.rounded ? variables.borderWidth * 2 : undefined,
+        borderRadius: this.props.rounded
+          ? variables.inputGroupRoundedBorderRadius
+          : undefined
+      }
+    };
+  }
+
   floatBack() {
     Animated.timing(this.state.topAnim, {
       toValue: 18,
@@ -83,36 +96,12 @@ class Item extends Component {
     }).start();
   }
 
-  renderLabel(label, labelProps) {
-    const newLabel = [];
-    let labelStyle = StyleSheet.flatten([
-      { fontSize: 15, lineHeight: 30 },
-      labelProps.style
-    ]);
-    if (this.props.floatingLabel) {
-      if (this.state.isFocused) {
-        newLabel.push(
-          React.createElement(Label, {
-            ...labelProps,
-            key: 'newFLabel',
-            float: true,
-            style: labelStyle
-          })
-        );
-        this.floatUp(-16);
-      } else {
-        newLabel.push(label);
-        this.floatBack();
-      }
-    } else {
-      newLabel.push(
-        React.createElement(Label, {
-          ...labelProps,
-          key: 'newLabel'
-        })
-      );
-    }
-    return newLabel;
+  prepareRootProps() {
+    const defaultProps = {
+      style: this.getInitialStyle().roundedInputGroup
+    };
+
+    return computeProps(this.props, defaultProps);
   }
 
   renderChildren() {
@@ -126,16 +115,17 @@ class Item extends Component {
         labelProps = item.props;
         return item;
       }
+      return null;
     });
 
-    let input = [];
     let inputProps = {};
-    input = _.remove(childrenArray, item => {
+    _.remove(childrenArray, item => {
       if (item.type === Input) {
         inputProps = item.props;
         this.inputProps = item.props;
         return item;
       }
+      return null;
     });
 
     let icon = [];
@@ -145,19 +135,19 @@ class Item extends Component {
         iconProps = item.props;
         return item;
       }
+      return null;
     });
 
     let image = [];
-    let imageProps = {};
     image = _.remove(childrenArray, item => {
       if (item.type === Thumbnail) {
-        imageProps = item.props;
         return item;
       }
+      return null;
     });
     if (this.props.floatingLabel && icon.length) {
       let isIcon = false;
-      for (let i = 0; i < this.props.children.length; i++) {
+      for (let i = 0; i < this.props.children.length; i + 1) {
         if (
           this.props.children[i].props.name &&
           this.props.children[i].type.displayName !== 'Styled(Input)'
@@ -200,20 +190,28 @@ class Item extends Component {
               {...inputProps}
               onFocus={() => {
                 this.setState({ isFocused: true });
-                inputProps.onFocus && inputProps.onFocus();
+                if (inputProps.onFocus) {
+                  inputProps.onFocus();
+                }
               }}
               onBlur={e => {
-                inputProps.value
-                  ? this.setState({
+                if (inputProps.value) {
+                  this.setState({
                     isFocused: true
-                  })
-                  : !this.state.text.length &&
-                    this.setState({ isFocused: false });
-                inputProps.onBlur && inputProps.onBlur(e);
+                  });
+                } else if (!this.state.text.length) {
+                  this.setState({ isFocused: false });
+                }
+
+                if (inputProps.onBlur) {
+                  inputProps.onBlur(e);
+                }
               }}
               onChangeText={text => {
                 this.setState({ text });
-                inputProps.onChangeText && inputProps.onChangeText(text);
+                if (inputProps.onChangeText) {
+                  inputProps.onChangeText(text);
+                }
               }}
             />
           );
@@ -221,7 +219,7 @@ class Item extends Component {
       }
     } else if (this.props.floatingLabel && image.length) {
       let isImage = false;
-      for (let i = 0; i < this.props.children.length; i++) {
+      for (let i = 0; i < this.props.children.length; i + 1) {
         if (this.props.children[i].type.displayName === 'Styled(Thumbnail)') {
           isImage = true;
           newChildren.push(
@@ -231,7 +229,7 @@ class Item extends Component {
               {...this.props.children[i].props}
               style={{
                 right: 10,
-                left: i == this.props.children.length - 1 ? undefined : 0
+                left: i === this.props.children.length - 1 ? undefined : 0
               }}
             />
           );
@@ -366,24 +364,39 @@ class Item extends Component {
     }
     return newChildren;
   }
-  getInitialStyle() {
-    return {
-      roundedInputGroup: {
-        borderWidth: this.props.rounded ? variables.borderWidth * 2 : undefined,
-        borderRadius: this.props.rounded
-          ? variables.inputGroupRoundedBorderRadius
-          : undefined
+
+  renderLabel(label, labelProps) {
+    const newLabel = [];
+    const labelStyle = StyleSheet.flatten([
+      { fontSize: 15, lineHeight: 30 },
+      labelProps.style
+    ]);
+    if (this.props.floatingLabel) {
+      if (this.state.isFocused) {
+        newLabel.push(
+          React.createElement(Label, {
+            ...labelProps,
+            key: 'newFLabel',
+            float: true,
+            style: labelStyle
+          })
+        );
+        this.floatUp(-16);
+      } else {
+        newLabel.push(label);
+        this.floatBack();
       }
-    };
+    } else {
+      newLabel.push(
+        React.createElement(Label, {
+          ...labelProps,
+          key: 'newLabel'
+        })
+      );
+    }
+    return newLabel;
   }
 
-  prepareRootProps() {
-    const defaultProps = {
-      style: this.getInitialStyle().roundedInputGroup
-    };
-
-    return computeProps(this.props, defaultProps);
-  }
   render() {
     return (
       <TouchableOpacity
@@ -397,24 +410,6 @@ class Item extends Component {
   }
 }
 
-const childrenType = function(props, propName, component) {
-  let error;
-  const prop = props[propName];
-  if (!props.children.length) {
-    error = new Error(
-      `${component} should have both Label and Input components`
-    );
-  } else if (
-    props.children[0].type.displayName !== 'Styled(Label)' ||
-    props.children[1].type.displayName !== 'Styled(Input)'
-  ) {
-    error = new Error(
-      `${component} should have Label and Input components only`
-    );
-  }
-  return error;
-};
-
 Item.propTypes = {
   ...TouchableOpacity.propTypes,
   style: PropTypes.oneOfType([
diff --git a/src/basic/Label.js b/src/basic/Label.js
index 9d49dd1dc..deedeb876 100644
--- a/src/basic/Label.js
+++ b/src/basic/Label.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Label extends Component {
diff --git a/src/basic/Left.js b/src/basic/Left.js
index e248f5815..c23487d61 100644
--- a/src/basic/Left.js
+++ b/src/basic/Left.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Left extends Component {
diff --git a/src/basic/List.js b/src/basic/List.js
index 0e868268e..56a277a5c 100644
--- a/src/basic/List.js
+++ b/src/basic/List.js
@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import { ListView, View } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
 
-import { SwipeRow } from './SwipeRow';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
+import { SwipeRow } from './SwipeRow';
+
 class List extends Component {
   static defaultProps = {
     leftOpenValue: 0,
@@ -24,8 +25,8 @@ class List extends Component {
     this._rows = {};
     this.openCellId = null;
     if (props.dataArray && props.renderRow) {
-      let rowHasChanged = props.rowHasChanged || ((r1, r2) => r1 !== r2);
-      const ds = new ListView.DataSource({ rowHasChanged: rowHasChanged });
+      const rowHasChanged = props.rowHasChanged || ((r1, r2) => r1 !== r2);
+      const ds = new ListView.DataSource({ rowHasChanged });
       this.state = {
         dataSource: ds.cloneWithRows(props.dataArray)
       };
@@ -40,34 +41,6 @@ class List extends Component {
       });
     }
   }
-  renderChildren() {
-    const childrenArray = React.Children.map(
-      this.props.children,
-      child => child
-    );
-
-    return childrenArray;
-  }
-  setScrollEnabled(enable) {
-    this._listView.setNativeProps({ scrollEnabled: enable });
-  }
-
-  safeCloseOpenRow() {
-    // if the openCellId is stale due to deleting a row this could be undefined
-    if (this._rows[this.openCellId]._root) {
-      this._rows[this.openCellId]._root.closeRow();
-    }
-  }
-
-  rowSwipeGestureBegan(id) {
-    if (
-      this.props.closeOnRowBeginSwipe &&
-      this.openCellId &&
-      this.openCellId !== id
-    ) {
-      this.safeCloseOpenRow();
-    }
-  }
 
   onRowOpen(secId, rowId, rowMap) {
     const cellIdentifier = `${secId}${rowId}`;
@@ -75,10 +48,12 @@ class List extends Component {
       this.safeCloseOpenRow();
     }
     this.openCellId = cellIdentifier;
-    this.props.onRowOpen && this.props.onRowOpen(secId, rowId, rowMap);
+    if (this.props.onRowOpen) {
+      this.props.onRowOpen(secId, rowId, rowMap);
+    }
   }
 
-  onRowPress(id) {
+  onRowPress() {
     if (this.openCellId) {
       if (this.props.closeOnRowPress) {
         this.safeCloseOpenRow();
@@ -87,13 +62,29 @@ class List extends Component {
     }
   }
 
-  closeRow(id) {
+  onScroll(e) {
     if (this.openCellId) {
-      if (this.props.closeOnRowPress) {
+      if (this.props.closeOnScroll) {
         this.safeCloseOpenRow();
         this.openCellId = null;
       }
     }
+
+    if (this.props.onScroll) {
+      this.props.onScroll(e);
+    }
+  }
+
+  setScrollEnabled(enable) {
+    this._listView.setNativeProps({ scrollEnabled: enable });
+  }
+
+  setRefs(ref) {
+    this._listView = ref;
+
+    if (this.props.listViewRef) {
+      this.props.listViewRef(ref);
+    }
   }
 
   openLeftRow(id) {
@@ -104,22 +95,42 @@ class List extends Component {
     this._rows[id]._root.openRightRow();
   }
 
-  onScroll(e) {
+  closeRow() {
     if (this.openCellId) {
-      if (this.props.closeOnScroll) {
+      if (this.props.closeOnRowPress) {
         this.safeCloseOpenRow();
         this.openCellId = null;
       }
     }
-    this.props.onScroll && this.props.onScroll(e);
   }
 
-  setRefs(ref) {
-    this._listView = ref;
-    this.props.listViewRef && this.props.listViewRef(ref);
+  rowSwipeGestureBegan(id) {
+    if (
+      this.props.closeOnRowBeginSwipe &&
+      this.openCellId &&
+      this.openCellId !== id
+    ) {
+      this.safeCloseOpenRow();
+    }
+  }
+
+  safeCloseOpenRow() {
+    // if the openCellId is stale due to deleting a row this could be undefined
+    if (this._rows[this.openCellId]._root) {
+      this._rows[this.openCellId]._root.closeRow();
+    }
+  }
+
+  renderChildren() {
+    const childrenArray = React.Children.map(
+      this.props.children,
+      child => child
+    );
+
+    return childrenArray;
   }
 
-  renderRow(rowData, secId, rowId, rowMap) {
+  renderRow(rowData, secId, rowId) {
     const previewRowId =
       this.props.dataSource &&
       this.props.dataSource.getRowIDForFlatIndex(
@@ -127,26 +138,26 @@ class List extends Component {
       );
     return (
       <SwipeRow
-        list={true}
+        list
         ref={row => (this._rows[`${secId}${rowId}`] = row)}
-        swipeGestureBegan={_ => this.rowSwipeGestureBegan(`${secId}${rowId}`)}
-        onRowOpen={_ => this.onRowOpen(secId, rowId, this._rows)}
-        onRowDidOpen={_ =>
+        swipeGestureBegan={() => this.rowSwipeGestureBegan(`${secId}${rowId}`)}
+        onRowOpen={() => this.onRowOpen(secId, rowId, this._rows)}
+        onRowDidOpen={() =>
           this.props.onRowDidOpen &&
           this.props.onRowDidOpen(secId, rowId, this._rows)
         }
-        onRowClose={_ =>
+        onRowClose={() =>
           this.props.onRowClose &&
           this.props.onRowClose(secId, rowId, this._rows)
         }
-        onRowDidClose={_ =>
+        onRowDidClose={() =>
           this.props.onRowDidClose &&
           this.props.onRowDidClose(secId, rowId, this._rows)
         }
-        onRowPress={_ => this.onRowPress(`${secId}${rowId}`)}
-        openLeftRow={_ => this.openLeftRow(`${secId}${rowId}`)}
-        openRightRow={_ => this.openRightRow(`${secId}${rowId}`)}
-        closeRow={_ => this.closeRow(`${secId}${rowId}`)}
+        onRowPress={() => this.onRowPress(`${secId}${rowId}`)}
+        openLeftRow={() => this.openLeftRow(`${secId}${rowId}`)}
+        openRightRow={() => this.openRightRow(`${secId}${rowId}`)}
+        closeRow={() => this.closeRow(`${secId}${rowId}`)}
         setScrollEnabled={enable => this.setScrollEnabled(enable)}
         leftOpenValue={this.props.leftOpenValue}
         rightOpenValue={this.props.rightOpenValue}
diff --git a/src/basic/ListItem.js b/src/basic/ListItem.js
index aa8c9ff6f..511896249 100644
--- a/src/basic/ListItem.js
+++ b/src/basic/ListItem.js
@@ -6,8 +6,8 @@ import {
   TouchableNativeFeedback,
   View
 } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 import variable from '../theme/variables/platform';
 
@@ -41,17 +41,16 @@ class ListItem extends Component {
           </View>
         </TouchableHighlight>
       );
-    } else {
-      return (
-        <TouchableNativeFeedback ref={c => (this._root = c)} {...this.props}>
-          <View style={{ marginLeft: -17, paddingLeft: 17 }}>
-            <View {...this.props} testID={undefined}>
-              {this.props.children}
-            </View>
-          </View>
-        </TouchableNativeFeedback>
-      );
     }
+    return (
+      <TouchableNativeFeedback ref={c => (this._root = c)} {...this.props}>
+        <View style={{ marginLeft: -17, paddingLeft: 17 }}>
+          <View {...this.props} testID={undefined}>
+            {this.props.children}
+          </View>
+        </View>
+      </TouchableNativeFeedback>
+    );
   }
 }
 
diff --git a/src/basic/Picker.android.js b/src/basic/Picker.android.js
index f74e10792..ab1c6689c 100644
--- a/src/basic/Picker.android.js
+++ b/src/basic/Picker.android.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { Picker } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 export default class PickerNB extends Component {
diff --git a/src/basic/Picker.ios.js b/src/basic/Picker.ios.js
index 09a8fdd10..36c9da6d1 100644
--- a/src/basic/Picker.ios.js
+++ b/src/basic/Picker.ios.js
@@ -9,10 +9,13 @@ import {
   FlatList,
   Dimensions
 } from 'react-native';
+import { connectStyle } from 'native-base-shoutem-theme';
 import _ from 'lodash';
+
+import computeProps from '../utils/computeProps';
+import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 import { Text } from './Text';
-import { List } from './List';
-import { IconNB as Icon } from './IconNB';
 import { Radio } from './Radio';
 import { Container } from './Container';
 import { ListItem } from './ListItem';
@@ -22,10 +25,6 @@ import { Title } from './Title';
 import { Left } from './Left';
 import { Right } from './Right';
 import { Body } from './Body';
-import { connectStyle } from 'native-base-shoutem-theme';
-import computeProps from '../utils/computeProps';
-
-import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class PickerNB extends Component {
   constructor(props) {
@@ -55,29 +54,17 @@ class PickerNB extends Component {
     }
   }
 
-  getInitialStyle() {
+  getInitialStyle = () => {
     return {
       picker: {
         // alignItems: 'flex-end'
       },
       pickerItem: {}
     };
-  }
-  _setModalVisible(visible) {
-    this.setState({ modalVisible: visible });
-  }
-
-  prepareRootProps() {
-    const defaultProps = {
-      style: this.getInitialStyle().picker,
-      itemStyle: this.getInitialStyle().pickerItem
-    };
-
-    return computeProps(this.props, defaultProps);
-  }
+  };
 
   getLabel(props) {
-    let children = this.getChildren(props.children);
+    const children = this.getChildren(props.children);
     const item = _.find(
       children,
       child => child.props.value === props.selectedValue
@@ -92,12 +79,26 @@ class PickerNB extends Component {
     );
   }
 
-  getChildren(children) {
+  getChildren = children => {
     if (children && !Array.isArray(children)) {
       return [].concat(children);
     }
-    children = [].concat.apply([], children);
-    return children;
+    // eslint-disable-next-line prefer-spread
+    const appliedChildren = [].concat.apply([], children);
+    return appliedChildren;
+  };
+
+  prepareRootProps() {
+    const defaultProps = {
+      style: this.getInitialStyle().picker,
+      itemStyle: this.getInitialStyle().pickerItem
+    };
+
+    return computeProps(this.props, defaultProps);
+  }
+
+  _setModalVisible(visible) {
+    this.setState({ modalVisible: visible });
   }
 
   renderIcon() {
@@ -155,7 +156,7 @@ class PickerNB extends Component {
               this.props.placeholderStyle,
               { width: Dimensions.get('window').width - 50 }
             ]}
-            note={this.props.note === false ? false : true}
+            note={this.props.note !== false}
             numberOfLines={1}
             ellipsizeMode="tail"
           >
diff --git a/src/basic/Picker.js b/src/basic/Picker.js
index f74e10792..ab1c6689c 100644
--- a/src/basic/Picker.js
+++ b/src/basic/Picker.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { Picker } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 export default class PickerNB extends Component {
diff --git a/src/basic/PickerItem.js b/src/basic/PickerItem.js
index c1c948d76..ac3a31abf 100644
--- a/src/basic/PickerItem.js
+++ b/src/basic/PickerItem.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Picker } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Item extends Component {
diff --git a/src/basic/Radio.js b/src/basic/Radio.js
index ebb1366c1..9c061e1c7 100644
--- a/src/basic/Radio.js
+++ b/src/basic/Radio.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { TouchableOpacity, Platform } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
 import Icon from 'react-native-vector-icons/Ionicons';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 import variable from '../theme/variables/platform';
 import computeProps from '../utils/computeProps';
@@ -23,8 +24,6 @@ class Radio extends Component {
     const variables = this.context.theme
       ? this.context.theme['@@shoutem.theme/themeStyle'].variables
       : variable;
-    const platformStyle = variables.platformStyle;
-    const platform = variables.platform;
 
     return (
       <TouchableOpacity
diff --git a/src/basic/Right.js b/src/basic/Right.js
index 3089ad8ee..05986bc1d 100644
--- a/src/basic/Right.js
+++ b/src/basic/Right.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Right extends Component {
diff --git a/src/basic/Root.js b/src/basic/Root.js
index 9995f5aad..89c0b1bb0 100644
--- a/src/basic/Root.js
+++ b/src/basic/Root.js
@@ -2,10 +2,11 @@ import React, { Component } from 'react';
 import { View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 import { ToastContainer as Toast } from './ToastContainer';
 import { ActionSheetContainer as ActionSheet } from './Actionsheet';
-import { Text } from './Text';
 
 class Root extends Component {
   render() {
diff --git a/src/basic/Segment.js b/src/basic/Segment.js
index 029edf021..ed9387432 100644
--- a/src/basic/Segment.js
+++ b/src/basic/Segment.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Segment extends Component {
diff --git a/src/basic/Separator.js b/src/basic/Separator.js
index d1e63107b..c09d537c4 100644
--- a/src/basic/Separator.js
+++ b/src/basic/Separator.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Separator extends Component {
diff --git a/src/basic/Spinner.js b/src/basic/Spinner.js
index 65d8afd4a..d2f289a93 100644
--- a/src/basic/Spinner.js
+++ b/src/basic/Spinner.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ActivityIndicator } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import variable from '../theme/variables/platform';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
diff --git a/src/basic/Subtitle.js b/src/basic/Subtitle.js
index 31d0ebaa0..6c97ce17a 100644
--- a/src/basic/Subtitle.js
+++ b/src/basic/Subtitle.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Subtitle extends Component {
diff --git a/src/basic/SwipeRow.js b/src/basic/SwipeRow.js
index 6b47269fb..a72e671a8 100644
--- a/src/basic/SwipeRow.js
+++ b/src/basic/SwipeRow.js
@@ -3,18 +3,16 @@ import PropTypes from 'prop-types';
 import {
   Animated,
   PanResponder,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
   View
 } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
-import { Text } from './Text';
+
+import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 import { Left } from './Left';
 import { Right } from './Right';
 import { Body } from './Body';
 import { ListItem } from './ListItem';
-import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 const PREVIEW_OPEN_DELAY = 700;
 const PREVIEW_CLOSE_DELAY = 300;
@@ -75,7 +73,7 @@ class SwipeRow extends Component {
 
     if (this.props.preview && !this.ranPreview) {
       this.ranPreview = true;
-      let previewOpenValue =
+      const previewOpenValue =
         this.props.previewOpenValue || this.props.rightOpenValue * 0.5;
       this.getPreviewAnimation(previewOpenValue, PREVIEW_OPEN_DELAY).start(
         _ => {
@@ -237,28 +235,28 @@ class SwipeRow extends Component {
           )}
         </Animated.View>
       );
-    } else {
-      return (
-        <Animated.View
-          {...this._panResponder.panHandlers}
-          onLayout={e => this.onContentLayout(e)}
-          style={{
-            transform: [{ translateX: this._translateX }],
-            zIndex: 2
-          }}
-        >
-          {!this.props.list ? (
-            <ListItem list style={this.props.style}>
-              {this.props.body}
-            </ListItem>
+    } 
+    return (
+      <Animated.View
+        {...this._panResponder.panHandlers}
+        onLayout={e => this.onContentLayout(e)}
+        style={{
+          transform: [{ translateX: this._translateX }],
+          zIndex: 2
+        }}
+      >
+        {!this.props.list ? (
+          <ListItem list style={this.props.style}>
+            {this.props.body}
+          </ListItem>
           ) : (
             <View style={[{ backgroundColor: '#FFF' }, this.props.style]}>
               {this.props.body}
             </View>
           )}
-        </Animated.View>
-      );
-    }
+      </Animated.View>
+    );
+    
   }
 
   render() {
diff --git a/src/basic/Switch.js b/src/basic/Switch.js
index d710473b0..b51d06d3e 100644
--- a/src/basic/Switch.js
+++ b/src/basic/Switch.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Switch as SwitchNB } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Switch extends Component {
diff --git a/src/basic/Tab.js b/src/basic/Tab.js
index 138e8d1f5..ab3b678e6 100644
--- a/src/basic/Tab.js
+++ b/src/basic/Tab.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Tab extends Component {
diff --git a/src/basic/TabContainer.js b/src/basic/TabContainer.js
index ce9b81411..a2e6dd7d2 100644
--- a/src/basic/TabContainer.js
+++ b/src/basic/TabContainer.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class TabContainer extends Component {
diff --git a/src/basic/TabHeading.js b/src/basic/TabHeading.js
index 184b97701..3302b796a 100644
--- a/src/basic/TabHeading.js
+++ b/src/basic/TabHeading.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class TabHeadingNB extends Component {
diff --git a/src/basic/Tabs/Button.android.js b/src/basic/Tabs/Button.android.js
index c87b3b03e..6b1fb0c18 100644
--- a/src/basic/Tabs/Button.android.js
+++ b/src/basic/Tabs/Button.android.js
@@ -14,4 +14,4 @@ const Button = props => {
 };
 
 module.exports = Button;
-//export default Button;
+// export default Button;
diff --git a/src/basic/Tabs/Button.ios.js b/src/basic/Tabs/Button.ios.js
index e98435c28..aba794254 100644
--- a/src/basic/Tabs/Button.ios.js
+++ b/src/basic/Tabs/Button.ios.js
@@ -11,4 +11,4 @@ const Button = props => {
 };
 
 module.exports = Button;
-//export default Button;
+// export default Button;
diff --git a/src/basic/Tabs/Button.js b/src/basic/Tabs/Button.js
index 9e1294931..eee9562f0 100644
--- a/src/basic/Tabs/Button.js
+++ b/src/basic/Tabs/Button.js
@@ -7,4 +7,4 @@ const Button = props => {
 };
 
 module.exports = Button;
-//export default Button;
+// export default Button;
diff --git a/src/basic/Tabs/DefaultTabBar.js b/src/basic/Tabs/DefaultTabBar.js
index 97ec99235..82fb06d8e 100644
--- a/src/basic/Tabs/DefaultTabBar.js
+++ b/src/basic/Tabs/DefaultTabBar.js
@@ -82,19 +82,19 @@ const DefaultTabBar = createReactClass({
           </TabHeading>
         </Button>
       );
-    } else {
-      return (
-        <Button
-          style={{ flex: 1 }}
-          key={_.random(1.2, 5.2)}
-          onPress={() => onPressHandler(page)}
-        >
-          <TabHeading style={tabHeaderStyle} active={isTabActive}>
-            {headerContent}
-          </TabHeading>
-        </Button>
-      );
-    }
+    } 
+    return (
+      <Button
+        style={{ flex: 1 }}
+        key={_.random(1.2, 5.2)}
+        onPress={() => onPressHandler(page)}
+      >
+        <TabHeading style={tabHeaderStyle} active={isTabActive}>
+          {headerContent}
+        </TabHeading>
+      </Button>
+    );
+    
   },
 
   render() {
diff --git a/src/basic/Tabs/SceneComponent.js b/src/basic/Tabs/SceneComponent.js
index 43ecaf7c4..cd485e039 100644
--- a/src/basic/Tabs/SceneComponent.js
+++ b/src/basic/Tabs/SceneComponent.js
@@ -17,4 +17,4 @@ const SceneComponent = Props => {
 };
 
 module.exports = SceneComponent;
-//export default SceneComponent;
+// export default SceneComponent;
diff --git a/src/basic/Tabs/ScrollableTabBar.js b/src/basic/Tabs/ScrollableTabBar.js
index 8899aff0e..5cbe40a51 100644
--- a/src/basic/Tabs/ScrollableTabBar.js
+++ b/src/basic/Tabs/ScrollableTabBar.js
@@ -193,19 +193,19 @@ const ScrollableTabBar = createReactClass({
           </TabHeading>
         </Button>
       );
-    } else {
-      return (
-        <Button
-          key={_.random(1.2, 5.2)}
-          onPress={() => onPressHandler(page)}
-          onLayout={onLayoutHandler}
-        >
-          <TabHeading scrollable style={tabHeaderStyle} active={isTabActive}>
-            {headerContent}
-          </TabHeading>
-        </Button>
-      );
-    }
+    } 
+    return (
+      <Button
+        key={_.random(1.2, 5.2)}
+        onPress={() => onPressHandler(page)}
+        onLayout={onLayoutHandler}
+      >
+        <TabHeading scrollable style={tabHeaderStyle} active={isTabActive}>
+          {headerContent}
+        </TabHeading>
+      </Button>
+    );
+    
   },
 
   measureTab(page, event) {
@@ -244,10 +244,10 @@ const ScrollableTabBar = createReactClass({
           ref={scrollView => {
             this._scrollView = scrollView;
           }}
-          horizontal={true}
+          horizontal
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          directionalLockEnabled={true}
+          directionalLockEnabled
           onScroll={this.props.onScroll}
           bounces={false}
           scrollsToTop={false}
diff --git a/src/basic/Tabs/StaticContainer.js b/src/basic/Tabs/StaticContainer.js
index ab0860b1f..3c4ff9d5c 100644
--- a/src/basic/Tabs/StaticContainer.js
+++ b/src/basic/Tabs/StaticContainer.js
@@ -1,4 +1,4 @@
-var React = require('react');
+const React = require('react');
 
 class StaticContainer extends React.Component {
   shouldComponentUpdate(nextProps: Object): boolean {
@@ -6,7 +6,7 @@ class StaticContainer extends React.Component {
   }
 
   render(): ?ReactElement {
-    var child = this.props.children;
+    const child = this.props.children;
     if (child === null || child === false) {
       return null;
     }
@@ -15,4 +15,4 @@ class StaticContainer extends React.Component {
 }
 
 module.exports = StaticContainer;
-//export default StaticContainer;
+// export default StaticContainer;
diff --git a/src/basic/Tabs/index.js b/src/basic/Tabs/index.js
index de7538e01..90964591b 100644
--- a/src/basic/Tabs/index.js
+++ b/src/basic/Tabs/index.js
@@ -112,9 +112,9 @@ const ScrollableTabView = createReactClass({
       return null;
     } else if (this.props.renderTabBar) {
       return React.cloneElement(this.props.renderTabBar(props), props);
-    } else {
-      return <DefaultTabBar {...props} />;
-    }
+    } 
+    return <DefaultTabBar {...props} />;
+    
   },
 
   updateSceneKeys({
@@ -122,7 +122,7 @@ const ScrollableTabView = createReactClass({
     children = this.props.children,
     callback = () => {}
   }) {
-    let newKeys = this.newSceneKeys({
+    const newKeys = this.newSceneKeys({
       previousKeys: this.state.sceneKeys,
       currentPage: page,
       children
@@ -135,9 +135,9 @@ const ScrollableTabView = createReactClass({
     currentPage = 0,
     children = this.props.children
   }) {
-    let newKeys = [];
+    const newKeys = [];
     this._children(children).forEach((child, idx) => {
-      let key = this._makeSceneKey(child, idx);
+      const key = this._makeSceneKey(child, idx);
       if (
         this._keyExists(previousKeys, key) ||
         this._shouldRenderSceneKey(idx, currentPage)
@@ -149,7 +149,7 @@ const ScrollableTabView = createReactClass({
   },
 
   _shouldRenderSceneKey(idx, currentPageKey) {
-    let numOfSibling = this.props.prerenderingSiblingsNumber;
+    const numOfSibling = this.props.prerenderingSiblingsNumber;
     return (
       idx < currentPageKey + numOfSibling + 1 &&
       idx > currentPageKey - numOfSibling - 1
@@ -161,7 +161,7 @@ const ScrollableTabView = createReactClass({
   },
 
   _makeSceneKey(child, idx) {
-    return child.props.heading + '_' + idx;
+    return `${child.props.heading  }_${  idx}`;
   },
 
   renderScrollableContent() {
@@ -200,7 +200,7 @@ const ScrollableTabView = createReactClass({
 
   _composeScenes() {
     return this._children().map((child, idx) => {
-      let key = this._makeSceneKey(child, idx);
+      const key = this._makeSceneKey(child, idx);
       return (
         <SceneComponent
           key={child.key}
@@ -275,10 +275,10 @@ const ScrollableTabView = createReactClass({
   },
 
   render() {
-    let overlayTabs =
+    const overlayTabs =
       this.props.tabBarPosition === 'overlayTop' ||
       this.props.tabBarPosition === 'overlayBottom';
-    let tabBarProps = {
+    const tabBarProps = {
       goToPage: this.goToPage,
       tabs: this._children().map(child => child.props.heading),
       tabStyle: this._children().map(child => child.props.tabStyle),
diff --git a/src/basic/Text.js b/src/basic/Text.js
index 474ab2791..329ace79f 100644
--- a/src/basic/Text.js
+++ b/src/basic/Text.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text as RNText } from 'react-native';
 import _ from 'lodash';
-
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Text extends Component {
@@ -15,9 +15,8 @@ class Text extends Component {
       text = React.Children.map(children, child => {
         if (_.isString(child)) {
           return _.toUpper(child);
-        } else {
-          return child;
         }
+        return child;
       });
     } else {
       text = children;
diff --git a/src/basic/Textarea.js b/src/basic/Textarea.js
index b901d4da2..ef297d4cd 100644
--- a/src/basic/Textarea.js
+++ b/src/basic/Textarea.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import variables from '../theme/variables/platform';
 import computeProps from '../utils/computeProps';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
@@ -36,7 +37,7 @@ class Textarea extends Component {
             : variables.inputColorPlaceholder
         }
         underlineColorAndroid="rgba(0,0,0,0)"
-        editable={this.props.disabled ? false : true}
+        editable={!this.props.disabled}
       />
     );
   }
diff --git a/src/basic/Thumbnail.js b/src/basic/Thumbnail.js
index 6a3626807..89cc71833 100644
--- a/src/basic/Thumbnail.js
+++ b/src/basic/Thumbnail.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Image } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
-import computeProps from '../utils/computeProps';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Thumbnail extends Component {
diff --git a/src/basic/Title.js b/src/basic/Title.js
index 76b6b5143..76e96035a 100644
--- a/src/basic/Title.js
+++ b/src/basic/Title.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Title extends Component {
diff --git a/src/basic/Toast.js b/src/basic/Toast.js
index 3023729da..834dbe777 100644
--- a/src/basic/Toast.js
+++ b/src/basic/Toast.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class Toast extends Component {
diff --git a/src/basic/ToastContainer.js b/src/basic/ToastContainer.js
index b3f1d2efb..5fffc697c 100644
--- a/src/basic/ToastContainer.js
+++ b/src/basic/ToastContainer.js
@@ -1,21 +1,18 @@
+/* eslint-disable class-methods-use-this */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, Modal, Platform, Animated, ViewPropTypes } from 'react-native';
+import { Platform, Animated, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
+import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 import { Text } from './Text';
 import { Button } from './Button';
-import { ViewNB } from './View';
 import { Toast } from './Toast';
-import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
+
 
 class ToastContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalVisible: false,
-      fadeAnim: new Animated.Value(0)
-    };
-  }
+  
   static toastInstance;
   static show({ ...config }) {
     this.toastInstance._root.showToast({ config });
@@ -25,6 +22,13 @@ class ToastContainer extends Component {
       this.toastInstance._root.closeToast('functionCall');
     }
   }
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalVisible: false,
+      fadeAnim: new Animated.Value(0)
+    };
+  }
   getToastStyle() {
     return {
       position: 'absolute',
@@ -39,15 +43,15 @@ class ToastContainer extends Component {
   getTop() {
     if (Platform.OS === 'ios') {
       return 30;
-    } else {
-      return 0;
-    }
+    } 
+    return 0;
+    
   }
   getButtonText(buttonText) {
     if (buttonText) {
       if (buttonText.trim().length === 0) {
         return undefined;
-      } else return buttonText;
+      } return buttonText;
     }
     return undefined;
   }
@@ -108,9 +112,9 @@ class ToastContainer extends Component {
         <Animated.View style={this.getToastStyle()}>
           <Toast
             style={this.state.style}
-            danger={this.state.type == 'danger' ? true : false}
-            success={this.state.type == 'success' ? true : false}
-            warning={this.state.type == 'warning' ? true : false}
+            danger={this.state.type === 'danger'}
+            success={this.state.type === 'success'}
+            warning={this.state.type === 'warning'}
           >
             <Text style={this.state.textStyle}>{this.state.text}</Text>
             {this.state.buttonText && (
@@ -126,7 +130,7 @@ class ToastContainer extends Component {
           </Toast>
         </Animated.View>
       );
-    } else return null;
+    } return null;
   }
 }
 
diff --git a/src/basic/View.js b/src/basic/View.js
index 4578d7107..845187366 100644
--- a/src/basic/View.js
+++ b/src/basic/View.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes } from 'react-native';
 import { connectStyle } from 'native-base-shoutem-theme';
+
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
 class ViewNB extends Component {
diff --git a/src/index.js b/src/index.js
index eb38a9d66..da900745b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import { StyleProvider, connectStyle } from 'native-base-shoutem-theme';
 import { keys } from 'lodash';
 import { Col, Row, Grid } from 'react-native-easy-grid';
-// import { Gravatar } from "./basic/Gravatar";
+
 import setDefaultThemeStyle from './init';
 import getTheme from './theme/components';
 import variables from './theme/variables/platform';
@@ -57,7 +57,6 @@ import { DefaultTabBar } from './basic/Tabs/DefaultTabBar';
 import { ScrollableTab } from './basic/Tabs/ScrollableTabBar';
 import { Subtitle } from './basic/Subtitle';
 import { Accordion } from './basic/Accordion';
-
 import VueNativeBase from './vue-native.js';
 
 setDefaultThemeStyle();
diff --git a/src/init.js b/src/init.js
index e870047f9..22ed824d2 100644
--- a/src/init.js
+++ b/src/init.js
@@ -1,4 +1,5 @@
 import { Theme } from 'native-base-shoutem-theme';
+
 import getThemeStyle from './theme/components';
 
 export default function setDefaultThemeStyle() {
diff --git a/src/theme/components/Badge.js b/src/theme/components/Badge.js
index a76e30323..fb0efa450 100644
--- a/src/theme/components/Badge.js
+++ b/src/theme/components/Badge.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const badgeTheme = {
     '.primary': {
       backgroundColor: variables.buttonPrimaryBg
diff --git a/src/theme/components/Body.js b/src/theme/components/Body.js
index c73a2cb52..6de0c888d 100644
--- a/src/theme/components/Body.js
+++ b/src/theme/components/Body.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const bodyTheme = {
     flex: 1,
     alignItems: 'center',
diff --git a/src/theme/components/Button.js b/src/theme/components/Button.js
index ce5cdbd72..53ee221da 100644
--- a/src/theme/components/Button.js
+++ b/src/theme/components/Button.js
@@ -3,7 +3,7 @@
 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 = {
diff --git a/src/theme/components/Card.js b/src/theme/components/Card.js
index 42d9601ab..de4f9f42a 100644
--- a/src/theme/components/Card.js
+++ b/src/theme/components/Card.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const cardTheme = {
     '.transparent': {
       shadowColor: null,
diff --git a/src/theme/components/CardItem.js b/src/theme/components/CardItem.js
index 5de92622a..504c03f07 100644
--- a/src/theme/components/CardItem.js
+++ b/src/theme/components/CardItem.js
@@ -1,9 +1,10 @@
 // @flow
 
 import { StyleSheet } from 'react-native';
+
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
   const transparentBtnCommon = {
     'NativeBase.Text': {
diff --git a/src/theme/components/CheckBox.js b/src/theme/components/CheckBox.js
index a4f74f844..7a858c3c3 100644
--- a/src/theme/components/CheckBox.js
+++ b/src/theme/components/CheckBox.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const checkBoxTheme = {
     '.checked': {
       'NativeBase.Icon': {
diff --git a/src/theme/components/Container.js b/src/theme/components/Container.js
index fd5aefeca..a6fb29eae 100644
--- a/src/theme/components/Container.js
+++ b/src/theme/components/Container.js
@@ -5,7 +5,7 @@ import { Platform, Dimensions } from 'react-native';
 import variable from './../variables/platform';
 
 const deviceHeight = Dimensions.get('window').height;
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const theme = {
     flex: 1,
     height: Platform.OS === 'ios' ? deviceHeight : deviceHeight - 20,
diff --git a/src/theme/components/Content.js b/src/theme/components/Content.js
index a96a87d7c..97bd81c6e 100644
--- a/src/theme/components/Content.js
+++ b/src/theme/components/Content.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const contentTheme = {
     flex: 1,
     backgroundColor: 'transparent',
diff --git a/src/theme/components/Fab.js b/src/theme/components/Fab.js
index 0529d2f6c..4d2b9cbd6 100644
--- a/src/theme/components/Fab.js
+++ b/src/theme/components/Fab.js
@@ -1,10 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
-  const platform = variables.platform;
-
+export default () => {
   const fabTheme = {
     'NativeBase.Button': {
       alignItems: 'center',
diff --git a/src/theme/components/Footer.js b/src/theme/components/Footer.js
index 370eb8135..167acc660 100644
--- a/src/theme/components/Footer.js
+++ b/src/theme/components/Footer.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
   const platform = variables.platform;
 
diff --git a/src/theme/components/FooterTab.js b/src/theme/components/FooterTab.js
index 82afa0e51..8297e236f 100644
--- a/src/theme/components/FooterTab.js
+++ b/src/theme/components/FooterTab.js
@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const footerTabTheme = {
diff --git a/src/theme/components/Form.js b/src/theme/components/Form.js
index ad36c576c..3040f3003 100644
--- a/src/theme/components/Form.js
+++ b/src/theme/components/Form.js
@@ -1,10 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
-  const platform = variables.platform;
-
+export default () => {
   const theme = {
     'NativeBase.Item': {
       '.fixedLabel': {
diff --git a/src/theme/components/H1.js b/src/theme/components/H1.js
index a9b3d4336..20aa8db44 100644
--- a/src/theme/components/H1.js
+++ b/src/theme/components/H1.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h1Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH1,
diff --git a/src/theme/components/H2.js b/src/theme/components/H2.js
index 418b7f2da..cad4057da 100644
--- a/src/theme/components/H2.js
+++ b/src/theme/components/H2.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h2Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH2,
diff --git a/src/theme/components/H3.js b/src/theme/components/H3.js
index edf0c194a..19917f54d 100644
--- a/src/theme/components/H3.js
+++ b/src/theme/components/H3.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const h3Theme = {
     color: variables.textColor,
     fontSize: variables.fontSizeH3,
diff --git a/src/theme/components/Header.js b/src/theme/components/Header.js
index 9106b3816..25cafe7f2 100644
--- a/src/theme/components/Header.js
+++ b/src/theme/components/Header.js
@@ -4,7 +4,7 @@ import { PixelRatio, StatusBar } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
   const platform = variables.platform;
 
diff --git a/src/theme/components/Icon.js b/src/theme/components/Icon.js
index 6fcc1994a..949307bdf 100644
--- a/src/theme/components/Icon.js
+++ b/src/theme/components/Icon.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const iconTheme = {
     fontSize: variables.iconFontSize,
     color: '#000'
diff --git a/src/theme/components/Input.js b/src/theme/components/Input.js
index f5eeee69d..d0dd6af51 100644
--- a/src/theme/components/Input.js
+++ b/src/theme/components/Input.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const inputTheme = {
     '.multiline': {
       height: null
diff --git a/src/theme/components/InputGroup.js b/src/theme/components/InputGroup.js
index 2f9f29d3f..7988ca52f 100644
--- a/src/theme/components/InputGroup.js
+++ b/src/theme/components/InputGroup.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const inputGroupTheme = {
     'NativeBase.Icon': {
       fontSize: 24,
diff --git a/src/theme/components/Item.js b/src/theme/components/Item.js
index 8a4cf0291..73c95ff6e 100644
--- a/src/theme/components/Item.js
+++ b/src/theme/components/Item.js
@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const itemTheme = {
     '.floatingLabel': {
       'NativeBase.Input': {
diff --git a/src/theme/components/Label.js b/src/theme/components/Label.js
index 576ba48d5..118f648b0 100644
--- a/src/theme/components/Label.js
+++ b/src/theme/components/Label.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const labelTheme = {
     '.focused': {
       width: 0
diff --git a/src/theme/components/Left.js b/src/theme/components/Left.js
index 5a9477155..e01d693c8 100644
--- a/src/theme/components/Left.js
+++ b/src/theme/components/Left.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const leftTheme = {
     flex: 1,
     alignSelf: 'center',
diff --git a/src/theme/components/ListItem.js b/src/theme/components/ListItem.js
index a615ab7d5..68c2c2936 100644
--- a/src/theme/components/ListItem.js
+++ b/src/theme/components/ListItem.js
@@ -5,7 +5,7 @@ import { Platform, PixelRatio } from 'react-native';
 import pickerTheme from './Picker';
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
   const selectedStyle = {
     'NativeBase.Text': {
diff --git a/src/theme/components/Picker.android.js b/src/theme/components/Picker.android.js
index 92b6329c0..300a74356 100644
--- a/src/theme/components/Picker.android.js
+++ b/src/theme/components/Picker.android.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {
     '.note': {
       color: '#8F8E95'
diff --git a/src/theme/components/Picker.ios.js b/src/theme/components/Picker.ios.js
index 6a63c0d6a..b81b0568e 100644
--- a/src/theme/components/Picker.ios.js
+++ b/src/theme/components/Picker.ios.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {};
 
   return pickerTheme;
diff --git a/src/theme/components/Picker.js b/src/theme/components/Picker.js
index 92b6329c0..300a74356 100644
--- a/src/theme/components/Picker.js
+++ b/src/theme/components/Picker.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const pickerTheme = {
     '.note': {
       color: '#8F8E95'
diff --git a/src/theme/components/Radio.js b/src/theme/components/Radio.js
index 808687d00..5f16df893 100644
--- a/src/theme/components/Radio.js
+++ b/src/theme/components/Radio.js
@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const radioTheme = {
     '.selected': {
       'NativeBase.IconNB': {
diff --git a/src/theme/components/Right.js b/src/theme/components/Right.js
index f356bc4ec..53b33081b 100644
--- a/src/theme/components/Right.js
+++ b/src/theme/components/Right.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const rightTheme = {
     'NativeBase.Button': {
       alignSelf: null
diff --git a/src/theme/components/Segment.js b/src/theme/components/Segment.js
index 39344ae1a..b7a69b3cd 100644
--- a/src/theme/components/Segment.js
+++ b/src/theme/components/Segment.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const segmentTheme = {
diff --git a/src/theme/components/Separator.js b/src/theme/components/Separator.js
index 7eb1416b4..7fdf313cc 100644
--- a/src/theme/components/Separator.js
+++ b/src/theme/components/Separator.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const theme = {
     '.group': {
       height: 50,
diff --git a/src/theme/components/Spinner.js b/src/theme/components/Spinner.js
index 49d47be54..a453b3f7e 100644
--- a/src/theme/components/Spinner.js
+++ b/src/theme/components/Spinner.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const spinnerTheme = {
     height: 80
   };
diff --git a/src/theme/components/Subtitle.js b/src/theme/components/Subtitle.js
index 941e05454..981115ae5 100644
--- a/src/theme/components/Subtitle.js
+++ b/src/theme/components/Subtitle.js
@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const subtitleTheme = {
     fontSize: variables.subTitleFontSize,
     fontFamily: variables.titleFontfamily,
diff --git a/src/theme/components/SwipeRow.js b/src/theme/components/SwipeRow.js
index 75ac2aac5..41d608353 100644
--- a/src/theme/components/SwipeRow.js
+++ b/src/theme/components/SwipeRow.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const swipeRowTheme = {
     'NativeBase.ListItem': {
       '.list': {
diff --git a/src/theme/components/Switch.js b/src/theme/components/Switch.js
index 49b75543e..6b667bc07 100644
--- a/src/theme/components/Switch.js
+++ b/src/theme/components/Switch.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const switchTheme = {
     marginVertical: -5
   };
diff --git a/src/theme/components/Tab.js b/src/theme/components/Tab.js
index 7df110259..b2423064e 100644
--- a/src/theme/components/Tab.js
+++ b/src/theme/components/Tab.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const tabTheme = {
     flex: 1,
     backgroundColor: '#FFF'
diff --git a/src/theme/components/TabBar.js b/src/theme/components/TabBar.js
index bf8c26737..fa1490d45 100644
--- a/src/theme/components/TabBar.js
+++ b/src/theme/components/TabBar.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const tabBarTheme = {
     '.tabIcon': {
       height: undefined
diff --git a/src/theme/components/TabContainer.js b/src/theme/components/TabContainer.js
index 56f1c8ee2..2a4cd4953 100644
--- a/src/theme/components/TabContainer.js
+++ b/src/theme/components/TabContainer.js
@@ -1,11 +1,11 @@
 // @flow
 
-import variable from './../variables/platform';
 import { Platform } from 'react-native';
 
-export default (variables /*: * */ = variable) => {
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
   const platformStyle = variables.platformStyle;
-  const platform = variables.platform;
 
   const tabContainerTheme = {
     elevation: 3,
diff --git a/src/theme/components/TabHeading.js b/src/theme/components/TabHeading.js
index 95aec1ef2..289deb975 100644
--- a/src/theme/components/TabHeading.js
+++ b/src/theme/components/TabHeading.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const tabHeadingTheme = {
diff --git a/src/theme/components/Text.js b/src/theme/components/Text.js
index 181fe4cf8..8c3fa243f 100644
--- a/src/theme/components/Text.js
+++ b/src/theme/components/Text.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const textTheme = {
     fontSize: variables.DefaultFontSize,
     fontFamily: variables.fontFamily,
diff --git a/src/theme/components/Textarea.js b/src/theme/components/Textarea.js
index b7aaede5d..a46d93bc6 100644
--- a/src/theme/components/Textarea.js
+++ b/src/theme/components/Textarea.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const textAreaTheme = {
     '.underline': {
       borderBottomWidth: variables.borderWidth,
diff --git a/src/theme/components/Thumbnail.js b/src/theme/components/Thumbnail.js
index 6226b71fe..c6c9f68a6 100644
--- a/src/theme/components/Thumbnail.js
+++ b/src/theme/components/Thumbnail.js
@@ -1,8 +1,6 @@
 // @flow
 
-import variable from './../variables/platform';
-
-export default (variables /*: * */ = variable) => {
+export default () => {
   const thumbnailTheme = {
     '.square': {
       borderRadius: 0,
diff --git a/src/theme/components/Title.js b/src/theme/components/Title.js
index d72cb4438..46f28d612 100644
--- a/src/theme/components/Title.js
+++ b/src/theme/components/Title.js
@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const titleTheme = {
     fontSize: variables.titleFontSize,
     fontFamily: variables.titleFontfamily,
diff --git a/src/theme/components/Toast.js b/src/theme/components/Toast.js
index 58a90b4a3..4e0a9d83b 100644
--- a/src/theme/components/Toast.js
+++ b/src/theme/components/Toast.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const platform = variables.platform;
 
   const toastTheme = {
diff --git a/src/theme/components/View.js b/src/theme/components/View.js
index 305f7ec3c..827581e26 100644
--- a/src/theme/components/View.js
+++ b/src/theme/components/View.js
@@ -2,7 +2,7 @@
 
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const viewTheme = {
     '.padder': {
       padding: variables.contentPadding
diff --git a/src/theme/components/index.js b/src/theme/components/index.js
index 102e74172..8b6be3ee6 100644
--- a/src/theme/components/index.js
+++ b/src/theme/components/index.js
@@ -1,6 +1,8 @@
+/* eslint-disable no-param-reassign */
 // @flow
 
 import _ from 'lodash';
+
 import bodyTheme from './Body';
 import leftTheme from './Left';
 import rightTheme from './Right';
@@ -45,7 +47,7 @@ import separatorTheme from './Separator';
 import pickerTheme from './Picker';
 import variable from './../variables/platform';
 
-export default (variables /*: * */ = variable) => {
+export default (variables /* : * */ = variable) => {
   const theme = {
     variables,
     'NativeBase.Left': {
diff --git a/src/theme/variables/commonColor.js b/src/theme/variables/commonColor.js
index d3327e191..dac12b9ea 100644
--- a/src/theme/variables/commonColor.js
+++ b/src/theme/variables/commonColor.js
@@ -1,7 +1,6 @@
 // @flow
 
 import color from 'color';
-
 import { Platform, Dimensions, PixelRatio } from 'react-native';
 
 export const PLATFORM = {
@@ -24,14 +23,14 @@ export default {
   platformStyle,
   platform,
 
-  //Accordion
+  // Accordion
   headerStyle: '#edebed',
   iconStyle: '#000',
   contentStyle: '#f5f4f5',
   expandedIconStyle: '#000',
   accordionBorderColor: '#d3d3d3',
 
-  //Android
+  // Android
   androidRipple: true,
   androidRippleColor: 'rgba(256, 256, 256, 0.3)',
   androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
@@ -124,10 +123,10 @@ export default {
   brandDark: '#000',
   brandLight: '#f4f4f4',
 
-  //Container
+  // Container
   containerBgColor: '#fff',
 
-  //Date Picker
+  // Date Picker
   datePickerTextColor: '#000',
   datePickerBg: 'transparent',
 
@@ -276,7 +275,7 @@ export default {
   isIphoneX,
   inputGroupRoundedBorderRadius: 30,
 
-  //iPhoneX SafeArea
+  // iPhoneX SafeArea
   Inset: {
     portrait: {
       topInset: 24,
diff --git a/src/theme/variables/material.js b/src/theme/variables/material.js
index d8f51a472..84503f71c 100644
--- a/src/theme/variables/material.js
+++ b/src/theme/variables/material.js
@@ -1,7 +1,6 @@
 // @flow
 
 import color from 'color';
-
 import { Platform, Dimensions, PixelRatio } from 'react-native';
 
 import { PLATFORM } from './commonColor';
@@ -21,7 +20,7 @@ export default {
   platformStyle,
   platform,
 
-  //Accordion
+  // Accordion
   headerStyle: '#edebed',
   iconStyle: '#000',
   contentStyle: '#f5f4f5',
@@ -119,10 +118,10 @@ export default {
   brandDark: '#000',
   brandLight: '#f4f4f4',
 
-  //Container
+  // Container
   containerBgColor: '#fff',
 
-  //Date Picker
+  // Date Picker
   datePickerTextColor: '#000',
   datePickerBg: 'transparent',
 
@@ -271,7 +270,7 @@ export default {
   isIphoneX,
   inputGroupRoundedBorderRadius: 30,
 
-  //iPhoneX SafeArea
+  // iPhoneX SafeArea
   Inset: {
     portrait: {
       topInset: 24,
diff --git a/src/theme/variables/platform.js b/src/theme/variables/platform.js
index a932f51b0..6079b8c37 100644
--- a/src/theme/variables/platform.js
+++ b/src/theme/variables/platform.js
@@ -1,7 +1,6 @@
 // @flow
 
 import color from 'color';
-
 import { Platform, Dimensions, PixelRatio } from 'react-native';
 
 import { PLATFORM } from './commonColor';
@@ -21,7 +20,7 @@ export default {
   platformStyle,
   platform,
 
-  //Accordion
+  // Accordion
   headerStyle: '#edebed',
   iconStyle: '#000',
   contentStyle: '#f5f4f5',
@@ -125,10 +124,10 @@ export default {
   brandDark: '#000',
   brandLight: '#f4f4f4',
 
-  //Container
+  // Container
   containerBgColor: '#fff',
 
-  //Date Picker
+  // Date Picker
   datePickerTextColor: '#000',
   datePickerBg: 'transparent',
 
@@ -277,7 +276,7 @@ export default {
   isIphoneX,
   inputGroupRoundedBorderRadius: 30,
 
-  //iPhoneX SafeArea
+  // iPhoneX SafeArea
   Inset: {
     portrait: {
       topInset: 24,
diff --git a/src/utils/computeProps.js b/src/utils/computeProps.js
index 8e80c5e0c..21fc81103 100644
--- a/src/utils/computeProps.js
+++ b/src/utils/computeProps.js
@@ -6,13 +6,12 @@ module.exports = function(incomingProps, defaultProps) {
   // External props has a higher precedence
   let computedProps = {};
 
-  incomingProps = _.clone(incomingProps);
-  delete incomingProps.children;
+  const clonedIncomingProps = _.clone(incomingProps);
+  delete clonedIncomingProps.children;
 
   const incomingPropsStyle = incomingProps.style;
-  delete incomingProps.style;
+  delete clonedIncomingProps.style;
 
-  // console.log(defaultProps, incomingProps);
   if (incomingProps) {
     _.assign(computedProps, defaultProps, incomingProps);
   } else {
@@ -38,6 +37,5 @@ module.exports = function(incomingProps, defaultProps) {
 
     _.merge(computedProps.style, defaultProps.style, computedPropsStyle);
   }
-  // console.log("computedProps ", computedProps);
   return computedProps;
 };
diff --git a/src/utils/index.js b/src/utils/index.js
index 1588a8e12..0647248b1 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,4 +1,5 @@
 import { ViewPropTypes } from 'react-native';
+
 import InteractionManager from './interactionManager';
 
 export { InteractionManager, ViewPropTypes };
diff --git a/src/utils/interactionManager.js b/src/utils/interactionManager.js
index 91eb0d176..857c1d166 100644
--- a/src/utils/interactionManager.js
+++ b/src/utils/interactionManager.js
@@ -1,9 +1,8 @@
 import { InteractionManager } from 'react-native';
+
 export default {
   ...InteractionManager,
   runAfterInteractions: f => {
-    // ensure f get called, timeout at 10ms
-    // @gre workaround https://github.com/facebook/react-native/issues/8624
     let called = false;
     const timeout = setTimeout(() => {
       called = true;
diff --git a/src/vue-native.js b/src/vue-native.js
index e7fdd1a45..b144655f0 100644
--- a/src/vue-native.js
+++ b/src/vue-native.js
@@ -1,6 +1,6 @@
 import { StyleProvider } from 'native-base-shoutem-theme';
-// import { Gravatar } from "./basic/Gravatar";
 import { Col, Row, Grid } from 'react-native-easy-grid';
+
 import Drawer from './basic/Drawer';
 import { SwipeRow } from './basic/SwipeRow';
 import { Text } from './basic/Text';
@@ -57,7 +57,7 @@ import { Accordion } from './basic/Accordion';
 const VueNativeBasePlugin = {
   // The install method is all that needs to exist on the plugin object.
   // It takes the global Vue object as well as user-defined options.
-  install(Vue, options) {
+  install(Vue) {
     Vue.component('nb-drawer', Drawer);
     Vue.component('nb-row', Row);
     Vue.component('nb-col', Col);