├── .npmignore ├── Example └── Example.gif ├── LICENSE ├── README.md ├── build.gradle ├── index.android.js ├── package.json └── src └── main ├── AndroidManifest.xml └── java └── com └── kwaak └── react ├── BlurryOverlayManager.java ├── BlurryOverlayPackage.java └── BlurryOverlayView.java /.npmignore: -------------------------------------------------------------------------------- 1 | # Android/IJ 2 | .idea/workspace.xml 3 | .idea/libraries 4 | .gradle 5 | local.properties 6 | *.iml 7 | build -------------------------------------------------------------------------------- /Example/Example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwaak/react-native-android-blurryoverlay/fca26ce5278ccf21f2b78a2a7df628fb20644236/Example/Example.gif -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blurry overlay for react-native android 2 | 3 | [![npm](https://img.shields.io/npm/v/react-native-android-blurryoverlay.svg)](https://www.npmjs.com/package/react-native-android-blurryoverlay) 4 | 5 | # This is very experimental 6 | 7 | A react native android module to add a blurry overlay. 8 | 9 | ![Example](Example/Example.gif?raw=true "Example") 10 | 11 | ## Setup 12 | 13 | * install module 14 | 15 | ```bash 16 | npm i --save react-native-android-blurryoverlay 17 | ``` 18 | 19 | * `android/settings.gradle` 20 | 21 | ```gradle 22 | ... 23 | include ':react-native-android-blurryoverlay' 24 | project(':react-native-android-blurryoverlay').projectDir = new File(settingsDir, '../node_modules/react-native-android-blurryoverlay') 25 | ``` 26 | 27 | * `android/app/build.gradle` 28 | 29 | ```gradle 30 | ... 31 | android { 32 | ... 33 | defaultConfig { 34 | ... 35 | renderscriptTargetApi 23 36 | renderscriptSupportModeEnabled true 37 | } 38 | ... 39 | } 40 | ... 41 | dependencies { 42 | ... 43 | compile project(':react-native-android-blurryoverlay') 44 | } 45 | ``` 46 | 47 | * register module (in MainActivity.java) 48 | 49 | ```java 50 | import com.kwaak.react.BlurryOverlayPackage; // <--- import 51 | 52 | public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { 53 | 54 | ...... 55 | private static Activity mActivity = null; 56 | 57 | @Override 58 | protected void onCreate(Bundle savedInstanceState) { 59 | super.onCreate(savedInstanceState); 60 | mReactRootView = new ReactRootView(this); 61 | 62 | mActivity = this; 63 | mReactInstanceManager = ReactInstanceManager.builder() 64 | .setApplication(getApplication()) 65 | .setBundleAssetName("index.android.bundle") 66 | .setJSMainModuleName("index.android") 67 | .addPackage(new MainReactPackage()) 68 | .addPackage(new BlurryOverlayPackage(this)) // <------- add package, the 'this' is super important 69 | .setUseDeveloperSupport(BuildConfig.DEBUG) 70 | .setInitialLifecycleState(LifecycleState.RESUMED) 71 | .build(); 72 | 73 | mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); 74 | 75 | setContentView(mReactRootView); 76 | } 77 | 78 | ...... 79 | 80 | } 81 | ``` 82 | 83 | ## Usage 84 | 85 | The Android root view will be 'screenshotted' and rendered blurry in the view. 86 | 87 | ```js 88 | /** 89 | * Sample React Native App 90 | * https://github.com/facebook/react-native 91 | */ 92 | 'use strict'; 93 | import React, { 94 | AppRegistry, 95 | Component, 96 | StyleSheet, 97 | Text, 98 | View, 99 | Image 100 | } from 'react-native'; 101 | 102 | var BlurryOverlay = require('react-native-android-blurryoverlay'); 103 | 104 | class BlurryTest extends Component { 105 | constructor() { 106 | super(); 107 | this.state = { 108 | renderBlurry: false 109 | } 110 | } 111 | componentDidMount() { 112 | setTimeout(() => { 113 | this.setState({ renderBlurry: true }) 114 | }); 115 | } 116 | render() { 117 | var overlay = (this.state.renderBlurry) ? : ; 126 | return ( 127 | 128 | 131 | 132 | Welcome to React Native! 133 | 134 | 135 | To get started, edit index.android.js 136 | 137 | 138 | Shake or press menu button for dev menu 139 | 140 | {overlay} 141 | 142 | ); 143 | } 144 | } 145 | 146 | const styles = StyleSheet.create({ 147 | container: { 148 | flex: 1, 149 | justifyContent: 'center', 150 | alignItems: 'center', 151 | }, 152 | welcome: { 153 | fontSize: 20, 154 | textAlign: 'center', 155 | margin: 10, 156 | }, 157 | instructions: { 158 | textAlign: 'center', 159 | color: '#333333', 160 | marginBottom: 5, 161 | }, 162 | }); 163 | 164 | AppRegistry.registerComponent('BlurryTest', () => BlurryTest); 165 | 166 | ``` 167 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | jcenter() 4 | } 5 | 6 | dependencies { 7 | classpath 'com.android.tools.build:gradle:1.2.3' 8 | } 9 | } 10 | 11 | apply plugin: 'com.android.library' 12 | 13 | android { 14 | compileSdkVersion 23 15 | buildToolsVersion "23.0.1" 16 | 17 | defaultConfig { 18 | minSdkVersion 16 19 | targetSdkVersion 22 20 | versionCode 1 21 | versionName "1.0" 22 | } 23 | lintOptions { 24 | abortOnError false 25 | } 26 | } 27 | 28 | repositories { 29 | mavenCentral() 30 | } 31 | 32 | dependencies { 33 | compile "com.facebook.react:react-native:0.16.+" 34 | compile 'jp.wasabeef:blurry:1.0.4' 35 | } 36 | -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | var { requireNativeComponent, PropTypes, View } = require('react-native'); 2 | 3 | var iface = { 4 | name: 'BlurryOverlay', 5 | propTypes: { 6 | ...View.propTypes, 7 | radius: PropTypes.number, 8 | sampling: PropTypes.number, 9 | color: PropTypes.string, 10 | }, 11 | }; 12 | 13 | module.exports = requireNativeComponent('RCTBlurryOverlay', iface); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-android-blurryoverlay", 3 | "description": "A react native android package to show a blurry overlay.", 4 | "version": "0.2.2", 5 | "main": "index.android.js", 6 | "author": { 7 | "name": "Kwaak" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git@github.com:kwaak/react-native-android-blurryoverlay.git" 12 | }, 13 | "license": "MIT", 14 | "peerDependencies": { 15 | "react-native": ">= 0.16.0" 16 | }, 17 | "keywords": [ 18 | "react-component", 19 | "react-native", 20 | "android" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /src/main/java/com/kwaak/react/BlurryOverlayManager.java: -------------------------------------------------------------------------------- 1 | package com.kwaak.react; 2 | 3 | import android.app.Activity; 4 | 5 | import com.facebook.react.uimanager.ReactProp; 6 | import com.facebook.react.uimanager.SimpleViewManager; 7 | import com.facebook.react.uimanager.ThemedReactContext; 8 | 9 | public class BlurryOverlayManager extends SimpleViewManager { 10 | 11 | private Activity activity; 12 | 13 | public BlurryOverlayManager(Activity activity) { 14 | this.activity = activity; 15 | } 16 | 17 | public static final String REACT_CLASS = "RCTBlurryOverlay"; 18 | 19 | @Override 20 | public String getName() { 21 | return REACT_CLASS; 22 | } 23 | 24 | @Override 25 | public BlurryOverlayView createViewInstance(ThemedReactContext context) { 26 | BlurryOverlayView c = new BlurryOverlayView(context, activity); 27 | 28 | return c; 29 | } 30 | 31 | @ReactProp(name = "radius", defaultInt = 0) 32 | public void setRadius(BlurryOverlayView view, int radius) { 33 | view.setRadiusAndUpdate(radius); 34 | } 35 | 36 | @ReactProp(name = "sampling", defaultInt = 0) 37 | public void setSampling(BlurryOverlayView view, int sampling) { 38 | view.setSamplingAndUpdate(sampling); 39 | } 40 | 41 | @ReactProp(name = "color") 42 | public void setColor(BlurryOverlayView view, String color) { 43 | view.setColorAndUpdate(color); 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /src/main/java/com/kwaak/react/BlurryOverlayPackage.java: -------------------------------------------------------------------------------- 1 | package com.kwaak.react; 2 | 3 | import android.app.Activity; 4 | 5 | import com.facebook.react.ReactPackage; 6 | import com.facebook.react.bridge.JavaScriptModule; 7 | import com.facebook.react.bridge.NativeModule; 8 | import com.facebook.react.bridge.ReactApplicationContext; 9 | import com.facebook.react.uimanager.ViewManager; 10 | 11 | import java.util.ArrayList; 12 | import java.util.Arrays; 13 | import java.util.Collections; 14 | import java.util.List; 15 | 16 | public class BlurryOverlayPackage implements ReactPackage { 17 | private Activity mActivity = null; 18 | 19 | public BlurryOverlayPackage(Activity activity){ 20 | mActivity = activity; 21 | } 22 | @Override 23 | public List createNativeModules(ReactApplicationContext reactApplicationContext) { 24 | List modules = new ArrayList<>(); 25 | return modules; 26 | } 27 | 28 | @Override 29 | public List> createJSModules() { 30 | return Collections.emptyList(); 31 | } 32 | 33 | @Override 34 | public List createViewManagers(ReactApplicationContext reactContext) { 35 | return Arrays.asList( 36 | new BlurryOverlayManager(mActivity) 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/main/java/com/kwaak/react/BlurryOverlayView.java: -------------------------------------------------------------------------------- 1 | package com.kwaak.react; 2 | 3 | import android.app.Activity; 4 | import android.content.Context; 5 | import android.graphics.Color; 6 | import android.util.Log; 7 | import android.view.ViewGroup; 8 | import android.widget.ImageView; 9 | 10 | import jp.wasabeef.blurry.Blurry; 11 | 12 | public class BlurryOverlayView extends ImageView { 13 | 14 | private final String LOGTAG = "BlurryOverlayView"; 15 | 16 | private int radius; 17 | private int sampling; 18 | 19 | private String color; 20 | private Context context; 21 | private Activity activity; 22 | 23 | public static final int defaultRadius = 10; 24 | public static final int defaultSampling = 8; 25 | 26 | public BlurryOverlayView(final Context context, Activity activity) { 27 | super(context); 28 | this.context = context; 29 | this.activity = activity; 30 | 31 | Render(activity); 32 | } 33 | 34 | private void Render(Activity activity) { 35 | 36 | // Defaults 37 | if(this.radius == 0) 38 | setRadius(defaultRadius); 39 | if(this.sampling == 0) 40 | setSampling(defaultSampling); 41 | 42 | Log.i(LOGTAG, String.format("activity %s", activity)); 43 | 44 | final ViewGroup viewGroup = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0); 45 | 46 | Log.i(LOGTAG, String.format("viewGroup %s", viewGroup)); 47 | Log.i(LOGTAG, String.format("this %s", this)); 48 | 49 | Blurry.Composer c = Blurry.with(activity) 50 | .radius(this.radius) 51 | .sampling(this.sampling); 52 | 53 | if(this.color != null) 54 | c = c.color(Color.parseColor(this.color)); 55 | 56 | //c.async() 57 | c.capture(viewGroup) 58 | .into(this); 59 | } 60 | 61 | public void setRadiusAndUpdate(int radius) { 62 | setRadius(radius); 63 | Render(activity); 64 | } 65 | 66 | private void setRadius(int radius) { 67 | this.radius = radius; 68 | } 69 | 70 | public void setSamplingAndUpdate(int sampling) { 71 | setSampling(sampling); 72 | Render(activity); 73 | } 74 | 75 | private void setSampling(int sampling) { 76 | this.sampling = sampling; 77 | } 78 | 79 | public void setColorAndUpdate(String color) { 80 | this.color = color; 81 | Render(activity); 82 | } 83 | } 84 | --------------------------------------------------------------------------------