This is a fork of react-native-blurry changing it's ANDROID library to BLURRY.

$3

Component implementation for UIVisualEffectView's blur and vibrancy effect.

Check the roadmap here

$3

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

$3

1. Install package via npm:

``
npm install react-native-blurry
`

2. Link your native dependencies:
`
react-native link react-native-blurry
`
4. Inside your code include JS part by adding

`javascript
const { BlurView, VibrancyView } = require('react-native-blurry');
`

5. Compile and have fun!

$3


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 tag inside render function as it's done below:

`javascript
const { BlurView } = require('react-native-blurry');

const Menu = React.createClass({
render() {
return (


Hi, I am a tiny menu item


);
}
});
`

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

`javascript
const { VibrancyView } = require('react-native-blurry');

const Menu = React.createClass({
render() {
return (


Hi, I am a tiny menu item


);
}
});
`

$3


- blurType (String) - blur type effect
- xlight - extra light blur type
- light - light blur type
- dark - dark blur type
- blurAmount (Default: 10, Number) - blur amount effect
- 0-100 - Adjusts blur intensity

Note: blurAmount does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes

$3

Android support uses an external library which has slightly different properties and setup requirements. This is why extra code must be added manually to the android/app/build.gradle file as documented above.

You need to add this to your build.gradle

`java
dependencies {
....Some code here...
//NEW BLUR
compile 'jp.wasabeef:blurry:2.1.0'
...More code here...
}
`

The android BlurView works by blurring an existing referenced view, so you must wait till the view you want to blur is rendered and then provide the reference to the BlurView as the viewRef prop. Take a look at the example to see how it works.

It has the following props:
- viewRef (Number) - a reference to the existing view you want to blur
- blurRadius (Number)
- downsampleFactor (Number)

#### Troubleshooting
On older instances of react-native, BlurView package does not get added into the MainActivity/MainApplication classes where you would see Warning: Native component for 'BlurView' does not exist in RN YellowBox or console.

To rectify this, you can add the BlurViewPackage manually in MainActivity/MainApplication classes
`java
...
import com.cmcewen.blurview.BlurViewPackage;
...

public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new BlurViewPackage()
);
}
...
}
``