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

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

1. npm install react-native-blur
2. In the XCode's "Project navigator", right click on project's name ➜ Add Files to <...>
3. Go to node_modules ➜ react-native-blur ➜ add RNBlur and RNVibrancy folders
4. Compile and have fun!

First of all, if you don't want to read it, you can just clone the repo and go into examples/basic folder to try out working example.

To use blur view, you need to require BlurView to your module and insert <BlurView> tag inside render function as it's done below:

var BlurView = require('react-native-blur').BlurView;

var Menu = React.createClass({
  render: function() {
    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.

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

var VibrancyView = require('react-native-blur').VibrancyView;

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

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

Feel free to contact me in twitter or create an issue