status-im/react-native-blur
2
0
Fork 0
mirror of https://github.com/status-im/react-native-blur.git synced 2025-02-28 16:00:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #139 from morelazers/update-readme-for-android

Browse Source 
Update README.md
This commit is contained in:
Alexey 2017-01-08 13:09:33 +01:00 committed by GitHub
commit 36c128f3d7
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.