diff --git a/README.md b/README.md new file mode 100644 index 0000000..6b2577d --- /dev/null +++ b/README.md @@ -0,0 +1,70 @@ +### React Native Blur +Component implementation for UIVisualEffectView's blur and vibrancy effect.
+Check the [roadmap here](https://github.com/Kureev/react-native-blur/issues/1) + + + +### 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 `` tag inside render function as it's done below: +```javascript +var BlurView = require('react-native-blur').BlurView; + +var Menu = React.createClass({ + render: function() { + return ( + + + Hi, I am a tiny menu item + + + ); + } +}); +``` + +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 ( + + + Hi, I am a tiny menu item + + + ); + } +}); +``` + +### 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)