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 [email protected]. 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 :)