Crash on Android - Githubissues

zxy-c commented 3 years ago

@react-native-community/blur :^3.6.0 react-native: 0.65.1

{backgroundImageLoaded ? (
  <BlurView
    style={styles.blur}
    blurAmount={20}
    overlayColor="rgba(7, 32, 68, 0.65)"
    downsampleFactor={3}
    reducedTransparencyFallbackColor={theme.palette.white}
  />
) : null}

E/AndroidRuntime: FATAL EXCEPTION: main Process: com.zy_app_rn, PID: 9832 java.lang.IllegalStateException: Recording currently in progress - missing #endRecording() call? at android.graphics.RenderNode.beginRecording(RenderNode.java:372) at android.view.View.updateDisplayListIfDirty(View.java:21362) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at com.swmansion.rnscreens.ScreenStack.performDraw(ScreenStack.kt:392) at com.swmansion.rnscreens.ScreenStack.access$performDraw(ScreenStack.kt:17) at com.swmansion.rnscreens.ScreenStack$DrawingOp.draw(ScreenStack.kt:413) at com.swmansion.rnscreens.ScreenStack.drawAndRelease(ScreenStack.kt:366) at com.swmansion.rnscreens.ScreenStack.dispatchDraw(ScreenStack.kt:383) at android.view.View.draw(View.java:22394) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:714) at android.view.View.draw(View.java:22394) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.ReactRootView.dispatchDraw(ReactRootView.java:221) at android.view.View.draw(View.java:22394) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at android.view.View.draw(View.java:22538) at eightbitlab.com.blurview.BlockingBlurController.updateBlur(BlockingBlurController.java:149) at eightbitlab.com.blurview.BlockingBlurController.draw(BlockingBlurController.java:225) at eightbitlab.com.blurview.BlurView.draw(BlurView.java:51) at android.view.View.updateDisplayListIfDirty(View.java:21389) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:714) at android.view.View.updateDisplayListIfDirty(View.java:21380) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:714) at android.view.View.draw(View.java:22538) at android.view.View.updateDisplayListIfDirty(View.java:21389) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:714) at android.view.View.updateDisplayListIfDirty(View.java:21380) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at android.view.View.draw(View.java:22538) at android.widget.ScrollView.draw(ScrollView.java:1846) at com.facebook.react.views.scroll.ReactScrollView.draw(ReactScrollView.java:485) at android.view.View.updateDisplayListIfDirty(View.java:21389) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:714) at android.view.View.draw(View.java:22538) at android.view.View.updateDisplayListIfDirty(View.java:21389) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302) at android.view.View.updateDisplayListIfDirty(View.java:21380) at android.view.View.draw(View.java:22254) at android.view.ViewGroup.drawChild(ViewGroup.java:4541) at androidx.coordinatorlayout.widget.CoordinatorLayout.drawChild(CoordinatorLayout.java:1277) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4302)

If It without condition

<BlurView
              style={styles.blur}
              blurAmount={20}
              overlayColor="rgba(7, 32, 68, 0.65)"
              downsampleFactor={3}
              reducedTransparencyFallbackColor={theme.palette.white}
            />

E/AndroidRuntime: FATAL EXCEPTION: main Process: com.zy_app_rn, PID: 26485 java.lang.IndexOutOfBoundsException: Index: 1, Size: 0 at java.util.ArrayList.get(ArrayList.java:437) at com.swmansion.rnscreens.ScreenStack.drawAndRelease(ScreenStack.kt:365) at com.swmansion.rnscreens.ScreenStack.dispatchDraw(ScreenStack.kt:383) at android.view.View.updateDisplayListIfDirty(View.java:21380) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4525) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4498) at android.view.View.updateDisplayListIfDirty(View.java:21349) at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:559) at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:565) at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:647) at android.view.ViewRootImpl.draw(ViewRootImpl.java:4448) at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:4175) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:3422) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2206) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:8763) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1352) at android.view.Choreographer.doCallbacks(Choreographer.java:1149) at android.view.Choreographer.doFrame(Choreographer.java:1049) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1333) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:233) at android.app.ActivityThread.main(ActivityThread.java:8068) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:631) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:978)

If I move BlurView to here, It's working fine.

<ThemeContext.Provider value={theme}>
      <RootStoreContext.Provider value={{userStore}}>
        <NavigationContainer ref={navigationRef}>
          <RootNavigator />
          <BlurView
            style={{
              position: "absolute",
              right: 0,
              top: 0,
              left: 0,
              bottom: 0,
              width: "100%",
              height: 240,
            }}
            blurAmount={20}
            overlayColor="rgba(7, 32, 68, 0.65)"
            downsampleFactor={3}
            reducedTransparencyFallbackColor={"white"}
          />
        </NavigationContainer>
      </RootStoreContext.Provider>
    </ThemeContext.Provider>

ghost commented 3 years ago

@react-native-community/blur : 3.6.0 react-naitve : 0.64.1

same here!

[Updated] downgrade this package to 3.3.1. Worked for me

jgillick commented 2 years ago

I'm also experiencing this after upgrading React Navigation to v6

@react-native-community/blur
React Native: 0.66.3
@react-navigation/*: 6.0.11

romancxx commented 2 years ago

Same problem for me. Crash on android after upgrading to react-navigation v6

Fixed on @react-native-community/blur : 3.6.0 by doing :

  const [viewRef, setViewRef] = useState<number | null>(null);
  const messageRef = useRef<View | null>(null);

 const onViewLoaded = () => {
    setViewRef(findNodeHandle(messageRef.current));
  };

return (
<>
   {(viewRef || isIOS()) && <BlurView blurAmount={20} style={{flex:1}} blurType={'dark'} />}
   <View
        ref={(containerRef) => {
          messageRef.current = containerRef;
        }}
        onLayout={onViewLoaded}>
   ....
   </View>
</>
);

kyle-belle commented 2 years ago

Same problem for me. Crash on android after upgrading to react-navigation v6

Fixed on @react-native-community/blur : 3.6.0 by doing :

  const [viewRef, setViewRef] = useState<number | null>(null);
  const messageRef = useRef<View | null>(null);

 const onViewLoaded = () => {
    setViewRef(findNodeHandle(messageRef.current));
  };

return (
<>
   {(viewRef || isIOS()) && <BlurView blurAmount={20} style={{flex:1}} blurType={'dark'} />}
   <View
        ref={(containerRef) => {
          messageRef.current = containerRef;
        }}
        onLayout={onViewLoaded}>
   ....
   </View>
</>
);

Does this blur the content you want it to blur. also this still crashes for me. Also is this within a navigator

CafuChino commented 2 years ago

Same here, still crash after downgrade

kyle-belle commented 2 years ago

Same here, still crash after downgrade

Gonna have to downgrade to react navigation v5 if you wanna use this. This is a shame for a community project

pttuan1994 commented 2 years ago

We can work around to fix this issue as below code:

import React, { useRef, useState, useEffect, useCallback } from "react"
import { AppState } from "react-native"
import { BlurView } from "@react-native-community/blur"
import debounce from "lodash/fp/debounce"

......
const appState = useRef(AppState.currentState)
const [appStateVisible, setAppStateVisible] = useState(appState.current)

const renderBlurView = useCallback(
    debounce(500, () => (
      <BlurView
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: 1,
        }}
        blurType="xlight"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
    )),
    [],
  )

useEffect(() => {
    const subscription: any = AppState.addEventListener("change", (nextAppState) => {
      if (appState.current.match(/inactive|background/) && nextAppState === "active") {
        console.log("App has come to the foreground!")
      }

      appState.current = nextAppState
      setAppStateVisible(appState.current)
      console.log("AppState", appState.current)
    })

    return () => {
      subscription && subscription.remove()
    }
  }, [])

.......

return (
<View>
 {appStateVisible === "active" ? renderBlurView() : null}
</View>
)

FadiAboMsalam commented 2 years ago

any solution to this

kyle-belle commented 2 years ago

any solution to this

If you can, use react navigation v5

Ngomana commented 2 years ago

We can work around to fix this issue as below code:

import React, { useRef, useState, useEffect, useCallback } from "react"
import { AppState } from "react-native"
import { BlurView } from "@react-native-community/blur"
import debounce from "lodash/fp/debounce"

......
const appState = useRef(AppState.currentState)
const [appStateVisible, setAppStateVisible] = useState(appState.current)

const renderBlurView = useCallback(
    debounce(500, () => (
      <BlurView
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: 1,
        }}
        blurType="xlight"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
    )),
    [],
  )

useEffect(() => {
    const subscription: any = AppState.addEventListener("change", (nextAppState) => {
      if (appState.current.match(/inactive|background/) && nextAppState === "active") {
        console.log("App has come to the foreground!")
      }

      appState.current = nextAppState
      setAppStateVisible(appState.current)
      console.log("AppState", appState.current)
    })

    return () => {
      subscription && subscription.remove()
    }
  }, [])

.......

return (
<View>
 {appStateVisible === "active" ? renderBlurView() : null}
</View>
)

RMabroukS commented 2 years ago

This problem is related to the @react-navigation/native": "^6.x.x" and to solve this problem you can implement this code

const [activeBlur, setActiveBlur] = useState(false) useEffect(() => { setActiveBlur(true) }, [])

{activeBlur && <BlurView style={{ position: "absolute", right: 0, top: 0, left: 0, bottom: 0, width: "100%", height: 240, }} blurAmount={20} overlayColor="rgba(7, 32, 68, 0.65)" downsampleFactor={3} reducedTransparencyFallbackColor={"white"} />}

tdaved commented 2 years ago

I can confirm the above works with some modifications. There must be some delay before you load the BlurView on Android, so the screen finishes the animation when the blur view is rendered. So I set a second delay on Android, and also making sure the component is hidden again if the screen is unfocused.

export const BlurBackground: React.FC<BlurBackgroundProps> = () => {
  const [blurActive, setBlurActive] = React.useState(false);

  useFocusEffect(
    React.useCallback(() => {
      setTimeout(
        () => {
          setBlurActive(true);
        },
        Platform.OS === 'ios' ? 0 : 1000,
      );

      return () => {
        setBlurActive(false);
      };
    }, []),
  );

  if (!blurActive) return null;

  return <BlurViewContainer />;
};

Also make sure the BlurView component is only imported within the BlurViewContainer component, otherwise Android crashes again.

invyctus92 commented 2 years ago

I've tried each of these solutions but after a few tries, the app crashes. In my case while navigating back to a page with the blur applied, it crashes. The problem is due to using @react-navigation/native-stack, while if I use @react-navigation/stack for stack creation, app works properly but the animation is not the best. I have opened issues with native-stack but the problem is not with them. This library should update itself to support the new react native features.

dezudas commented 2 years ago

I am still facing the issue in android

"@react-native-community/blur": "^3.6.0",
"@react-navigation/native": "^6.0.8",
"@react-navigation/stack": "^6.1.1",
"react-native": "^0.67.3",

FAILURE: Build failed with an exception.

What went wrong: Execution failed for task ':app:mergeDebugAssets'.
Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.eightbitlab:blurview:1.6.3. Searched in the following locations:
- file:**/node_modules/react-native/android/com/eightbitlab/blurview/1.6.3/blurview-1.6.3.pom
- file:**/node_modules/jsc-android/dist/com/eightbitlab/blurview/1.6.3/blurview-1.6.3.pom
- https://repo.maven.apache.org/maven2/com/eightbitlab/blurview/1.6.3/blurview-1.6.3.pom
- https://dl.google.com/dl/android/maven2/com/eightbitlab/blurview/1.6.3/blurview-1.6.3.pom
- https://www.jitpack.io/com/eightbitlab/blurview/1.6.3/blurview-1.6.3.pom Required by: project :app > project :react-native-community_blur

mjm918 commented 2 years ago

Guys, did you manage to fix this? Stuck here since morning

epshtielsl commented 2 years ago

Same here, still crash after downgrade

Gonna have to downgrade to react navigation v5 if you wanna use this. This is a shame for a community project

I downgraded to @^5.x and still had crashes using BlurView.

epshtielsl commented 2 years ago

I took some of the suggestions in here and made a handy wrapper class. Code below if anyone wants to try it out.

import React, { useEffect, useState } from 'react'
import Animated, {
    BaseAnimationBuilder,
    EntryExitAnimationFunction,
    FadeIn,
} from 'react-native-reanimated'

export interface BlurViewContainerProps {
    entering?:
        | typeof BaseAnimationBuilder
        | BaseAnimationBuilder
        | EntryExitAnimationFunction
}

export const BlurViewContainer: React.FC<BlurViewContainerProps> = ({
    entering = FadeIn,
    children,
}) => {
    const [blurActive, setBlurActive] = useState(false)

    useEffect(() => {
        const timer = setTimeout(() => {
            setBlurActive(true)
        }, 200)

        return () => clearTimeout(timer)
    }, [])

    if (!blurActive) return null

    return <Animated.View entering={entering}>{children}</Animated.View>
}

Usage

import { View } from 'react-native'
import { BlurView } from '@react-native-community/blur'
import { BlurViewContainer } from 'components'
// other imports

   ...
   <BlurViewContainer>
      <View style={styles.view}>
         // Absolutely positioned BlurView
         <BlurView style={styles.blurView}/>

         // content to show on top of BlurView
         ...
      </View>
   </BlurViewContainer>
   ...

anhquan291 commented 2 years ago

This problem is related to the @react-navigation/native": "^6.x.x" and to solve this problem you can implement this code

const [activeBlur, setActiveBlur] = useState(false) useEffect(() => { setActiveBlur(true) }, [])

{activeBlur && <BlurView style={{ position: "absolute", right: 0, top: 0, left: 0, bottom: 0, width: "100%", height: 240, }} blurAmount={20} overlayColor="rgba(7, 32, 68, 0.65)" downsampleFactor={3} reducedTransparencyFallbackColor={"white"} />}

Still crash on RN 0.67 and navigation v6. Any solutions? Thank you

FlyingMonkeyKing commented 2 years ago

I try to setTimeout for 500ms, and now it wont crash. I dont know why, but this is a way to solve in Android's crash. Looking forward to better answers

fukemy commented 2 years ago

i got this crash too, gonna leave this lib

AndonMitev commented 1 year ago

guys can you share what lib you are using for blur that works on Android && iOS?

anujraghuvanshi commented 10 months ago

I am getting this and other issue, When I am putting inside conditional check then its not working. Anyonce faced this issue?

Kureev / react-native-blur

Crash on Android #452

@react-native-community/blur :^3.6.0 react-native: 0.65.1

FAILURE: Build failed with an exception.