react-native-blurview

android: api 21+
ios : 10.0+
web: backdrop

Example -> Demo

Getting started

$ npm install react-native-realtimeblurview --save
$ react-native link react-native-realtimeblurview

or

$ yarn add react-native-realtimeblurview

Usage

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
<BlurRootView  
 name="myNode"
>

    <View style={{backgroundColor:'red'}}>
   

 
      <BlurView  
        blurNode="myNode" 

      >
          <OverlayView style={{backgroundColor:'myColor'}} />
      </BlurView>
      


</BlurRootView>

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