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

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

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.
3. Inside your code include JS part by adding

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

5. Compile and have fun!

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

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.

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

• 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