77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
### 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)
|
|
|
|
<img src='http://oi62.tinypic.com/8x4u94.jpg' />
|
|
|
|
### Content
|
|
- [Installation](#installation)
|
|
- [Usage example](#usage-example)
|
|
- [Blur view](#blur-view)
|
|
- [Vibrancy view](#vibrancy-view)
|
|
- [Component properties](#component-properties)
|
|
- [Questions?](#questions)
|
|
|
|
### Installation
|
|
1. `npm install react-native-blur`
|
|
2. In the XCode's "Project navigator", right click on project's `Libraries` folder ➜ `Add Files to <...>`
|
|
3. Go to `node_modules/react-native-blur/ios` ➜ select `RNBlur` and click "add"
|
|
4. Inside your code include JS part by adding
|
|
|
|
```javascript
|
|
const { BlurView, VibrancyView } = require('react-native-blur');
|
|
```
|
|
|
|
5. Compile and have fun!
|
|
|
|
### Usage example
|
|
*First of all, if you don't want to read it, you can just clone the repo and go into `examples/basic` folder to try out working example.*
|
|
|
|
#### 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:
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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 effect
|
|
- `xlight` - extra light blur type
|
|
- `light` - light blur type
|
|
- `dark` - dark blur type
|
|
|
|
### 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)
|