Add README back

This commit is contained in:
Kureev Alexey 2015-10-05 22:47:33 +02:00
parent 870c08a32d
commit c65add6819
1 changed files with 70 additions and 0 deletions

70
README.md Normal file
View File

@ -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)