mirror of
https://github.com/status-im/react-native-blur.git
synced 2025-01-12 01:24:10 +00:00
Arno Fortelny
cd3e9eae2e
Update react-native-blur.podspec
The version here must be kept in sync with the version in package.json for Cocoapods to correctly install the new version.
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
Questions?
Feel free to contact me in twitter or create an issue
Languages
TypeScript
34%
Objective-C++
31.4%
Java
18.1%
Objective-C
7.5%
JavaScript
5.4%
Other
3.6%