47dfe40b6a
Used imports instead of require. Simplified imports and removed unused component View. Background is now a const instead of var. <- ES6 prefers this Removed dangling comma after background ```source={{uri: background, }}``` Generally example is more succinct and easier to understand for users only exposed to the new tools of ES6. |
||
---|---|---|
android | ||
examples/Basic | ||
ios | ||
src | ||
.eslintrc | ||
.flowconfig | ||
.gitignore | ||
.npmignore | ||
.watchmanconfig | ||
README.md | ||
index.js | ||
package.json | ||
react-native-blur.podspec |
README.md
React Native Blur
Component implementation for UIVisualEffectView's blur and vibrancy effect.
Check the roadmap here
Content
Installation
- Install package via npm:
npm install react-native-blur
- Link your library by one of those ways: either by using
rnpm link
(see more about rnpm here) or like it's described here. - Inside your code include JS part by adding
const { BlurView, VibrancyView } = require('react-native-blur');
- Compile and have fun!
Usage example
You can run built-in example via few simple steps:
- Clone repository
- Go to
examples/Basic
- Run
npm install && open Basic.xcodeproj
- Hit "Run"(
cmd+R
) button on XCode panel
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:
const { BlurView } = require('react-native-blur');
const Menu = React.createClass({
render() {
return (
<Image source={{uri}} style={styles.menu}>
<BlurView blurType="light" style={styles.blur}>
<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
const { VibrancyView } = require('react-native-blur');
const Menu = React.createClass({
render() {
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 effectxlight
- extra light blur typelight
- light blur typedark
- dark blur type
Android
Android support uses an external library 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 blurblurRadius
(Number)downsampleFactor
(Number)overlayColor
(Color)
Questions?
Feel free to contact me in twitter or create an issue