Blank screen on Android when navigating

[luiswineup]

Using BlurView on Android, makes the screen blank.
Initially I solved this by creating a hook that allows me to render BlurView only after its parent is mounted
<View style={[styles.textContainer]} ref={textRef}> {isTextMounted && <BlurView style={[styles.blurContainer, StyleSheet.absoluteFill]} blurType="light" blurAmount={7.5} reducedTransparencyFallbackColor="rgba(0,0,0,0.15)" />} <View />
And this worked fine, until I navigate to another stack. If the last screen was using a BlurView, the next screen will also be blank.
I tried several other things like set `screenOptions={{animation: 'none'}} or changing the opacity of the component in node_modules, but nothing worked.

[ahtokca]

For me too, I get this

 java.lang.NoSuchMethodError: No virtual method setupWith(Landroid/view/ViewGroup;)Leightbitlab/com/blurview/BlurViewFacade; in class Leightbitlab/com/blurview/BlurView; or its super classes (declaration of 'eightbitlab.com.blurview.BlurView' )
                                                                                                    	at com.reactnativecommunity.blurview.BlurViewManagerImpl.createViewInstance(BlurViewManagerImpl.java:26)
                                                                                                    	at com.reactnativecommunity.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:42)
                                                                                                    	at com.reactnativecommunity.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:17)
                                                                                                 

[astarx233]

+1

[DanielAraldi]

Hi everyone, I had this issue with my BlurView library last week and managed to fix it. This issue is likely related to RNScreens' installation of rootViews on the screen. This library (perhaps because it's abandoned) still doesn't have this issue resolved. I fixed it in my library. If you'd like to try it out, here's the link.

Some references about this problem:

• Previous screen appears flashing behind the current screen when animation is slide_from_left (Android) software-mansion/react-native-screens#3160
• [expo-blur][android]: fix transition issues with RNScreens expo/expo#37904

[a-klotz-p8]

diff --git a/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java b/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
index 4444313..da911d9 100644
--- a/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
+++ b/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
@@ -1,6 +1,8 @@
 package com.reactnativecommunity.blurview;
 
 import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewParent;
 import com.facebook.react.uimanager.ThemedReactContext;
 
 import eightbitlab.com.blurview.BlurView;
@@ -18,15 +20,71 @@ class BlurViewManagerImpl {
 
   public static @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
     BlurView blurView = new BlurView(ctx);
+    
+    // We need to defer the setupWith call until the view is attached to the window
+    // so we can walk the parent hierarchy to find the optimal blur root
+    blurView.addOnAttachStateChangeListener(new View.OnAttachStateChangeListener() {
+      @Override
+      public void onViewAttachedToWindow(View v) {
+        setupBlurView(blurView, ctx);
+        v.removeOnAttachStateChangeListener(this);
+      }
+
+      @Override
+      public void onViewDetachedFromWindow(View v) {
+        // No action needed
+      }
+    });
+
+    return blurView;
+  }
+
+  private static void setupBlurView(BlurView blurView, ThemedReactContext ctx) {
     View decorView = Objects
       .requireNonNull(ctx.getCurrentActivity())
       .getWindow()
       .getDecorView();
+    
+    ViewGroup blurRoot = findOptimalBlurRoot(blurView, decorView);
+    
     blurView
-      .setupWith(decorView.findViewById(android.R.id.content))
+      .setupWith(blurRoot)
       .setFrameClearDrawable(decorView.getBackground())
       .setBlurRadius(defaultRadius);
-    return blurView;
+  }
+
+  /**
+   * Attempts to find the nearest Screen ancestor (from react-native-screens).
+   * Falls back to app root if no Screen is found.
+   */
+  private static ViewGroup findOptimalBlurRoot(BlurView blurView, View decorView) {
+    ViewGroup screenAncestor = findNearestScreenAncestor(blurView);
+    if (screenAncestor != null) {
+      return screenAncestor;
+    }
+    
+    // Fallback to app root
+    return decorView.findViewById(android.R.id.content);
+  }
+
+  /**
+   * Walks up the view hierarchy looking for react-native-screens Screen components
+   * using class name detection to avoid hard dependencies.
+   */
+  private static ViewGroup findNearestScreenAncestor(View view) {
+    ViewParent currentParent = view.getParent();
+    while (currentParent != null) {
+      if (isReactNativeScreen(currentParent)) {
+        return (ViewGroup) currentParent;
+      }
+      currentParent = currentParent.getParent();
+    }
+    return null;
+  }
+
+  private static boolean isReactNativeScreen(Object view) {
+    String className = view.getClass().getName();
+    return "com.swmansion.rnscreens.Screen".equals(className);
   }
 
   public static void setRadius(BlurView view, int radius) {

This patch on the node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java file fixed it for me. But I am not a android developer so use at your own risk.

androidFix.patch

[DwifteJB]

Hi everyone, I had this issue with my BlurView library last week and managed to fix it. This issue is likely related to RNScreens' installation of rootViews on the screen. This library (perhaps because it's abandoned) still doesn't have this issue resolved. I fixed it in my library. If you'd like to try it out, here's the link.

Some references about this problem:

* [Previous screen appears flashing behind the current screen when animation is `slide_from_left` (Android) software-mansion/react-native-screens#3160](https://github.com/software-mansion/react-native-screens/issues/3160)

* [[expo-blur][android]: fix transition issues with RNScreens expo/expo#37904](https://github.com/expo/expo/pull/37904)

works like a charm, thank you!

[marcshilling]

I'm still getting the java.lang.NoSuchMethodError: No virtual method setupWith(Landroid/view/ViewGroup;) crash. Happens in @DanielAraldi's repo and with @a-klotz-p8's patch too.

RN 0.77.3, New Arch enabled

[DanielAraldi]

I'm still getting the java.lang.NoSuchMethodError: No virtual method setupWith(Landroid/view/ViewGroup;) crash. Happens in @DanielAraldi's repo and with @a-klotz-p8's patch too.

RN 0.77.3, New Arch enabled

Hi @marcshilling, I tried to replicate this issue with my library in a project running the same version. However, I was unsuccessful. I've included a video below showing what I did for you to see. For now, I recommend cleaning up the project, it can help significantly. It's strange that this problem is happening to you :(

gravacao-de-tela-2025-10-06-as-140016_oHN95vMy.mp4

[kaloyanxoxo]

@DanielAraldi I have the same issue and I think this issue happens when navigation to other screen, which includes BlurView, or Modal, which includes BlurView.

I am using react-native: 0.77.3, wix/react-native-navigation: 8.3.2

[DanielAraldi]

Interesting, I'll take a look at this problem, I've just been reading about it. Thanks @kaloyanxoxo!!

[kaloyanxoxo]

Thank you too! I'm here is you need anything else. I'm working on fixing the issue, but so far - nothing

[kaloyanxoxo]

I manged to fix it for me. I patched the library applying these changes:

--- a/node_modules/@react-native-community/blur/android/build.gradle
+++ b/node_modules/@react-native-community/blur/android/build.gradle
@@ -139,5 +139,5 @@ dependencies {
   implementation "com.facebook.react:react-native:+"
   // From node_modules
 
-  implementation 'com.github.Dimezis:BlurView:version-2.0.4'
+  implementation 'com.github.Dimezis:BlurView:version-3.1.0'
 }

--- a/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
+++ b/node_modules/@react-native-community/blur/android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
@@ -4,6 +4,7 @@ import android.view.View;
 import com.facebook.react.uimanager.ThemedReactContext;
 
 import eightbitlab.com.blurview.BlurView;
+import eightbitlab.com.blurview.BlurTarget;
 
 import java.util.Objects;
 import javax.annotation.Nonnull;
@@ -18,12 +19,18 @@ class BlurViewManagerImpl {
 
   public static @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
     BlurView blurView = new BlurView(ctx);
+    BlurTarget blurTarget = new BlurTarget(ctx);
+
     View decorView = Objects
       .requireNonNull(ctx.getCurrentActivity())
       .getWindow()
       .getDecorView();
+
+    // Optional: Add this to blur the window background
+    blurTarget.setBackground(decorView.getBackground());
+
     blurView
-      .setupWith(decorView.findViewById(android.R.id.content))
+      .setupWith(blurTarget)
       .setFrameClearDrawable(decorView.getBackground())
       .setBlurRadius(defaultRadius);
     return blurView;

It fixed the issue with the no virtual method... error

cc @DanielAraldi @marcshilling

[DanielAraldi]

This problem is resolved with version 3.x of the Dimezis, but it doesn't work with Bottom Tabs of the react-navigation, I believe is caused by react-native-screens. I created an issue about this problem there. I am studying some solutions for my library about this.

• BlurView v3 from Dimezis appears to lack support for integration with Bottom Tabs. software-mansion/react-native-screens#3218

[kaloyanxoxo]

We are using wix/react-native-navigation.. I don't think I can help with this issue. In t he patch I am bumping to 3.1 of Dimezis library

[theeastwindz0]

Any update on this ?

[DanielAraldi]

Hi @theeastwindz0, currently, @sbaiahmed1 and I are working on this solution together. We have some progress, but we are still testing the solution:

• feat: Update the Dimezis's BlurView library to the 3v DanielAraldi/react-native-blur-view#16
• feat: add real blur effect support with TargetView component sbaiahmed1/react-native-blur#34