2016-09-26 06:57:31 +00:00
[![npm version ](https://badge.fury.io/js/react-native-blur.svg )](https://badge.fury.io/js/react-native-blur)
2015-10-05 20:47:33 +00:00
### React Native Blur
Component implementation for UIVisualEffectView's blur and vibrancy effect.< br >
Check the [roadmap here ](https://github.com/Kureev/react-native-blur/issues/1 )
2016-11-09 09:52:27 +00:00
< img src = 'https://cloud.githubusercontent.com/assets/5795227/20123354/d877dba4-a61e-11e6-8e5a-c85f76419e20.gif' / >
2015-10-05 20:47:33 +00:00
### Content
- [Installation ](#installation )
- [Usage example ](#usage-example )
- [Blur view ](#blur-view )
- [Vibrancy view ](#vibrancy-view )
- [Component properties ](#component-properties )
- [Questions? ](#questions )
### Installation
2015-10-05 22:19:51 +00:00
1. Install package via npm:
```
npm install react-native-blur
```
2016-12-09 21:59:34 +00:00
2. Link your native dependencies:
```
2016-12-10 14:54:04 +00:00
react-native link react-native-blur
2016-12-09 21:59:34 +00:00
```
2015-10-05 22:19:51 +00:00
3. Inside your code include JS part by adding
2015-10-05 20:53:37 +00:00
```javascript
const { BlurView, VibrancyView } = require('react-native-blur');
```
5. Compile and have fun!
2015-10-05 20:47:33 +00:00
### Usage example
2015-10-05 22:19:51 +00:00
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
2015-10-05 20:47:33 +00:00
#### 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:
2015-10-05 22:19:51 +00:00
2015-10-05 20:47:33 +00:00
```javascript
2015-10-05 20:56:18 +00:00
const { BlurView } = require('react-native-blur');
2015-10-05 20:47:33 +00:00
2015-10-05 20:56:18 +00:00
const Menu = React.createClass({
render() {
2015-10-05 20:47:33 +00:00
return (
< Image source = {{uri}} style = {styles.menu} >
2016-10-28 01:52:26 +00:00
< BlurView blurType = "light" blurAmount = {10} style = {styles.blur} >
2015-10-05 20:47:33 +00:00
< 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
```javascript
2015-10-05 20:56:18 +00:00
const { VibrancyView } = require('react-native-blur');
2015-10-05 20:47:33 +00:00
2015-10-05 20:56:18 +00:00
const Menu = React.createClass({
render() {
2015-10-05 20:47:33 +00:00
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
2016-10-31 15:11:40 +00:00
- `blurAmount` (Default: 10, Number) - blur amount effect
2016-10-28 01:52:26 +00:00
- `0-100` - Adjusts blur intensity
2015-10-05 20:47:33 +00:00
2016-10-28 01:52:26 +00:00
*Note: `blurAmount` does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes*
2016-06-13 20:48:20 +00:00
### Android
Android support uses an [external library ](https://github.com/500px/500px-android-blur ) which has slightly different properties and setup requirements. You must add the following to the `android/app/build.gradle` file:
```
android {
...
defaultConfig {
...
renderscriptTargetApi 20
renderscriptSupportModeEnabled true
}
}
repositories {
maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}
dependencies {
...
compile project(':react-native-blur')
}
buildscript {
repositories {
maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}
dependencies {
classpath 'com.fivehundredpx:blurringview:1.0.0'
}
}
```
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)
- `overlayColor` (Color)
2016-08-20 14:32:22 +00:00
#### 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< ReactPackage > getPackages() {
return Arrays.< ReactPackage > asList(
2016-10-28 01:52:26 +00:00
new MainReactPackage(),
2016-08-20 14:32:22 +00:00
new BlurViewPackage()
);
}
...
}
```
2015-10-05 20:47:33 +00:00
### Questions?
Feel free to contact me in [twitter ](https://twitter.com/kureevalexey ) or [create an issue ](https://github.com/Kureev/react-native-blur/issues/new )