JSPM – react-native-blur@0.3.1

Package Exports

react-native-blur

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Blur

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

Installation

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

Usage example

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.

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:

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.

Vibrancy View

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

Questions?

Feel free to contact me in twitter or create an issue