React Native Blur

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

Content

• Installation
• Usage example
  • Blur view
  • Vibrancy view
• Component properties
• Questions?

Installation

1. Install package via npm:

npm install react-native-blur

2. Link your library by one of those ways: either by using rnpm link (see more about rnpm here) or like it's described here. Don't forget to add it to Build Phases of your project!
3. Inside your code include JS part by adding

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

5. Compile and have fun!

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:

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

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

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

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>
    );
  }
});

Component properties

• blurType (String) - blur type effect
  • xlight - extra light blur type
  • light - light blur type
  • dark - dark blur type

Questions?

Feel free to contact me in twitter or create an issue