[Android] Crash on screen navigation #461

TommysG · 2022-02-26T18:16:00Z

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 · 2022-03-26T17:07:44Z

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 · 2022-03-27T08:59:14Z

same problem

yunesuk · 2022-04-06T10:47:43Z

same here !

mjm918 · 2022-04-09T01:21:42Z

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 : software-mansion/react-native-screens#1287 (comment)

danver0921 · 2022-05-05T12:13:26Z

Same problem

Josiahhenry23 · 2022-05-20T00:52:25Z

Same Problem Here.

idrissakhi · 2022-05-20T09:10:54Z

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 · 2022-05-20T17:37:58Z

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 · 2022-05-20T18:18:06Z

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 · 2022-06-04T01:51:29Z

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 · 2022-06-13T07:19:50Z

Same here !

ZaidQ797 · 2022-09-28T14:12:31Z

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 · 2022-10-12T17:45:27Z

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 · 2022-11-22T12:18:06Z

This patch helped me to resolve this issue.

yarn add @react-native-blur@4.2.0 (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 · 2023-03-25T15:54:05Z

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 · 2023-04-21T05:14:32Z

good

Titozzz · 2023-05-01T21:01:55Z

Should be fixed on latest

vlimag · 2023-05-08T16:34:20Z

hmm still experiencing the issue.

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

archidigital · 2023-05-30T14:57:04Z

I've tested and the issue was fixed

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

bpeyrouBDHIS · 2023-06-05T14:03:51Z

Same issue also, not fixed for me

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

zahid502 · 2023-06-15T15:21:19Z

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

MarcusDelvecchio · 2023-08-21T16:37:30Z

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

zero19124 · 2024-05-06T08:53:55Z

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

Wunsz mentioned this issue Jun 17, 2022

[Android] Crash on screen navigation idrisssakhi/blurView#6

Closed

sliptype mentioned this issue Oct 26, 2022

[C-1369] Fix account screen crash on android AudiusProject/audius-client#2180

Merged

chenop mentioned this issue Nov 22, 2022

[Android] Fatal Exception: java.lang.IllegalArgumentException #489

Closed

Shibi-LC mentioned this issue Mar 20, 2023

Android app crash Fix while Navigation #534

Closed

Titozzz closed this as completed May 1, 2023

SHYDEV-KR mentioned this issue Sep 25, 2023

When use BlurView in Android for example in a card, when navigate these screen put white background in all screen #595

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] Crash on screen navigation #461

[Android] Crash on screen navigation #461

TommysG commented Feb 26, 2022 •

edited

Loading

TommysG commented Mar 26, 2022 •

edited

Loading

star-heng commented Mar 27, 2022

yunesuk commented Apr 6, 2022

mjm918 commented Apr 9, 2022 •

edited

Loading

danver0921 commented May 5, 2022

Josiahhenry23 commented May 20, 2022

idrissakhi commented May 20, 2022

TommysG commented May 20, 2022

mjm918 commented May 20, 2022

aaly00 commented Jun 4, 2022 •

edited

Loading

devin989 commented Jun 13, 2022

ZaidQ797 commented Sep 28, 2022

dominictobias commented Oct 12, 2022 •

edited

Loading

chenop commented Nov 22, 2022 •

edited

Loading

samvoults commented Mar 25, 2023

leil309 commented Apr 21, 2023

Titozzz commented May 1, 2023

vlimag commented May 8, 2023 •

edited

Loading

archidigital commented May 30, 2023 •

edited

Loading

bpeyrouBDHIS commented Jun 5, 2023

zahid502 commented Jun 15, 2023

MarcusDelvecchio commented Aug 21, 2023

zero19124 commented May 6, 2024

[Android] Crash on screen navigation #461

[Android] Crash on screen navigation #461

Comments

TommysG commented Feb 26, 2022 • edited Loading

Workaround

Versions

TommysG commented Mar 26, 2022 • edited Loading

star-heng commented Mar 27, 2022

yunesuk commented Apr 6, 2022

mjm918 commented Apr 9, 2022 • edited Loading

danver0921 commented May 5, 2022

Josiahhenry23 commented May 20, 2022

idrissakhi commented May 20, 2022

TommysG commented May 20, 2022

mjm918 commented May 20, 2022

aaly00 commented Jun 4, 2022 • edited Loading

devin989 commented Jun 13, 2022

ZaidQ797 commented Sep 28, 2022

dominictobias commented Oct 12, 2022 • edited Loading

chenop commented Nov 22, 2022 • edited Loading

samvoults commented Mar 25, 2023

leil309 commented Apr 21, 2023

Titozzz commented May 1, 2023

vlimag commented May 8, 2023 • edited Loading

archidigital commented May 30, 2023 • edited Loading

I've tested and the issue was fixed

bpeyrouBDHIS commented Jun 5, 2023

zahid502 commented Jun 15, 2023

MarcusDelvecchio commented Aug 21, 2023

zero19124 commented May 6, 2024

TommysG commented Feb 26, 2022 •

edited

Loading

TommysG commented Mar 26, 2022 •

edited

Loading

mjm918 commented Apr 9, 2022 •

edited

Loading

aaly00 commented Jun 4, 2022 •

edited

Loading

dominictobias commented Oct 12, 2022 •

edited

Loading

chenop commented Nov 22, 2022 •

edited

Loading

vlimag commented May 8, 2023 •

edited

Loading

archidigital commented May 30, 2023 •

edited

Loading