Just hard-crashes on Android without any error info

[mrousavy]

Bug

The library just hard crashes on android without any error or description. Nothing is being logged in the metro server console. On iOS it works fine. For debugging reasons, I used the exact same code shown in the README.md example of this library:

<BlurView
  style={styles.absolute}
  viewRef={this.state.viewRef}
  blurType="light"
  blurAmount={10}
  reducedTransparencyFallbackColor="white"
  />

I have also tried manually linking the library and adding the package to the AndroidManifest.xml following the README.

Environment info

react-native info output:

System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.07 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.3, 30.0.0
      System Images: android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Library version: 3.6.0

Steps To Reproduce

1. Install on Android
2. Start app
3. App hard crashes without any info

Reproducible sample code

<BlurView
  style={styles.absolute}
  viewRef={this.state.viewRef}
  blurType="light"
  blurAmount={10}
  reducedTransparencyFallbackColor="white"
  />

[mrousavy]

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?

[kamiranoff]

We are experiencing the same issue. @mrousavy Have you found a way around this?

[mrousavy]

@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!

[kamiranoff]

@mrousavy ahah. That is concerning. Will do. Thanks!

[tgensol]

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

[pke]

Somewhere in the source code I read the Android version of BlurView must not have children. Maybe that's the root cause? In any case the component in its current state is poorly supporting Android. The sample code in the readme is outdated or wrong. There is no viewRef property used in the whole component source, unless I am missing some spread operation that hands through this property to the native implementation side. The readme example is still incomplete as the used viewRef is never defined in the sample code.

[macavity23]

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

[jamsch]

Came across the same issue when using the BlurView inside a FlatList. Tried expo-blur as well. expo-blur works... although it doesn't actually do any blurring on Android.

[bohdan-vasylenko]

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

[Dinkelborg]

Doesn't seem to help my case unfortunately - I don't know but for me it seems this entire lib is highly unusable I just wanted to try it out and added it to a regular page with some buttons - nothing fancy just the component with no children or anything - good that worked but then I wanted to enable the blur only after a button was pressed

I made a state var and added it to the component state var starts as 0 then on button press I use setBlur(10) this already crashes my app now everytime I try to even navigate to that screen so I don't even get to the part with the button press

const [blur, setBlur] = useState(0); <BlurView style={[styles.blurView]} blurType="light" blurAmount={(blur)?blur:0}/>

[bohdan-vasylenko]

@Dinkelborg using the term "page" you suggest that you're using it on react project, not react native ?

[Dinkelborg]

No its a react native project but we do have different pages that you can navigate through if it feels more comfortable to you I can also call them screens or views

[bohdan-vasylenko]

@Dinkelborg yeah, the word "page" can be misleading in this case. But going back to your issue, this is how i use blur view in my project, maybe it can help

// @flow
import React, {useEffect, useState} from 'react';
import {View, Animated, Platform, findNodeHandle} from 'react-native';
import ScreenWrapper from '../ScreenWrapper';
import BackArrow from '../BackArrow';
import style from './style';
import Spinner from '../Spinner';
import {COLOR_PRIMARY} from '../../config/style';
import {BlurView} from '@react-native-community/blur';

type Props = {};

const HeaderScreenWrapper = (props: Props) => {
  let wrapperRef = null;
  const [viewRef: any, setRef] = useState(null);
  const [isBlurVisible: boolean, setBlurVisible] = useState(false);

  useEffect(() => {
    setBlurVisible(props.blur);
  }, [props.blur]);

  function _renderBlur() {
    if (isBlurVisible) {
      return (
        <BlurView
          style={style.absolute}
          viewRef={viewRef}
          blurType="dark"
          blurAmount={3}
        />
      );
    }
  }

  return (
    <ScreenWrapper>
      {_renderBlur()}
      <View
        style={[style.container, props.containerStyle]}
        ref={el => (wrapperRef = el)}
        onLayout={() => setRef(findNodeHandle(wrapperRef))}>
        <Animated.View style={[style.content, props.contentStyle]}>
          {props.children}
        </Animated.View>
      </View>
    </ScreenWrapper>
  );
};

export default HeaderScreenWrapper;

[Dinkelborg]

Yeah thanks but that doesn't really help me I know I can just hide and show the blur view (or not render it in your case) but the bug I'm trying to report here is that if you try to use a variable instead of a number for "blurAmount" so for example: let b = 12; <BlurView blurType="light" blurAmount={b}/> it will crash the app immediately and I don't really see why the effect I was going for was to increase the blurAmount from 0 to 10 as an animation the way you use it its just a hard on/off

[mrousavy]

@Dinkelborg on which platform are you experiencing the crashes? I've been having no issues with blur animations on iOS. Could you please run your app in debug mode in Xcode (iOS) or Android Studio (Android) and tell us what the error/exception exactly is and where it occurs?

[C-odes]

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

Hey, with me when I downloaded the 3.3.1 version and try to run the app with "yarn android" I get the following error: Task :react-native-community_blur:generateDebugBuildConfig FAILED

[Anytram]

I have the same problem, did you managed to fix this?

[Ceredavide]

This answer helped me to fix this issue

[smeads-sweater]

This answer helped me to fix this issue

@Ceredavide I followed the suggestions in the link you posted.

1. Setup patch-package
2. Added patches/@react-native-community+blur+3.6.0.patch with suggested patch snippet from link above
3. Confirmed running yarn applies the patch

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ patch-package
patch-package 6.4.7
Applying patches...
@react-native-community/[email protected] ✔

4. I even added the below implementation block to build.gradle

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

The Android app still crashes as described in all the other reported issues. If you or anyone else has any suggestions on how to resolve this or maybe a step I missed it would be greatly appreciated.

[nandorojo]

@mrousavy any shot @expo's BlurView could add Android support? It currently only renders a translucent view, and the alternatives (like this library) are really unreliable on Android.

[mrousavy]

@nandorojo I'll talk with the team

[singhtrustcom]

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

but in the case of IOS, it is working fine

with this solution now it is working on both paltform

[MichaelRights]

@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!

You can remove that overlay by using property. overlayColor="transparent"

[swushi]

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;

[Nagasai97]

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?

hey @mrousavy any update on this, even i wanna use blurview in flatlist..

[niranjanakella]

@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
    }
}

[Saad9624]

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;

Blur Affect doesnt not show up in android after doing this.

[Salman-Samian]

same issue here.

[karthickhai]

Try this, For me its working

export const BlurView: React.FC<BlurViewProperties & { navigation: NavigationProp }> = memo(props => { const appState = useRef(AppState.currentState); const [active, setActive] = useState(false)

useEffect(() => {
    const subscription = AppState.addEventListener("change", nextAppState => {
        if (appState.current.match(/inactive|background/) && nextAppState === "active")
            setTimeout(() => setActive(true), 500)
        else
            setActive(false)
        appState.current = nextAppState;
    });
    return () => subscription.remove();
}, []);

if (!active) return null;
return <NativeBlurView {...props} />;

});

[ahetesum]

I am Facing same issue. Please update if this issue is fixed