Add README back
This commit is contained in:
parent
870c08a32d
commit
c65add6819
|
@ -0,0 +1,70 @@
|
|||
### 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 name ➜ `Add Files to <...>`
|
||||
3. Go to `node_modules` ➜ `react-native-blur` ➜ add `RNBlur` and `RNVibrancy` folders (should looks [like this](https://cloud.githubusercontent.com/assets/2273613/8785102/b64460d2-2f25-11e5-8ec1-912e9a6e0bc8.png))
|
||||
4. 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
|
||||
var BlurView = require('react-native-blur').BlurView;
|
||||
|
||||
var Menu = React.createClass({
|
||||
render: function() {
|
||||
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
|
||||
var VibrancyView = require('react-native-blur').VibrancyView;
|
||||
|
||||
var Menu = React.createClass({
|
||||
render: function() {
|
||||
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)
|
Loading…
Reference in New Issue