When use BlurView in Android for example in a card, when navigate these screen put white background in all screen

[davidgvf]

No description provided.

[ManuViola77]

Im having the same problem!

[Intellectus-JIHAN]

me too... please give me the solution

[matmac]

Solved it momentairly with this issue
#561

[davidgvf]

@matmac not work for me, the solution is put view and into view bLURVIEW?

[davidgvf]

I detect that when i use position aboslute in blur view, in android when navigate put opacity screen

[efstathiosntonas]

same here, when users are navigating back then a white overlay covers the entire app, it's totally random

[dattv-unstatic]

@efstathiosntonas I'm facing the same issue. Are you resolve this?

[SHYDEV-KR]

Hey guys

I'm not sure if this is the case but in your project, if you are using Stack Navigation, try disabling animation
#461

I set
<Stack.Navigator screenOptions={{ animation: 'none' }}>

for only in android, and the issue has gone.

Well this might not be the best solution since I had to give up the animation Effect on Android.
But as I understand, there is a problem between BlurView and Navigation animation.

[Revolt9k]

Disabling animation on android is actually helped but maybe there is another workaround?

[simonbothen-radinn]

Disabling animation on android is actually helped but maybe there is another workaround?

My current workaround is to disable the blur during the transition:

<BlurView enabled={!isTransitioning}>...

[MuhammadAamirAg]

my current workaround and it's working almost well.

go to this path: node_modules/@react-native-community/blur/src/components/BlurView.android.tsx

const OVERLAY_COLORS = {
light: 'rgba(255, 255, 255, 0.0)', // reduce the opacity to 0.0
xlight: 'rgba(255, 255, 255, 0.75)',
dark: 'rgba(16, 12, 12, 0.64)',
};

[alabsi91]

My current workaround is to disable the blur during the transition:

<BlurView enabled={!isTransitioning}>...

Disabling the BlurView before navigation also worked for me. Another janky workaround is to wrap your navigation handler with setTimeout(navigationHandler, 10);

[grassesTop]

my current workaround and it's working almost well.

go to this path: node_modules/@react-native-community/blur/src/components/BlurView.android.tsx

const OVERLAY_COLORS = { light: 'rgba(255, 255, 255, 0.0)', // reduce the opacity to 0.0 xlight: 'rgba(255, 255, 255, 0.75)', dark: 'rgba(16, 12, 12, 0.64)', };

It works well, good. And you can use overlayColor={"#00000000"} instead.
such as

           <BlurView 
                style={{position:"absolute", height:400, width:100}}
                blurType="light"
                overlayColor={"#00000000"}
                blurAmount={10}
                blurRadius={10}
                reducedTransparencyFallbackColor="white"
                >
            </BlurView>

[ZhengKehang]

I Got another resolution.If you want to preserve the animation while using the component, you can wrap the navigate method in setTimeout(() => {}, 0).

[NicholasBoccuzzi]

Any updates on this? Seems like a pretty large bug

[Phecda]

A (not perfect) workaround is setting blur enabled to false during unmount, which should be done in native code.

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..6fe3478 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
@@ -29,6 +29,10 @@ class BlurViewManagerImpl {
     return blurView;
   }
 
+  public static void onDropViewInstance(BlurView view) {
+    view.setBlurEnabled(false);
+  }
+
   public static void setRadius(BlurView view, int radius) {
     view.setBlurRadius(radius);
     view.invalidate();
diff --git a/node_modules/@react-native-community/blur/android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java b/node_modules/@react-native-community/blur/android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java
index 1a28209..74a46f3 100644
--- a/node_modules/@react-native-community/blur/android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java
+++ b/node_modules/@react-native-community/blur/android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java
@@ -22,6 +22,12 @@ class BlurViewManager extends ViewGroupManager<BlurView> {
     return BlurViewManagerImpl.createViewInstance(context);
   }
 
+  @Override
+  public void onDropViewInstance(BlurView view) {
+    super.onDropViewInstance(view);
+    BlurViewManagerImpl.onDropViewInstance(view);
+  }
+
   @NonNull
   @Override
   public String getName() {

Problem: In a Native Stack Screen of @react-navigation/native-stack, after pressing Android back button, you will find that blur effect disables first, then the screen starts pop animation.

[adsalihac]

Hey guys

I'm not sure if this is the case but in your project, if you are using Stack Navigation, try disabling animation #461

I set <Stack.Navigator screenOptions={{ animation: 'none' }}>

for only in android, and the issue has gone.

Well this might not be the best solution since I had to give up the animation Effect on Android. But as I understand, there is a problem between BlurView and Navigation animation.

it is blocking shared transition animation