Configure Eslint & Prettier (#302)

.eslintrc

@@ -1,170 +1,3 @@
 {
-  "parser": "babel-eslint",
+  "extends": "@react-native-community"
-  "env": {
-    "browser": true,
-    "node": true,
-    "jasmine": true
-  },
-  "ecmaFeatures": {
-    "arrowFunctions": true,
-    "blockBindings": true,
-    "classes": true,
-    "defaultParams": true,
-    "destructuring": true,
-    "forOf": true,
-    "generators": false,
-    "modules": true,
-    "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,
-    "objectLiteralShorthandMethods": true,
-    "objectLiteralShorthandProperties": true,
-    "spread": true,
-    "superInFunctions": true,
-    "templateStrings": true,
-    "jsx": true
-  },
-  "rules": {
-/**
- * Strict mode
- */
-    // babel inserts "use strict"; for us
-    // http://eslint.org/docs/rules/strict
-    "strict": [2, "never"],
-
-/**
- * ES6
- */
-    "no-var": 0,                     // http://eslint.org/docs/rules/no-var
-
-/**
- * Variables
- */
-    "no-shadow": 2,                  // http://eslint.org/docs/rules/no-shadow
-    "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
-    "no-unused-vars": [0, {          // http://eslint.org/docs/rules/no-unused-vars
-      "vars": "local",
-      "args": "after-used"
-    }],
-    "no-use-before-define": 2,       // http://eslint.org/docs/rules/no-use-before-define
-
-/**
- * Possible errors
- */
-    "comma-dangle": [2, "always-multiline"], // http://eslint.org/docs/rules/comma-dangle
-    "no-cond-assign": [2, "always"],  // http://eslint.org/docs/rules/no-cond-assign
-    "no-console": 0,                 // http://eslint.org/docs/rules/no-console
-    "no-debugger": 1,                // http://eslint.org/docs/rules/no-debugger
-    "no-alert": 1,                   // http://eslint.org/docs/rules/no-alert
-    "no-constant-condition": 1,      // http://eslint.org/docs/rules/no-constant-condition
-    "no-dupe-keys": 2,               // http://eslint.org/docs/rules/no-dupe-keys
-    "no-duplicate-case": 2,          // http://eslint.org/docs/rules/no-duplicate-case
-    "no-empty": 2,                   // http://eslint.org/docs/rules/no-empty
-    "no-ex-assign": 2,               // http://eslint.org/docs/rules/no-ex-assign
-    "no-extra-boolean-cast": 0,      // http://eslint.org/docs/rules/no-extra-boolean-cast
-    "no-extra-semi": 2,              // http://eslint.org/docs/rules/no-extra-semi
-    "no-func-assign": 2,             // http://eslint.org/docs/rules/no-func-assign
-    "no-inner-declarations": 2,      // http://eslint.org/docs/rules/no-inner-declarations
-    "no-invalid-regexp": 2,          // http://eslint.org/docs/rules/no-invalid-regexp
-    "no-irregular-whitespace": 2,    // http://eslint.org/docs/rules/no-irregular-whitespace
-    "no-obj-calls": 2,               // http://eslint.org/docs/rules/no-obj-calls
-    "no-reserved-keys": 0,           // http://eslint.org/docs/rules/no-reserved-keys
-    "no-sparse-arrays": 2,           // http://eslint.org/docs/rules/no-sparse-arrays
-    "no-unreachable": 2,             // http://eslint.org/docs/rules/no-unreachable
-    "use-isnan": 2,                  // http://eslint.org/docs/rules/use-isnan
-    "block-scoped-var": 2,           // http://eslint.org/docs/rules/block-scoped-var
-
-/**
- * Best practices
- */
-    "consistent-return": 2,          // http://eslint.org/docs/rules/consistent-return
-    "curly": [2, "multi-line"],      // http://eslint.org/docs/rules/curly
-    "default-case": 2,               // http://eslint.org/docs/rules/default-case
-    "dot-notation": [2, {            // http://eslint.org/docs/rules/dot-notation
-      "allowKeywords": true
-    }],
-    "eqeqeq": ["error", "smart"],    // http://eslint.org/docs/rules/eqeqeq
-    "guard-for-in": 2,               // http://eslint.org/docs/rules/guard-for-in
-    "no-caller": 2,                  // http://eslint.org/docs/rules/no-caller
-    "no-else-return": 2,             // http://eslint.org/docs/rules/no-else-return
-    "no-eq-null": 0,                 // http://eslint.org/docs/rules/no-eq-null
-    "no-eval": 2,                    // http://eslint.org/docs/rules/no-eval
-    "no-extend-native": 2,           // http://eslint.org/docs/rules/no-extend-native
-    "no-extra-bind": 2,              // http://eslint.org/docs/rules/no-extra-bind
-    "no-fallthrough": 2,             // http://eslint.org/docs/rules/no-fallthrough
-    "no-floating-decimal": 2,        // http://eslint.org/docs/rules/no-floating-decimal
-    "no-implied-eval": 2,            // http://eslint.org/docs/rules/no-implied-eval
-    "no-lone-blocks": 2,             // http://eslint.org/docs/rules/no-lone-blocks
-    "no-loop-func": 2,               // http://eslint.org/docs/rules/no-loop-func
-    "no-multi-str": 2,               // http://eslint.org/docs/rules/no-multi-str
-    "no-native-reassign": 2,         // http://eslint.org/docs/rules/no-native-reassign
-    "no-new": 2,                     // http://eslint.org/docs/rules/no-new
-    "no-new-func": 2,                // http://eslint.org/docs/rules/no-new-func
-    "no-new-wrappers": 2,            // http://eslint.org/docs/rules/no-new-wrappers
-    "no-octal": 2,                   // http://eslint.org/docs/rules/no-octal
-    "no-octal-escape": 2,            // http://eslint.org/docs/rules/no-octal-escape
-    "no-param-reassign": 2,          // http://eslint.org/docs/rules/no-param-reassign
-    "no-proto": 2,                   // http://eslint.org/docs/rules/no-proto
-    "no-redeclare": 2,               // http://eslint.org/docs/rules/no-redeclare
-    "no-return-assign": 2,           // http://eslint.org/docs/rules/no-return-assign
-    "no-script-url": 2,              // http://eslint.org/docs/rules/no-script-url
-    "no-self-compare": 2,            // http://eslint.org/docs/rules/no-self-compare
-    "no-sequences": 2,               // http://eslint.org/docs/rules/no-sequences
-    "no-throw-literal": 2,           // http://eslint.org/docs/rules/no-throw-literal
-    "no-with": 2,                    // http://eslint.org/docs/rules/no-with
-    "radix": 2,                      // http://eslint.org/docs/rules/radix
-    "vars-on-top": 2,                // http://eslint.org/docs/rules/vars-on-top
-    "wrap-iife": [2, "any"],         // http://eslint.org/docs/rules/wrap-iife
-    "yoda": 2,                       // http://eslint.org/docs/rules/yoda
-
-/**
- * Style
- */
-    "indent": [2, 2],                // http://eslint.org/docs/rules/
-    "brace-style": [2,               // http://eslint.org/docs/rules/brace-style
-      "1tbs", {
-      "allowSingleLine": true
-    }],
-    "quotes": [
-      2, "single", "avoid-escape"    // http://eslint.org/docs/rules/quotes
-    ],
-    "camelcase": [2, {               // http://eslint.org/docs/rules/camelcase
-      "properties": "never"
-    }],
-    "comma-spacing": [2, {           // http://eslint.org/docs/rules/comma-spacing
-      "before": false,
-      "after": true
-    }],
-    "comma-style": [2, "last"],      // http://eslint.org/docs/rules/comma-style
-    "eol-last": 2,                   // http://eslint.org/docs/rules/eol-last
-    "func-names": 1,                 // http://eslint.org/docs/rules/func-names
-    "key-spacing": [2, {             // http://eslint.org/docs/rules/key-spacing
-        "beforeColon": false,
-        "afterColon": true
-    }],
-    "new-cap": [2, {                 // http://eslint.org/docs/rules/new-cap
-      "newIsCap": true
-    }],
-    "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
-      "max": 2
-    }],
-    "no-nested-ternary": 2,          // http://eslint.org/docs/rules/no-nested-ternary
-    "no-new-object": 2,              // http://eslint.org/docs/rules/no-new-object
-    "no-spaced-func": 2,             // http://eslint.org/docs/rules/no-spaced-func
-    "no-trailing-spaces": 2,         // http://eslint.org/docs/rules/no-trailing-spaces
-    "no-wrap-func": 2,               // http://eslint.org/docs/rules/no-wrap-func
-    "no-underscore-dangle": 0,       // http://eslint.org/docs/rules/no-underscore-dangle
-    "one-var": [2, "never"],         // http://eslint.org/docs/rules/one-var
-    "padded-blocks": 0,   // http://eslint.org/docs/rules/padded-blocks
-    "semi": [2, "always"],           // http://eslint.org/docs/rules/semi
-    "semi-spacing": [2, {            // http://eslint.org/docs/rules/semi-spacing
-      "before": false,
-      "after": true
-    }],
-    "space-after-keywords": 2,       // http://eslint.org/docs/rules/space-after-keywords
-    "space-before-blocks": 2,        // http://eslint.org/docs/rules/space-before-blocks
-    "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
-    "space-infix-ops": 2,            // http://eslint.org/docs/rules/space-infix-ops
-    "space-return-throw-case": 2,    // http://eslint.org/docs/rules/space-return-throw-case
-    "spaced-line-comment": 2         // http://eslint.org/docs/rules/spaced-line-comment
-  }
 }

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "requirePragma": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "parser": "flow"
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "eslint.autoFixOnSave": true,
+  "editor.formatOnSave": true
+}

README.md

@@ -6,7 +6,6 @@ A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px
 
 <img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />
 
-
 ### Content
 
 - [Installation](#installation)
@@ -15,21 +14,21 @@ A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px
 - [Example React Native app](#example-react-native-app)
 - [Questions?](#questions)
 
-
 ### Installation
 
 **NOTE:** Latest version of the package is available in npm as `react-native-blur@3.0.0-alpha`
 
 1. Install package via npm:
 
-  ```
+```
-  npm install react-native-blur
+npm install react-native-blur
-  ```
+```
 
 2. Link your native dependencies:
-  ```
+
-  react-native link react-native-blur
+```
-  ```
+react-native link react-native-blur
+```
 
 3. (Android only) Add the following to `android/app/build.gradle`
 
@@ -49,17 +48,16 @@ android {
 
 4. Include the library in your code:
 
-  ```javascript
+```javascript
-  import { BlurView, VibrancyView } from 'react-native-blur';
+import { BlurView, VibrancyView } from "react-native-blur";
 
-  // OR
+// OR
 
-  const { BlurView, VibrancyView } = require('react-native-blur');
+const { BlurView, VibrancyView } = require("react-native-blur");
-  ```
+```
 
 5. Compile and have fun!
 
-
 ### BlurView
 
 **Properties:**
@@ -79,9 +77,9 @@ android {
 > Complete usage example that works on iOS and Android:
 
 ```javascript
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
+import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
-import { BlurView } from 'react-native-blur';
+import { BlurView } from "react-native-blur";
 
 export default class Menu extends Component {
   constructor(props) {
@@ -104,8 +102,10 @@ export default class Menu extends Component {
           blurAmount={10}
         />
         <Image
-          ref={(img) => { this.backgroundImage = img; }}
+          ref={img => {
-          source={{uri}}
+            this.backgroundImage = img;
+          }}
+          source={{ uri }}
           style={styles.absolute}
           onLoadEnd={this.imageLoaded.bind(this)}
         />
@@ -116,13 +116,16 @@ export default class Menu extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
+    justifyContent: "center",
-    alignItems: 'center',
+    alignItems: "center"
   },
   absolute: {
     position: "absolute",
-    top: 0, left: 0, bottom: 0, right: 0,
+    top: 0,
-  },
+    left: 0,
+    bottom: 0,
+    right: 0
+  }
 });
 ```
 
@@ -139,12 +142,12 @@ Note that `viewRef` is only required if you need to support Android. See the [An
 > (Note: `VibrancyView` is only supported on iOS. Also note that the `VibrancyView` must contain nested views.)
 
 ```javascript
-import { VibrancyView } from 'react-native-blur';
+import { VibrancyView } from "react-native-blur";
 
 export default class Menu extends Component {
   render() {
     return (
-      <Image source={{uri}} style={styles.absolute}>
+      <Image source={{ uri }} style={styles.absolute}>
         <VibrancyView blurType="light" style={styles.flex}>
           <Text>Hi, I am some vibrant text.</Text>
         </VibrancyView>
@@ -160,17 +163,16 @@ Android uses the [500px-android-blur](https://github.com/500px/500px-android-blu
 
 The Android library introduces some limitations:
 
-* `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
+- `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
-* `BlurView` cannot contain any child components.
+- `BlurView` cannot contain any child components.
 
 If you only need to support iOS, then you can safely ignore these limitations.
 
 In addition to `blurType` and `blurAmount`, Android has some extra props that can be used to override the default behavior (or configure Android-specific behavior):
 
-- `blurRadius`       (Number - between 0 and 25) - Manually adjust the blur radius. (Default: matches iOS blurAmount)
+- `blurRadius` (Number - between 0 and 25) - Manually adjust the blur radius. (Default: matches iOS blurAmount)
 - `downsampleFactor` (Number - between 0 and 25) - Scales down the image before blurring (Default: matches iOS blurAmount)
-- `overlayColor`     (Color) - Set a custom overlay color (Default color based on iOS blurType)
+- `overlayColor` (Color) - Set a custom overlay color (Default color based on iOS blurType)
-
 
 ### Example React Native App
 
@@ -207,6 +209,7 @@ react-native run-ios
 #### Run the tvOS app
 
 type:
+
 ```
 react-native run-ios
 ```
@@ -237,12 +240,12 @@ That’s all, you can use react-native-blur for your tvOS application
 react-native run-android
 ```
 
-
 ### Troubleshooting
 
 On older instances of react-native, BlurView package does not get added into the MainActivity/MainApplication classes where you would see `Warning: Native component for 'BlurView' does not exist` in RN YellowBox or console.
 
 To rectify this, you can add the BlurViewPackage manually in MainActivity/MainApplication classes
+
 ```java
 ...
 import com.cmcewen.blurview.BlurViewPackage;
@@ -261,7 +264,6 @@ public class MainApplication extends Application implements ReactApplication {
 }
 ```
 
-
 ### Questions?
 
 Feel free to contact me in [twitter](https://twitter.com/kureevalexey) or [create an issue](https://github.com/Kureev/react-native-blur/issues/new)

examples/Basic/__tests__/index.android.js

@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.android.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
-});

examples/Basic/__tests__/index.ios.js

@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.ios.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
-});

examples/Basic/index.android.js

@@ -50,7 +50,7 @@ class Basic extends Component {
 
   renderBlurView() {
     const tintColor = ['#ffffff', '#000000'];
-    if (this.state.blurType === 'xlight') tintColor.reverse();
+    if (this.state.blurType === 'xlight') {tintColor.reverse();}
 
     return (
       <View style={styles.container}>
@@ -81,12 +81,12 @@ class Basic extends Component {
             alignItems: 'center',
           }}
           childText={BLUR_TYPES}
-          orientation='horizontal'
+          orientation="horizontal"
           selectedPosition={this.state.activeSegment}
           onChange={this._onChange.bind(this)} />
 
       </View>
-    )
+    );
   }
 
   render() {

examples/Basic/index.ios.js

@@ -2,7 +2,7 @@
  * Basic [iOS] Example for react-native-blur
  * https://github.com/react-native-community/react-native-blur
  */
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
@@ -11,13 +11,13 @@ import {
   View,
   SegmentedControlIOS,
   Switch,
-} from 'react-native'
+} from 'react-native';
 
-import { BlurView, VibrancyView } from 'react-native-blur'
+import { BlurView, VibrancyView } from 'react-native-blur';
 
 class Basic extends Component {
   constructor(props) {
-    super(props)
+    super(props);
 
     this.state = {
       showBlurs: true,
@@ -25,23 +25,23 @@ class Basic extends Component {
       blurActiveSegment: 1,
       vibrancyBlurType: 'dark',
       vibrancyActiveSegment: 2,
-    }
+    };
   }
 
   _onBlurChange(event) {
-    this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex})
+    this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex});
   }
 
   _onBlurValueChange(value) {
-    this.setState({blurBlurType: value})
+    this.setState({blurBlurType: value});
   }
 
   _onVibrancyChange(event) {
-    this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex})
+    this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex});
   }
 
   _onVibrancyValueChange(value) {
-    this.setState({vibrancyBlurType: value})
+    this.setState({vibrancyBlurType: value});
   }
 
   renderBlurs() {
@@ -69,8 +69,8 @@ class Basic extends Component {
           <SegmentedControlIOS
             values={['xlight', 'light', 'dark', 'regular', 'prominent']}
             selectedIndex={this.state.blurActiveSegment}
-            onChange={(event) => {this._onBlurChange(event)}}
+            onChange={(event) => {this._onBlurChange(event);}}
-            onValueChange={(value) => {this._onBlurValueChange(value)}}
+            onValueChange={(value) => {this._onBlurValueChange(value);}}
             tintColor={tintColor}
           />
         </View>
@@ -91,13 +91,13 @@ class Basic extends Component {
           <SegmentedControlIOS
             values={['xlight', 'light', 'dark', 'regular', 'prominent']}
             selectedIndex={this.state.vibrancyActiveSegment}
-            onChange={(event) => {this._onVibrancyChange(event)}}
+            onChange={(event) => {this._onVibrancyChange(event);}}
-            onValueChange={(value) => {this._onVibrancyValueChange(value)}}
+            onValueChange={(value) => {this._onVibrancyValueChange(value);}}
             tintColor="white"
           />
         </VibrancyView>
       </View>
-    )
+    );
   }
 
   render() {
@@ -106,7 +106,7 @@ class Basic extends Component {
         style={styles.container}>
         <Image
           source={require('./bgimage.jpeg')}
-          resizeMode='cover'
+          resizeMode="cover"
           style={styles.img}/>
 
         { this.state.showBlurs ? this.renderBlurs() : null }
@@ -163,7 +163,7 @@ const styles = StyleSheet.create({
     top: 30,
     right: 10,
     alignItems: 'flex-end',
-  }
+  },
 });
 
 AppRegistry.registerComponent('Basic', () => Basic);

index.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import * as React from "react";
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from "react-native";
 
 export interface BlurViewProperties {
   blurType:
-    | 'xlight'
+    | "xlight"
-    | 'light'
+    | "light"
-    | 'dark'
+    | "dark"
     // tvOS only
-    | 'extraDark'
+    | "extraDark"
-    | 'regular'
+    | "regular"
-    | 'prominent';
+    | "prominent";
   blurAmount?: number; // 0 - 100
   style?: StyleProp<ViewStyle>;
   viewRef?: number | null;

index.js

@@ -2,6 +2,6 @@ const BlurView = require('./src/BlurView');
 const VibrancyView = require('./src/VibrancyView');
 
 module.exports = {
-    BlurView: BlurView,
+  BlurView: BlurView,
-    VibrancyView: VibrancyView,
+  VibrancyView: VibrancyView,
 };

package.json

@@ -4,7 +4,8 @@
   "description": "React Native Blur component",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint ."
   },
   "repository": {
     "type": "git",
@@ -23,5 +24,20 @@
   "homepage": "https://github.com/react-native-community/react-native-blur",
   "dependencies": {
     "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^0.0.3",
+    "eslint": "^5.15.3",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "prettier": "1.16.4"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": ["prettier --write", "git add"]
   }
 }

src/BlurView.android.js

@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, requireNativeComponent, DeviceEventEmitter, ViewPropTypes } from 'react-native';
+import {
+  View,
+  requireNativeComponent,
+  DeviceEventEmitter,
+  ViewPropTypes,
+} from 'react-native';
 
 const OVERLAY_COLORS = {
   light: 'rgba(255, 255, 255, 0.2)',
@@ -8,10 +13,9 @@ const OVERLAY_COLORS = {
   dark: 'rgba(16, 12, 12, 0.64)',
 };
 
-
 class BlurView extends Component {
   componentWillMount() {
-    DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
+    DeviceEventEmitter.addListener('ReactNativeBlurError', message => {
       throw new Error(`[ReactNativeBlur]: ${message}`);
     });
   }
@@ -21,7 +25,9 @@ class BlurView extends Component {
   }
 
   overlayColor() {
-    if (this.props.overlayColor != null) return this.props.overlayColor;
+    if (this.props.overlayColor != null) {
+      return this.props.overlayColor;
+    }
     return OVERLAY_COLORS[this.props.blurType] || OVERLAY_COLORS.dark;
   }
 
@@ -30,7 +36,9 @@ class BlurView extends Component {
 
     if (blurRadius != null) {
       if (blurRadius > 25) {
-        throw new Error(`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`);
+        throw new Error(
+          `[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`
+        );
       }
       return blurRadius;
     }
@@ -39,13 +47,17 @@ class BlurView extends Component {
     // Android blurRadius + downsampleFactor is approximately 80% of blurAmount.
     const equivalentBlurRadius = Math.round(blurAmount * 0.8);
 
-    if (equivalentBlurRadius > 25) return 25;
+    if (equivalentBlurRadius > 25) {
+      return 25;
+    }
     return equivalentBlurRadius;
   }
 
   downsampleFactor() {
     const { downsampleFactor, blurRadius } = this.props;
-    if (downsampleFactor != null) return downsampleFactor;
+    if (downsampleFactor != null) {
+      return downsampleFactor;
+    }
     return blurRadius;
   }
 
@@ -53,8 +65,9 @@ class BlurView extends Component {
     if (this.props.children != null) {
       throw new Error(
         '[ReactNativeBlur]: BlurView cannot contain any child views on Android. ' +
-        'You should use "position: absolute" on the BlurView, ' +
+          'You should use "position: absolute" on the BlurView, ' +
-        'and place other views in front of it.');
+          'and place other views in front of it.'
+      );
     }
 
     const { viewRef, style } = this.props;
@@ -65,10 +78,7 @@ class BlurView extends Component {
         blurRadius={this.blurRadius()}
         downsampleFactor={this.downsampleFactor()}
         overlayColor={this.overlayColor()}
-        style={[
+        style={[{ backgroundColor: 'transparent' }, style]}
-          { backgroundColor: 'transparent' },
-          style,
-        ]}
       />
     );
   }

src/BlurView.ios.js

@@ -7,17 +7,14 @@ class BlurView extends Component {
     if (this._root) {
       this._root.setNativeProps(nativeProps);
     }
-  }
+  };
 
   render() {
     return (
       <NativeBlurView
-        ref={e => this._root = e}
+        ref={e => (this._root = e)}
         {...this.props}
-        style={[
+        style={[{ backgroundColor: 'transparent' }, this.props.style]}
-          { backgroundColor: 'transparent' },
-          this.props.style,
-        ]}
       />
     );
   }

src/VibrancyView.android.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 class VibrancyView extends React.Component {
   render() {
-    console.error("VibrancyView is not implemented on Android");
+    console.error('VibrancyView is not implemented on Android');
   }
 }
 
-module.exports = VibrancyView
+module.exports = VibrancyView;

src/VibrancyView.ios.js

@@ -7,15 +7,17 @@ class VibrancyView extends Component {
     if (this._root) {
       this._root.setNativeProps(nativeProps);
     }
-  }
+  };
 
   render() {
     return (
       <NativeVibrancyView
         {...this.props}
-        style={[{
+        style={[
-          backgroundColor: 'transparent',
+          {
-        }, this.props.style,
+            backgroundColor: 'transparent',
+          },
+          this.props.style,
         ]}
       />
     );