Use com.eightbitlab:blurview so viewRef with background view is not required any more

[mo22]

https://github.com/Dimezis/BlurView supports blurring the view tree behind the view, not requiring the current nasty workaround with the viewRef property.

The patch below works fine for me.

diff --git a/node_modules/@react-native-community/blur/android/build.gradle b/node_modules/@react-native-community/blur/android/build.gradle
index bc4cebc..7e92b89 100644
--- a/node_modules/@react-native-community/blur/android/build.gradle
+++ b/node_modules/@react-native-community/blur/android/build.gradle
@@ -40,4 +40,6 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
+
+    implementation 'com.eightbitlab:blurview:1.6.3'
 }
diff --git a/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java b/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java
index 2c228af..36de43f 100644
--- a/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java
+++ b/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java
@@ -1,63 +1,64 @@
 package com.cmcewen.blurview;

+import android.graphics.drawable.Drawable;
 import android.view.View;
+import android.view.ViewGroup;

 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 SimpleViewManager<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(true);
+        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);
+    public void setDownsampleFactor(BlurView view, int factor) {
     }

     @ReactProp(name = "viewRef")
-    public void setViewRef(BlurringView view, int viewRef) {
-        if (context != null && context.getCurrentActivity() != null) {
-          View viewToBlur = context.getCurrentActivity().findViewById(viewRef);
-
-          if (viewToBlur != null) {
-              view.setBlurredView(viewToBlur);
-          }
-        }
+    public void setViewRef(BlurView view, int viewRef) {
     }
 }

[Daavidaviid]

I couldn't get it to work. Are you sure ?

[Daavidaviid]

I made a PR if you wanna contribute, I was full of hope, but no success on my side :'(

[mo22]

Did it fail to compile or did it not produce the expected result?

[Daavidaviid]

Sorry, I wasn't very clear. No problem for the compilation, but I don't get any background. Basically, I just get a transparent background.

Were you able to get it to work correctly ? It might come from my side, i'm not sure

EDIT : It's working now ! Thanks for the code ! I need to update the documentation to remove the viewRef

[mo22]

Hi, I made a working demo at https://github.com/mo22/blur-test

There looks to be an issue with the exact border of the blurred area (that's the Platform.select part in the blur view with the margins). Not sure where that comes from.

[CoenWarmer]

I'm also seeing good results with the diff. I noticed https://github.com/react-native-community/react-native-blur/pull/358, what's holding us back from getting this merged?

[mo22]

should be

setHasFixedTransformationMatrix(false)

in the settings, that fixes some offset errors.

[Daavidaviid]

Hi, This PR is gonna take care of it : https://github.com/react-native-community/react-native-blur/pull/358 no more need for viewRef on Android AND BlurView can have children now.