Blurry overlay for react-native android
This is very experimental
A react native android module to add a blurry overlay.
Setup
- install module
npm i --save react-native-android-blurryoverlay
android/settings.gradle
...include ':react-native-android-blurryoverlay'project(':react-native-android-blurryoverlay').projectDir = new File(settingsDir, '../node_modules/react-native-android-blurryoverlay')
android/app/build.gradle
...android { ... defaultConfig { ... renderscriptTargetApi 23 renderscriptSupportModeEnabled true } ...}...dependencies { ... compile project(':react-native-android-blurryoverlay')}
- register module (in MainActivity.java)
// <--- import
Usage
The Android root view will be 'screenshotted' and rendered blurry in the view.
/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';; var BlurryOverlay = ; { super; thisstate = renderBlurry: false } { ; } { var overlay = thisstaterenderBlurry ? <BlurryOverlay radius=7 sampling=6 color="#00FFFF00" style= position: "absolute" left: 0 top: 0 bottom: 0 right: 0 /> : <View />; return <View style=stylescontainer> <Image source= /> <Text style=styleswelcome> Welcome to React Native! </Text> <Text style=stylesinstructions> To get started edit indexandroidjs </Text> <Text style=stylesinstructions> Shake or press menu button for dev menu </Text> overlay </View> ; } const styles = StyleSheet; AppRegistry;