Feat/eightbitlab blurview (Kureev#358)

* Update build.gradle

* Update build.gradle

* feat(android-blurview): migrate to com.eightbitlab.blurview

* fix(types): proptypes and typescript

- removed viewRef references

* fix(offset): fixing offset on android

* feat(harmonized-behavior): blurview can now have children on android

- Same behavior on iOS and Android now

* Update BlurView.android.js

* Update index.js.flow

* Create App.js

* Delete App.android.js

* Delete App.ios.js

* Update README.md

Author: Daavidaviid

README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/%40react-native-community%2Fblur.svg)](https://badge.fury.io/js/%40react-native-community%2Fblur)
 
-A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px-android-blur](https://github.com/500px/500px-android-blur) on Android.<br>
+A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [BlurView](https://github.com/Dimezis/BlurView) on Android.<br>
 
 <img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />
 
@@ -102,18 +102,10 @@ import { BlurView, VibrancyView } from "@react-native-community/blur";
 
 ```javascript
 import React, { Component } from "react";
-import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
+import { View, Image, Text, StyleSheet } from "react-native";
 import { BlurView } from "@react-native-community/blur";
 
 export default class Menu extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { viewRef: null };
-  }
-
-  imageLoaded() {
-    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
-  }
 
   render() {
     return (
@@ -124,14 +116,12 @@ export default class Menu extends Component {
           viewRef={this.state.viewRef}
           blurType="light"
           blurAmount={10}
-        />
+        >
+          <Text>I'm the BlurView content on both iOS and Android</Text>
+        </BlurView>
         <Image
-          ref={img => {
-            this.backgroundImage = img;
-          }}
           source={{ uri }}
           style={styles.absolute}
-          onLoadEnd={this.imageLoaded.bind(this)}
         />
       </View>
     );
@@ -155,8 +145,6 @@ const styles = StyleSheet.create({
 
 In this example, the `Image` component will be blurred, because the `BlurView` in positioned on top. But the `Text` will stay unblurred.
 
-Note that `viewRef` is only required if you need to support Android. See the [Android section](#android) for more details.
-
 ### VibrancyView
 
 **Uses the same properties as `BlurView` (`blurType` and `blurAmount`).**
@@ -183,12 +171,7 @@ export default class Menu extends Component {
 
 ### Android
 
-Android uses the [500px-android-blur](https://github.com/500px/500px-android-blur) library, which works by blurring a referenced view. This means that you must wait until the view you want to blur is rendered. You then use `findNodeHandle` to get a reference to that view, and pass that reference to the `BlurView` as the `viewRef` prop. Take a look at [the BlurView example](#blurview) to see how it works.
-
-The Android library introduces some limitations:
-
-- `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
-- `BlurView` cannot contain any child components.
+Android uses the [BlurView](https://github.com/Dimezis/BlurView).
 
 If you only need to support iOS, then you can safely ignore these limitations.
 

android/build.gradle

@@ -40,4 +40,5 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
+    implementation 'com.eightbitlab:blurview:1.6.3'
 }

android/src/main/java/com/cmcewen/blurview/BlurViewManager.java

@@ -1,63 +1,62 @@
 package com.cmcewen.blurview;
 
+import android.graphics.drawable.Drawable;
 import android.view.View;
+import android.view.ViewGroup;
 
+import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.Objects;
+
 import javax.annotation.Nonnull;
 
+import eightbitlab.com.blurview.BlurView;
+import eightbitlab.com.blurview.RenderScriptBlur;
+
 
 @SuppressWarnings("unused")
-class BlurViewManager extends SimpleViewManager<BlurringView> {
+class BlurViewManager extends ViewGroupManager<BlurView> {
     private static final String REACT_CLASS = "BlurView";
 
     private static final int defaultRadius = 10;
     private static final int defaultSampling = 10;
 
-    private static ThemedReactContext context;
-
     @Override
     public @Nonnull String getName() {
         return REACT_CLASS;
     }
 
     @Override
-    public @Nonnull BlurringView createViewInstance(@Nonnull ThemedReactContext ctx) {
-        context = ctx;
-
-        BlurringView blurringView = new BlurringView(ctx);
-        blurringView.setBlurRadius(defaultRadius);
-        blurringView.setDownsampleFactor(defaultSampling);
-        return blurringView;
+    public @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
+        BlurView blurView = new BlurView(ctx);
+        View decorView = Objects.requireNonNull(ctx.getCurrentActivity()).getWindow().getDecorView();
+        ViewGroup rootView = decorView.findViewById(android.R.id.content);
+        Drawable windowBackground = decorView.getBackground();
+        blurView.setupWith(rootView)
+            .setFrameClearDrawable(windowBackground)
+            .setBlurAlgorithm(new RenderScriptBlur(ctx))
+            .setBlurRadius(defaultRadius)
+            .setHasFixedTransformationMatrix(false);
+        return blurView;
     }
 
     @ReactProp(name = "blurRadius", defaultInt = defaultRadius)
-    public void setRadius(BlurringView view, int radius) {
+    public void setRadius(BlurView view, int radius) {
         view.setBlurRadius(radius);
         view.invalidate();
     }
 
     @ReactProp(name = "overlayColor", customType = "Color")
-    public void setColor(BlurringView view, int color) {
+    public void setColor(BlurView view, int color) {
         view.setOverlayColor(color);
         view.invalidate();
     }
 
     @ReactProp(name = "downsampleFactor", defaultInt = defaultSampling)
-    public void setDownsampleFactor(BlurringView view, int factor) {
-        view.setDownsampleFactor(factor);
-    }
-
-    @ReactProp(name = "viewRef")
-    public void setViewRef(BlurringView view, int viewRef) {
-        if (context != null && context.getCurrentActivity() != null) {
-          View viewToBlur = context.getCurrentActivity().findViewById(viewRef);
+    public void setDownsampleFactor(BlurView view, int factor) {
 
-          if (viewToBlur != null) {
-              view.setBlurredView(viewToBlur);
-          }
-        }
     }
 }