React Native Blur component
Go to file
Nathan Broadbent 90bcaf7786 Fixed react-native dependency to work with any version from the parent project 2017-04-14 21:50:10 +07:00
android Fixed react-native dependency to work with any version from the parent project 2017-04-14 21:50:10 +07:00
examples/Basic Regenerated and updated Basic examples for latest RN 2017-04-11 17:13:24 +07:00
ios Merge pull request #172 from eliperkins/vibrancy-refactor 2017-04-11 10:01:37 +02:00
src Added proper error messages when using BlurView incorrectly, and updated README. 2017-04-11 16:47:43 +07:00
.eslintrc Rebuild react-native-blur for RN-0.11.4 2015-10-05 22:42:23 +02:00
.flowconfig Rebuild react-native-blur for RN-0.11.4 2015-10-05 22:42:23 +02:00
.gitignore Regenerated and updated Basic examples for latest RN 2017-04-11 17:13:24 +07:00
.npmignore Rebuild react-native-blur for RN-0.11.4 2015-10-05 22:42:23 +02:00
.watchmanconfig Rebuild react-native-blur for RN-0.11.4 2015-10-05 22:42:23 +02:00
LICENSE Create LICENSE 2016-11-06 16:25:50 +01:00
README.md More clear installation documentation 2017-04-12 11:22:38 +02:00
index.js Rebuild react-native-blur for RN-0.11.4 2015-10-05 22:42:23 +02:00
package.json Release v2.0.0. 2017-01-06 11:07:57 +01:00
react-native-blur.podspec Update react-native-blur.podspec 2016-05-23 11:43:04 -04:00

README.md

npm version

React Native Blur

Component implementation for UIVisualEffectView's blur and vibrancy effect.
Check the roadmap here

Content

Installation

  1. Install package via npm:
npm install react-native-blur
  1. Link your native dependencies:
react-native link react-native-blur
  1. (Android only) Add the following to your android/app/build.gradle

android/build.gradle

  buildscript {
    dependencies {
        // Update "Android Plugin for Gradle" version
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
  }

  // ...

  allprojects {
    repositories {
        // Add the following in a new line, underneath "maven { url '$rootDir/../node_modules/react-native/android' }"
        maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
    }
}

android/app/build.gradle

dependencies {
    compile 'com.fivehundredpx:blurringview:1.0.0'
}


android {
    defaultConfig {
        // Add these to the existing config
        renderscriptTargetApi 23
        renderscriptSupportModeEnabled true
    }
}

android/gradle/wrapper/gradle-wrapper.properties

// Update Gradle version
distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
  1. Inside your code include JS part by adding
const { BlurView, VibrancyView } = require('react-native-blur');
  1. Compile and have fun!

Usage example

You can run the built-in examples by running these steps:

  1. Clone the repository
cd ~
git clone https://github.com/react-native-community/react-native-blur.git
  1. cd to examples/Basic
cd react-native-blur/examples/Basic
  1. Install dependencies
npm install
  1. Run the apps:

Run the iOS app

react-native run-ios

Run the Android app

react-native run-android

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:

const { BlurView } = require('react-native-blur');

const Menu = React.createClass({
  render() {
    return (
      <View>
        <Image source={{uri}} style={styles.menu} />
        <BlurView blurType="light" blurAmount={10} style={styles.blur} />
        <Text style={styles.text}>Hi, I am a tiny menu item</Text>
      </View>
    );
  }
});

In this example, Image component will be blurred, a BlurView content will stay untouched.

Note that if you need to support Android, the BlurView cannot be a child of the view that is being blurred, and it cannot contain any child components. See the Android section for more information.

Vibrancy View

The vibrancy effect lets the content underneath a blurred view show through more vibrantly

const { VibrancyView } = require('react-native-blur');

const Menu = React.createClass({
  render() {
    return (
      <Image source={{uri}} style={styles.menu}>
        <VibrancyView blurType="light" style={styles.blur}>
          <Text>Hi, I am a tiny menu item</Text>
        </VibrancyView>
      </Image>
    );
  }
});

Note: VibrancyView is only supported on iOS. It must contain child views, otherwise the effect does not work.

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

Note: blurAmount does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes

Android

Android support uses an external library which has slightly different properties and setup requirements. This is why extra code must be added manually to the android/app/build.gradle file as documented above.

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.

It has the following props:

  • viewRef (Number) - a reference to the existing view you want to blur
  • blurRadius (Number)
  • downsampleFactor (Number)
  • overlayColor (Color)

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

...
import com.cmcewen.blurview.BlurViewPackage;
...

public class MainApplication extends Application implements ReactApplication {
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new BlurViewPackage()
      );
    }
...
}

Questions?

Feel free to contact me in twitter or create an issue