react-native-blur - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0-alpha

package.json

 {
   "name": "react-native-blur",
-  "version": "2.0.0",
+  "version": "3.0.0-alpha",
   "description": "React Native Blur component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 [![npm version](https://badge.fury.io/js/react-native-blur.svg)](https://badge.fury.io/js/react-native-blur)
 
 ### React Native Blur
-Component implementation for UIVisualEffectView's blur and vibrancy effect.<br>
-Check the [roadmap here](https://github.com/Kureev/react-native-blur/issues/1)
 
-<img src='https://cloud.githubusercontent.com/assets/5795227/20123354/d877dba4-a61e-11e6-8e5a-c85f76419e20.gif' />
+A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px-android-blur](https://github.com/500px/500px-android-blur) on Android.<br>
 
+<img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />
+
+
 ### Content
+
 - [Installation](#installation)
-- [Usage example](#usage-example)
-  - [Blur view](#blur-view)
-  - [Vibrancy view](#vibrancy-view)
-- [Component properties](#component-properties)
+- [BlurView](#blurview)
+- [VibrancyView](#vibrancyview)
+- [Example React Native app](#example-react-native-app)
 - [Questions?](#questions)
 
+
 ### Installation
+
 1. Install package via npm:
@@ -28,5 +31,23 @@
   ```
-3. Inside your code include JS part by adding
 
+3. (Android only) Add the following to `android/app/build.gradle`
+
+```
+android {
+    // ...
+    defaultConfig {
+        // Add these lines below the existing config
+        renderscriptTargetApi 23
+        renderscriptSupportModeEnabled true
+    }
+}
+```
+
+4. Include the library in your code:
+
   ```javascript
+  import { BlurView, VibrancyView } from 'react-native-blur';
+
+  // OR
+
   const { BlurView, VibrancyView } = require('react-native-blur');
@@ -37,42 +58,87 @@ ```
 
-### Usage example
-You can run built-in example via few simple steps:
-1. Clone repository
-2. Go to `examples/Basic`
-3. Run `npm install && open Basic.xcodeproj`
-4. Hit "Run"(`cmd+R`) button on XCode panel
 
-#### Blur View
-To use `blur` view, you need to require `BlurView` to your module and insert `<BlurView>` tag inside render function as it's done below:
+### BlurView
 
+**Properties:**
+
+- `blurType` (String)
+  - `xlight` - extra light blur type
+  - `light` - light blur type
+  - `dark` - dark blur type
+- `blurAmount` (Default: 10, Number)
+  - `0-100` - Adjusts blur intensity
+
+> Note: The maximum `blurAmount` on Android is 32, so higher values will be clamped to 32.
+
+> Complete usage example that works on iOS and Android:
+
 ```javascript
-const { BlurView } = require('react-native-blur');
+import React, { Component } from 'react';
+import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
+import { BlurView } from 'react-native-blur';
 
-const Menu = React.createClass({
+export default class Menu extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { viewRef: null };
+  }
+
+  imageLoaded() {
+    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
+  }
+
   render() {
     return (
-      <Image source={{uri}} style={styles.menu}>
-        <BlurView blurType="light" blurAmount={10} style={styles.blur}>
-          <Text>Hi, I am a tiny menu item</Text>
-        </BlurView>
-      </Image>
+      <View style={styles.container}>
+        <Image
+          ref={(img) => { this.backgroundImage = img; }}
+          source={{uri}}
+          style={styles.absolute}
+          onLoadEnd={this.imageLoaded.bind(this)}
+        />
+        <BlurView
+          style={styles.absolute}
+          viewRef={this.state.viewRef}
+          blurType="light"
+          blurAmount={10}
+        />
+        <Text>Hi, I am some unblurred text</Text>
+      </View>
     );
   }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  absolute: {
+    position: "absolute",
+    top: 0, left: 0, bottom: 0, right: 0,
+  },
 });
 ```
 
-In this example, `Image` component will be blurred, a `BlurView` content will stay untouched.
+In this example, the `Image` component will be blurred, because the `BlurView` in positioned on top. But the `Text` will stay unblurred.
 
-#### Vibrancy View
+Note that `viewRef` is only required if you need to support Android. See the [Android section](#android) for more details.
+
+### VibrancyView
+
+**Uses the same properties as `BlurView` (`blurType` and `blurAmount`).**
+
 > The vibrancy effect lets the content underneath a blurred view show through more vibrantly
 
+> (Note: `VibrancyView` is only supported on iOS. Also note that the `VibrancyView` must contain nested views.)
+
 ```javascript
-const { VibrancyView } = require('react-native-blur');
+import { VibrancyView } from 'react-native-blur';
 
-const Menu = React.createClass({
+export default class Menu extends Component {
   render() {
     return (
-      <Image source={{uri}} style={styles.menu}>
-        <VibrancyView blurType="light" style={styles.blur}>
-          <Text>Hi, I am a tiny menu item</Text>
+      <Image source={{uri}} style={styles.absolute}>
+        <VibrancyView blurType="light" style={styles.flex}>
+          <Text>Hi, I am some vibrant text.</Text>
         </VibrancyView>
@@ -82,56 +148,64 @@ </Image>
   }
-});
+}
 ```
 
-### Component properties
-- `blurType` (String) - blur type effect
-  - `xlight` - extra light blur type
-  - `light` - light blur type
-  - `dark` - dark blur type
-- `blurAmount` (Default: 10, Number) - blur amount effect
-  - `0-100` - Adjusts blur intensity
+### Android
 
-*Note: `blurAmount` does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes*
+Android uses the [500px-android-blur](https://github.com/500px/500px-android-blur) library, which works by blurring a referenced view. This means that you must wait until the view you want to blur is rendered. You then use `findNodeHandle` to get a reference to that view, and pass that reference to the `BlurView` as the `viewRef` prop. Take a look at [the BlurView example](#blurview) to see how it works.
 
-### Android
+The Android library introduces some limitations:
 
-Android support uses an [external library](https://github.com/500px/500px-android-blur) which has slightly different properties and setup requirements. You must add the following to the `android/app/build.gradle` file:
+* `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
+* `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)
+- `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)
+
+
+### Example React Native App
+
+This project includes an example React Native app, which was used to make the GIF in this README.
+You can run the apps by following these steps:
+
+1. Clone the repository
+
 ```
-android {
-  ...
-  defaultConfig {
-    ...
-    renderscriptTargetApi 20
-    renderscriptSupportModeEnabled true
-  }
-}
+cd ~
+git clone https://github.com/react-native-community/react-native-blur.git
+```
 
-repositories {
-    maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
-}
+2. cd to `examples/Basic`
 
-dependencies {
-  ...
-  compile project(':react-native-blur')
-}
+```
+cd react-native-blur/examples/Basic
+```
 
-buildscript {
-    repositories {
-        maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
-    }
-    dependencies {
-        classpath 'com.fivehundredpx:blurringview:1.0.0'
-    }
-}
+3. Install dependencies
+
 ```
+npm install
+```
 
-The android BlurView works by blurring an existing referenced view, so you must wait till the view you want to blur is rendered and then provide the reference to the BlurView as the `viewRef` prop. Take a look at the example to see how it works.
+4. Run the apps:
 
-It has the following props:
-- `viewRef` (Number) - a reference to the existing view you want to blur
-- `blurRadius` (Number)
-- `downsampleFactor` (Number)
-- `overlayColor` (Color)
+#### Run the iOS app
 
-#### Troubleshooting
+```
+react-native run-ios
+```
+
+#### Run the Android app
+
+```
+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.
@@ -158,3 +232,5 @@
 
+
 ### 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)

src/BlurView.android.js

 import React, { Component, PropTypes } from 'react';
-import { View, requireNativeComponent } from 'react-native';
+import { View, requireNativeComponent, DeviceEventEmitter, } from 'react-native';
 
+const OVERLAY_COLORS = {
+  light: 'rgba(255, 255, 255, 0.2)',
+  xlight: 'rgba(255, 255, 255, 0.75)',
+  dark: 'rgba(16, 12, 12, 0.64)',
+};
+
+
 class BlurView extends Component {
+  componentWillMount() {
+    DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
+      throw new Error(`[ReactNativeBlur]: ${message}`);
+    });
+  }
+
+  componentWillUnmount() {
+    DeviceEventEmitter.removeAllListeners('ReactNativeBlurError');
+  }
+
+  overlayColor() {
+    if (this.props.overlayColor != null) return this.props.overlayColor;
+    return OVERLAY_COLORS[this.props.blurType] || OVERLAY_COLORS.dark;
+  }
+
+  blurRadius() {
+    const { blurRadius, blurAmount } = this.props;
+
+    if (blurRadius != null) {
+      if (blurRadius > 25) {
+        throw new Error(`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`);
+      }
+      return blurRadius;
+    }
+
+    // iOS seems to use a slightly different blurring algorithm (or scale?).
+    // Android blurRadius + downsampleFactor is approximately 80% of blurAmount.
+    const equivalentBlurRadius = Math.round(blurAmount * 0.8);
+
+    if (equivalentBlurRadius > 25) return 25;
+    return equivalentBlurRadius;
+  }
+
+  downsampleFactor() {
+    const { downsampleFactor, blurRadius } = this.props;
+    if (downsampleFactor != null) return downsampleFactor;
+    return blurRadius;
+  }
+
   render() {
+    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, ' +
+        'and place other views in front of it.');
+    }
+
+    const { viewRef, style } = this.props;
+
     return (
       <NativeBlurView
-        {...this.props}
-        style={[{
-          backgroundColor: 'transparent',
-        }, this.props.style
+        viewRef={viewRef}
+        blurRadius={this.blurRadius()}
+        downsampleFactor={this.downsampleFactor()}
+        overlayColor={this.overlayColor()}
+        style={[
+          { backgroundColor: 'transparent' },
+          style,
         ]}
@@ -20,10 +78,18 @@ />
   ...View.propTypes,
+  blurAmount: PropTypes.number,
+  blurType: PropTypes.oneOf(['dark', 'light', 'xlight']),
+
   blurRadius: PropTypes.number,
+  downsampleFactor: PropTypes.number,
   overlayColor: PropTypes.string,
-  downsampleFactor: PropTypes.number,
-  viewRef: PropTypes.number
+  viewRef: PropTypes.number.isRequired,
 };
 
+BlurView.defaultProps = {
+  blurType: 'dark',
+  blurAmount: 10,
+};
+
 const NativeBlurView = requireNativeComponent('BlurView', BlurView);
 
 module.exports = BlurView;

src/BlurView.ios.js

 import React, { Component, PropTypes } from 'react';
-import { requireNativeComponent } from 'react-native';
+import { View, requireNativeComponent } from 'react-native';
 
@@ -9,5 +9,5 @@ class BlurView extends Component {
         {...this.props}
-        style={[{
-          backgroundColor: 'transparent',
-        }, this.props.style
+        style={[
+          { backgroundColor: 'transparent' },
+          this.props.style,
         ]}
@@ -20,7 +20,9 @@ />
 BlurView.propTypes = {
-  blurType: PropTypes.string,
-  blurAmount: PropTypes.number.isRequired,
+  ...View.propTypes,
+  blurType: PropTypes.oneOf(['dark', 'light', 'xlight']),
+  blurAmount: PropTypes.number,
 };
 
 BlurView.defaultProps = {
+  blurType: 'dark',
   blurAmount: 10,
@@ -27,0 +29,0 @@ };

src/VibrancyView.ios.js

@@ -11,3 +11,3 @@ import React, { Component, PropTypes } from 'react';
           backgroundColor: 'transparent',
-        }, this.props.style
+        }, this.props.style,
         ]}
@@ -21,6 +21,11 @@ />
   blurType: PropTypes.string,
+  blurAmount: PropTypes.number.isRequired,
 };
 
+VibrancyView.defaultProps = {
+  blurAmount: 10,
+};
+
 const NativeVibrancyView = requireNativeComponent('VibrancyView', VibrancyView);
 
 module.exports = VibrancyView;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65337

increased by70.52%

Number of package files

35

increased by25%

Lines of code

139

increased by71.6%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

233

increased by48.41%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes