react-native-blur: Crash on Android

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

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 15
Comments: 22

Most upvoted comments

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

dezudas on Mar 12, 2022

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

jgillick on Dec 8, 2021

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.

invyctus92 on Feb 17, 2022

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

AndonMitev on Jan 16, 2023

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

pttuan1994 on Jan 8, 2022