https://github.com/only-icesoul/react-native-blurview
Real time blur Android Web IOS
https://github.com/only-icesoul/react-native-blurview
android backdrop blur blurview drop fast fastblur ios react-native-web reactjs real realtime visual visualeffect web
Last synced: 2 months ago
JSON representation
Real time blur Android Web IOS
- Host: GitHub
- URL: https://github.com/only-icesoul/react-native-blurview
- Owner: Only-IceSoul
- License: mit
- Created: 2021-09-18T17:43:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-28T14:59:13.000Z (over 3 years ago)
- Last Synced: 2024-10-16T02:33:10.822Z (7 months ago)
- Topics: android, backdrop, blur, blurview, drop, fast, fastblur, ios, react-native-web, reactjs, real, realtime, visual, visualeffect, web
- Language: Java
- Homepage:
- Size: 115 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-blurview
android: api 21+
ios : 10.0+
web: [backdrop](https://caniuse.com/?search=backdrop)
Example -> [Demo](https://github.com/Only-IceSoul/canal/tree/master/react-native/Car%20Insurance%20Claim)
## Getting started
`$ npm install react-native-realtimeblurview --save`
`$ react-native link react-native-realtimeblurview`
or
`$ yarn add react-native-realtimeblurview`
## Usage
```javascript
import {BlurView , BlurRootView } from 'react-native-realtimeblurview';
// TODO: What to do with the module?
//(Android) require a blurRootView ,improve perfmonace
//(Android) Blurview must be a child of rootview
```
### Overlay Colors
| Name | rgb | a |
| --- | ---| --- |
| dark | 0.11 | 0.73 |
| light | 1 | 0.3 |
| extraLight | 0.91 | 0.8 |
### BlurView Props:
BlurView:
If your RootView has a lot of transparent set a backgroundColor (ios ignored)
| Name | description | type | default |
| --- | --- | --- | --- |
| blurNode | the root view | String | undefined |
| radius | the blur radius (android max 25) | Number | 10 |