React Native Blur component using blurry in android
npm install react-native-blurry
```
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. 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 intensityNote:
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()
);
}
...
}
``