Just hard-crashes on Android without any error info #368

mrousavy · 2020-04-15T22:55:11Z

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

Install on Android
Start app
App hard crashes without any info

Reproducible sample code

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

The text was updated successfully, but these errors were encountered:

mrousavy · 2020-04-16T08:29:26Z

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 · 2020-05-29T11:52:37Z

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

mrousavy · 2020-05-29T12:41:52Z

@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 · 2020-05-29T13:02:41Z

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

tgensol · 2020-05-29T13:55:08Z

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 · 2020-06-10T12:22:38Z

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 · 2020-07-01T23:56:39Z

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

jamsch · 2020-07-08T00:28:27Z

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 · 2020-08-13T10:08:19Z

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 · 2020-10-16T09:18:24Z

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 · 2020-10-16T09:24:42Z

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

Dinkelborg · 2020-10-16T10:44:26Z

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 · 2020-10-16T10:53:16Z

@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 · 2020-10-16T10:58:23Z

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 · 2020-10-16T11:02:36Z

@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 · 2021-03-11T15:34:00Z

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 · 2021-04-14T11:59:15Z

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

Ceredavide · 2021-06-06T13:55:21Z

This answer helped me to fix this issue

smeads-sweater · 2021-06-26T01:29:39Z

This answer helped me to fix this issue

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

Setup patch-package
Added patches/@react-native-community+blur+3.6.0.patch with suggested patch snippet from link above
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/blur@3.6.0 ✔

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 · 2021-07-08T14:38:07Z

@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 · 2021-07-08T14:54:25Z

@nandorojo I'll talk with the team

singhtrustcom · 2021-08-19T10:08:28Z

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 · 2022-01-19T06:48:55Z

@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 · 2022-01-28T17:27:02Z

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 · 2022-03-22T08:33:25Z

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 · 2022-05-29T16:37:45Z

@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 · 2022-06-10T14:52:22Z

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 · 2022-07-15T07:17:11Z

same issue here.

karthickhai · 2022-07-15T20:12:13Z

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 · 2022-09-16T12:22:30Z

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

niranjanakella · 2022-09-16T15:53:10Z

@ahetesum Did you try the solution I shared above?

lucaswhitman mentioned this issue Mar 11, 2021

Android crashes on render due to issues in dependencies GetStream/stream-chat-react-native#549

Closed

WoLewicki mentioned this issue Apr 25, 2022

Recording currently in progress - missing #endRecording() call software-mansion/react-native-screens#1287

Closed

5 tasks

diegolmello mentioned this issue Dec 20, 2023

Dramatically low perornance after visiting Files screen RocketChat/Rocket.Chat.ReactNative#5420

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Just hard-crashes on Android without any error info #368

Just hard-crashes on Android without any error info #368

mrousavy commented Apr 15, 2020

mrousavy commented Apr 16, 2020

kamiranoff commented May 29, 2020

mrousavy commented May 29, 2020

kamiranoff commented May 29, 2020 •

edited

Loading

tgensol commented May 29, 2020

pke commented Jun 10, 2020

macavity23 commented Jul 1, 2020

jamsch commented Jul 8, 2020 •

edited

Loading

bohdan-vasylenko commented Aug 13, 2020

Dinkelborg commented Oct 16, 2020

bohdan-vasylenko commented Oct 16, 2020

Dinkelborg commented Oct 16, 2020

bohdan-vasylenko commented Oct 16, 2020

Dinkelborg commented Oct 16, 2020

mrousavy commented Oct 16, 2020

C-odes commented Mar 11, 2021

Anytram commented Apr 14, 2021

Ceredavide commented Jun 6, 2021

smeads-sweater commented Jun 26, 2021

nandorojo commented Jul 8, 2021

mrousavy commented Jul 8, 2021

singhtrustcom commented Aug 19, 2021

MichaelRights commented Jan 19, 2022 •

edited

Loading

swushi commented Jan 28, 2022

Nagasai97 commented Mar 22, 2022

niranjanakella commented May 29, 2022

Saad9624 commented Jun 10, 2022

Salman-Samian commented Jul 15, 2022

karthickhai commented Jul 15, 2022

ahetesum commented Sep 16, 2022

niranjanakella commented Sep 16, 2022

Just hard-crashes on Android without any error info #368

Just hard-crashes on Android without any error info #368

Comments

mrousavy commented Apr 15, 2020

Bug

Environment info

Steps To Reproduce

Reproducible sample code

mrousavy commented Apr 16, 2020

kamiranoff commented May 29, 2020

mrousavy commented May 29, 2020

kamiranoff commented May 29, 2020 • edited Loading

tgensol commented May 29, 2020

pke commented Jun 10, 2020

macavity23 commented Jul 1, 2020

jamsch commented Jul 8, 2020 • edited Loading

bohdan-vasylenko commented Aug 13, 2020

Dinkelborg commented Oct 16, 2020

bohdan-vasylenko commented Oct 16, 2020

Dinkelborg commented Oct 16, 2020

bohdan-vasylenko commented Oct 16, 2020

Dinkelborg commented Oct 16, 2020

mrousavy commented Oct 16, 2020

C-odes commented Mar 11, 2021

Anytram commented Apr 14, 2021

Ceredavide commented Jun 6, 2021

smeads-sweater commented Jun 26, 2021

nandorojo commented Jul 8, 2021

mrousavy commented Jul 8, 2021

singhtrustcom commented Aug 19, 2021

MichaelRights commented Jan 19, 2022 • edited Loading

swushi commented Jan 28, 2022

Nagasai97 commented Mar 22, 2022

niranjanakella commented May 29, 2022

Saad9624 commented Jun 10, 2022

Salman-Samian commented Jul 15, 2022

karthickhai commented Jul 15, 2022

ahetesum commented Sep 16, 2022

niranjanakella commented Sep 16, 2022

kamiranoff commented May 29, 2020 •

edited

Loading

jamsch commented Jul 8, 2020 •

edited

Loading

MichaelRights commented Jan 19, 2022 •

edited

Loading