ceane / react-native-blur

React Native Blur component

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 RNBlur library from node_modules/react-native-blur/ios folder 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