Crash on Android

[zxy-c]

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

[pjaeyoung]

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

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]

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]

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]

Same here, still crash after downgrade

[kyle-belle]

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]

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]

any solution to this

[kyle-belle]

any solution to this

If you can, use react navigation v5

[Ngomana]

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]

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]

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]

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]

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]

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

[epshtielsl]

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]

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]

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]

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]

i got this crash too, gonna leave this lib

[AndonMitev]

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

[anujraghuvanshi]

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