[Android] Crash on screen navigation

[TommysG]

The app is crashing without error when i add the BlurView component in my stack screen.

Workaround

<Stack.Navigator screenOptions={{animationEnabled: false}}>
  ...
  ...
</Stack.Navigator>

But i don't have the nice transitions between the screens.

Any solution for this?

Versions

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

[TommysG]

Update!!!

The problem is not with navigation Stack it's when using bottom Tabs. I placed the screen with the blurview out of the Bottom Tabs, in my initial Stack Screen and it's working fine.

The order of my Navigation (Stack/Tabs) now is like this:

-- Initial Stack
    -- Tabs Navigator 
       - Screen 1
       - Screen 2
       - ...
    -- Stack
       - Screen 1 with blur
       - Screen 2 with blur
       - ...

[star-heng]

same problem

[YounesKHENIFER]

same here !

[mjm918]

Hi everyone, I provided a reproduction of this issue in react-native-screens repo. If you check the log, you will find that it's happening because of react native screens.

It seems the author is not responding to the issue.

If you comment in that issue, I think it will catch the attention of the author. The issue link : https://github.com/software-mansion/react-native-screens/issues/1287#issuecomment-1074883686

[JiSikKim]

Same problem

[Josiahhenry23]

Same Problem Here.

[idrissakhi]

i have re-written the lib to work correctly on new RN version => https://www.npmjs.com/package/rn-id-blurview need some support so the react community take it to replace this package that seems to not be maintained anymore

[TommysG]

i have re-written the lib to work correctly on new RN version => https://www.npmjs.com/package/rn-id-blurview need some support so the react community take it to replace this package that seems to not be maintained anymore

On Android i'm still getting this Exception while using it inside a StackScreen which is wrapped inside BottomTabs and i'm navigating from ScreenA to ScreenB inside the StackScreen.

java.lang.IndexOutOfBoundsException: Index: 1, Size: 0

FATAL EXCEPTION: main
Process: com.awesometsproject, PID: 9847
java.lang.IndexOutOfBoundsException: Index: 1, Size: 0
	at java.util.ArrayList.get(ArrayList.java:437)
	at android.view.ViewGroup.getAndVerifyPreorderedView(ViewGroup.java:3659)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4147)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:744)
	at android.view.View.draw(View.java:21293)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
	at com.facebook.react.views.view.ReactViewGroup.drawChild(ReactViewGroup.java:772)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:744)
	at android.view.View.draw(View.java:21424)
	at android.view.View.draw(View.java:21295)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
	at com.facebook.react.ReactRootView.dispatchDraw(ReactRootView.java:226)
	at android.view.View.draw(View.java:21293)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
	at android.view.View.draw(View.java:21424)
	at eightbitlab.com.blurview.BlockingBlurController.updateBlur(BlockingBlurController.java:113)
	at eightbitlab.com.blurview.BlockingBlurController$1.onPreDraw(BlockingBlurController.java:53)
	at android.view.ViewTreeObserver.dispatchOnPreDraw(ViewTreeObserver.java:1088)
	at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2745)
	at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1721)
	at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7598)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:966)
	at android.view.Choreographer.doCallbacks(Choreographer.java:790)
	at android.view.Choreographer.doFrame(Choreographer.java:725)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:951)
	at android.os.Handler.handleCallback(Handler.java:883)
	at android.os.Handler.dispatchMessage(Handler.java:100)
	at android.os.Looper.loop(Looper.java:214)
	at android.app.ActivityThread.main(ActivityThread.java:7356)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

[mjm918]

java.lang.IndexOutOfBoundsException

Hi @TommysG last time we found out that the crash happens because of the Android BlurView & also because of react-native-screens. There was a PR to fix the issue in react-native-screens which can be found here . Use this PR to fix the issue.

I checked the repo of @idrissakhi and noticed that the repo is using the latest version of BlurView. So I think it should solve your crash issue

[aaly00]

I can confirm that @idrissakhi fork didn't work for me.

These are the packages I had installed

    "react-native": "0.64.3",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "react-native-screens": "^3.13.1",

[devin989]

Same here !

[ZaidQ797]

I have the same issue but This is cuz of position absolute in style.But if you remove that then blurView is not visible

[dominictobias]

It doesn't crash for me but just doesn't work - it's a solid color on Android (Galaxy S22, Android 12)

<BlurView
  blurType="dark"
  style={StyleSheet.absoluteFill}
  reducedTransparencyFallbackColor={DarkTheme.background.grey80}
  blurAmount={4}
  blurRadius={5}
/>

[chenop]

This patch helped me to resolve this issue.

• yarn add @[email protected] (the patch is for 4.2.0)
• in package.json add: "scripts": { "postinstall": "patch-package" }
• yarn add patch-package postinstall-postinstall
• create under root "patches" directory
• copy this patch inside "patches"
• yarn

[samvoults]

The problem disappear when I remove the animation on the stack navigator from react-navigation/native-stack :

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const HomeStack = createNativeStackNavigator();

export default function PartiesNavigator() {
  return (
    <HomeStack.Navigator
      initialRouteName="HomeStack"
      screenOptions={{
        presentation: "card",
        animation: "none", // <=====  I ADDED THIS LINE
      }}
    >
      <HomeStack.Screen
        name="Homescreen"
        component={Homescreen}
      />

      <HomeStack.Screen // <=====  THIS IS THE SCREEN USING THE BLURVIEW 
        name="ScreenUsingBlurView"
        component={ScreenUsingBlurView}
      />
    </HomeStack.Navigator>
  );
}

It's still not a fix as I would like to have the default card animation on Android.

[leil309]

good

[Titozzz]

Should be fixed on latest

[vlimag]

hmm still experiencing the issue.

---

react-native-blur version 4.3.2 rn: 0.71.3 react-navigation v6

[archidigital]

I've tested and the issue was fixed

react-native: 0.71.6 @react-native-community/blur: 4.3.2 @react-navigation: v6

[bpeyrouBDHIS]

Same issue also, not fixed for me

react-native-blur version 4.3.2 rn: 0.71.1 react-navigation v6

[zahid502]

I'm facing the same issue, not fixed for me.

[MarcusDelvecchio]

Also facing the same issue and unable to resolve by removing navigation animations.

[zero19124]

The problem disappear when I remove the animation on the stack navigator from react-navigation/native-stack :

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const HomeStack = createNativeStackNavigator();

export default function PartiesNavigator() {
  return (
    <HomeStack.Navigator
      initialRouteName="HomeStack"
      screenOptions={{
        presentation: "card",
        animation: "none", // <=====  I ADDED THIS LINE
      }}
    >
      <HomeStack.Screen
        name="Homescreen"
        component={Homescreen}
      />

      <HomeStack.Screen // <=====  THIS IS THE SCREEN USING THE BLURVIEW 
        name="ScreenUsingBlurView"
        component={ScreenUsingBlurView}
      />
    </HomeStack.Navigator>
  );
}

It's still not a fix as I would like to have the default card animation on Android.

thx it works