Update: the app only crashes in my case, because I render multiple <BlurView>s in a <FlatList>. Is this a performance issue or is this some other reason like having a maximum amount of BlurViews in a single view?

This makes the library unusable! Also, on Android I noticed the <BlurView> component behaves differently than on iOS, for example using children shows different layouts on Android than on iOS, maybe that has something to do with this?

It specifically crashes on android when nested in a Flatlist. Regardless if it’s a Animated or Reanimated variant of a Flatlist. My workaround for that is to delay the render on android with a setTimeout, even with 0 seconds fixes the issues.

import React, { memo, useEffect, useState } from 'react';
import { Platform } from 'react-native';

import { BlurView, BlurViewProperties } from '@react-native-community/blur';

/**
 * This is a workaround for the fact that BlurView doesn't work on Android when nested in a Flatlist.
 * 
 * Drop in replacement for BlurView.
 * 
 * @see {@link [GitHub Issue](https://github.com/Kureev/react-native-blur/issues/368)}
 */
const StableBlurView: React.FC<BlurViewProperties> = memo(props => {
  const [shouldRenderBlur, setShouldRenderBlur] = useState(Platform.OS === 'android' ? false : true);

  useEffect(() => {
    setTimeout(() => setShouldRenderBlur(true), 0);
  }, []);

  if (!shouldRenderBlur) return null;
  return <BlurView {...props} />;
});

export default StableBlurView;

I Found the solution

it is happening due to you are using:

BlurView inside BlurView

so that why change the inner BlurView with normal View then this will work

<BlurView> <View> </View> </BlurView>

but in the case of IOS, it is working fine

with this solution now it is working on both paltform

Also getting some crash on Android, using with a FlatList on each item. Works just fine on iOS

Getting these error :

java.lang.IndexOutOfBoundsException Index: 1, Size: 0 ArrayList.java:437 java.util.ArrayList.get ViewGroup.java:3684 android.view.ViewGroup.getAndVerifyPreorderedView ViewGroup.java:4172 android.view.ViewGroup.dispatchDraw ReactViewGroup.java:703 com.facebook.react.views.view.ReactViewGroup.dispatchDraw View.java:21466 android.view.View.draw ViewGroup.java:4413 android.view.ViewGroup.drawChild ViewGroup.java:4174 android.view.ViewGroup.dispatchDraw ReactRootView.java:232 com.facebook.react.ReactRootView.dispatchDraw View.java:21466 android.view.View.draw ViewGroup.java:4413 android.view.ViewGroup.drawChild ViewGroup.java:4174 android.view.ViewGroup.dispatchDraw View.java:21597 android.view.View.draw BlockingBlurController.java:149 eightbitlab.com.blurview.BlockingBlurController.updateBlur BlockingBlurController.java:61 eightbitlab.com.blurview.BlockingBlurController$1.onPreDraw ViewTreeObserver.java:1088 android.view.ViewTreeObserver.dispatchOnPreDraw ViewRootImpl.java:2983 android.view.ViewRootImpl.performTraversals ViewRootImpl.java:1930 android.view.ViewRootImpl.doTraversal ViewRootImpl.java:7988 android.view.ViewRootImpl$TraversalRunnable.run Choreographer.java:1154 android.view.Choreographer$CallbackRecord.run Choreographer.java:977 android.view.Choreographer.doCallbacks Choreographer.java:893 android.view.Choreographer.doFrame Choreographer.java:1139 android.view.Choreographer$FrameDisplayEventReceiver.run Handler.java:883 android.os.Handler.handleCallback Handler.java:100 android.os.Handler.dispatchMessage Looper.java:214 android.os.Looper.loop ActivityThread.java:7682 android.app.ActivityThread.main Method.java:-2 java.lang.reflect.Method.invoke RuntimeInit.java:516 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run ZygoteInit.java:950 com.android.internal.os.ZygoteInit.main

Also experiencing this crash, with a BlurView inside a FlatList. Makes this library unusable for me on Android.

after RN update to 0.61.5 and react-native-blur update to 3.6.0 had this issue. Temporary solution is to downgrade this package to 3.3.1. Worked for me

@Nagasai97 @mrousavy This worked for me!!

I was trying to implement multiple blur views i.e Background & inside Flat list. This was working fine until I also added a BottomTabs Navigation bar. After which the android app started to crash as I scrolled through… [Seriously very frustrating]

The solution posted in this Git Issue solved my problem: Here

You just have to add the below implementation to the ‘/android/app/build.gradle’ file.

dependencies {
    .......
    .......
    implementation('com.eightbitlab:blurview:1.6.6') {
        force = true
    }
}

@kamiranoff Unfortunately not. I’ve experienced so many bugs on android, sometimes the blur view glitches out so when I navigate to other screens, there still is a low-opacity overlay on the screen making everything look like it’s a street sign in nevada which has been exposed to direct sunlight since 1950.

The hard crash just occured when I used my blur view in a List (1 blur view per list item) which works fine on iOS. Keep me updated if you find a solution to this!