Crash with back button - 4.6.0-beta.0.

[GaylordP]

Description

Hello and thank you @kkafar for your amazing work! :)

The version 4.6.0-beta.0 released yesterday indeed fixes the Pressable elements in the headers. However, my application crashes as soon as the back button is used. I am encountering the same error as described in these issues: link 1, link 2.

Cannot remove child at index 3 from parent ViewGroup [6334], only 4 children in parent. Warning: childCount may be incorrect!

E  Exception thrown when executing UIFrameGuarded
java.lang.IllegalStateException: Cannot remove child at index 3 from parent ViewGroup [6334], only 4 children in parent. Warning: childCount may be incorrect!
at com.facebook.react.fabric.mounting.SurfaceMountingManager.removeViewAt(SurfaceMountingManager.java:588)
at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:121)
at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:387)
at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:293)
at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:126)
at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1394)
at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.kt:22)
at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(ReactChoreographer.kt:60)
at com.facebook.react.modules.core.ReactChoreographer.$r8$lambda$nSkFhrr5T7rop_XKwzlLov4NLLw(Unknown Source:0)
at com.facebook.react.modules.core.ReactChoreographer$$ExternalSyntheticLambda0.doFrame(D8$$SyntheticClass:0)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1350)
at android.view.Choreographer.doCallbacks(Choreographer.java:1149)
at android.view.Choreographer.doFrame(Choreographer.java:1040)
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)
Caused by: java.lang.IndexOutOfBoundsException
at android.view.ViewGroup.removeViewsInternal(ViewGroup.java:5672)
at android.view.ViewGroup.removeViewsInLayout(ViewGroup.java:5519)
at com.facebook.react.views.view.ReactViewGroup.removeViewsInLayout(ReactViewGroup.java:639)
at com.facebook.react.views.view.ReactViewGroup.removeViewWithSubviewClippingEnabled(ReactViewGroup.java:772)
at com.facebook.react.views.view.ReactClippingViewManager.removeViewAt(ReactClippingViewManager.java:77)
at com.facebook.react.views.view.ReactClippingViewManager.removeViewAt(ReactClippingViewManager.java:21)
at com.facebook.react.fabric.mounting.SurfaceMountingManager.removeViewAt(SurfaceMountingManager.java:563)
at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:121) 
at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:387) 
at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:293) 
at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:126) 
at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1394) 
at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.kt:22) 
at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(ReactChoreographer.kt:60) 
at com.facebook.react.modules.core.ReactChoreographer.$r8$lambda$nSkFhrr5T7rop_XKwzlLov4NLLw(Unknown Source:0) 
at com.facebook.react.modules.core.ReactChoreographer$$ExternalSyntheticLambda0.doFrame(D8$$SyntheticClass:0) 
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1350) 
at android.view.Choreographer.doCallbacks(Choreographer.java:1149) 
at android.view.Choreographer.doFrame(Choreographer.java:1040) 
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) 

My application is very basic: React Navigation Bottom Tab > React Navigation Native Stack. There are no special features or overrides of the back button.

All my packages are up to date, and I have cleared the caches properly (deleted node_modules, ran npx reset cache, and performed a Gradle clean).

I remain at your disposal if you need additional information.

Steps to reproduce

Just use version 4.6.0-beta.0.

Snack or a link to a repository

Don't have because only with One Plus real device

Screens version

4.6.0-beta.0

React Native version

0.76.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

One Plus 6

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Hey @GaylordP thanks for the report. The library is in a bit of awkward place at the moment. Since 4.5.0 the lib is supposed to work with new architecture only on react-native@0.77. 0.77 was supposed to be released early this week, however it got delayed due to some discovered issues.

4.6.0-beta.0 comes with

• fix: remove workaround for removing clipped subviews #2596

which assumes you're running on 0.77.

There are two sensible solutions right now:

1. You upgrade to 0.77.0-rc.6, which is the newest RC version for 0.77 I believe
2. Or you patch the react-native-screens library by reverting changes from fix: remove workaround for removing clipped subviews #2596

I'll pin the issue, because it might affect many people before 0.77 is released.

[GaylordP]

Thank you very much for this information :)

[tiempham]

Same issue with react-native-screens: 4.5.0 and react native 0.76.6

[kkafar]

@tiempham yes, indeed, 4.5.0 won't work with 0.76. I kindly nudge you to read my message above ☝

[dev-shahbazshaikh]

@kkafar actually, mine is working with 0.76.5 react-native and 4.5.0 react-native-screens. It gave me error with "^4.0.0" which installed recently released 4.6.0 version of react-native-screens

[kkafar]

Ok, then stick to it. However I would recommend upgrading to 0.77 😉

[RohovDmytro]

@tiempham yes, indeed, 4.5.0 won't work with 0.76. I kindly nudge you to read my #2629 (comment) ☝

@kkafar do you mean with any arch or it will not work only with the new arch? I was assuming it will work on an old arch with both 0.76 & 0.77

UPDATE:
I've managed to follow your link and then I've managed to find an answer to my question. :)

[mohamed-grt]

I have the same crash with screens version 4.4.0, react native 0.76.5, and Android 7.1.1.
The new architecture is enabled.

It gives the error "cannot remove child at index X from parent ViewGroup" and then crashes.

I tried to update it to 4.5.0, but it didn't fix it. I can't update to react native 0.77 right now because I'm using expo integration in my bar react native project, and expo hasn't released a compatible version with 0.77 yet.

Also, I checked the workaround mentioned in this comment, and I found it is already there in 4.4.0, but it is still crashing in Android 7.1.1.

So can someone help with this?

[kkafar]

AFAIK expo sdk 52 supports 0.77 (or it will soon enough)

[mohamed-grt]

AFAIK expo sdk 52 supports 0.77 (or it will soon enough)

I already tried recently to update, and the Expo complained.

[mobinni]

I am still seeing this on 0.77 with 4.5.0 where I manually plucked this patch #2596 - Updating to 4.6.0 now.

It seems to be happening when navigating back from a screen with a flashlist