React-native-blur: 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?