status-im
/
react-native-blur
mirror of https://github.com/status-im/react-native-blur.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update README.md 

Change installation instructions so it's more difficult to miss the crucial android part
This commit is contained in:
Tom Nash 2017-01-06 23:16:49 +00:00 committed by GitHub
parent 977e8820c1
commit 5b47f940ca
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
README.md
View File

@ -25,7 +25,36 @@ Check the [roadmap here](https://github.com/Kureev/react-native-blur/issues/1)
``` ```
react-native link react-native-blur react-native link react-native-blur
``` ```
3. Inside your code include JS part by adding 3. (Android only) Add the following to your `android/app/build.gradle`
```
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'
}
}
```
4. Inside your code include JS part by adding
```javascript ```javascript
const { BlurView, VibrancyView } = require('react-native-blur'); const { BlurView, VibrancyView } = require('react-native-blur');
@ -92,35 +121,7 @@ const Menu = React.createClass({
### Android ### 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 support uses an [external library](https://github.com/500px/500px-android-blur) 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.
```
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. 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.