Screen freeze when close RN Modal with Gesture (new architecture)

[denysoleksiienko]

Description

Native Modal uses Gesture from the react-native-gesture-handler so that the Modal can be closed by swiping down. In iOS, after closing the mode and switching to another screen, the app freezes. There is a message in Xcode that the application has stopped.

It happens when I use the new architecture RCT_NEW_ARCH_ENABLED=1, but if disabled then it works well
Android looks good.

In Xcode console 2 errors:
*** Assertion failure in -[RCTViewComponentView unmountChildComponentView:index:](), /Users/denys/test/RGModal/node_modules/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm:141

Terminating app due to uncaught exception 'NSInternalInconsistencyException'

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Attempt to unmount a view which is mounted inside different view. (parent: <RNSScreenView: 0x10b3b1a00; frame = (0 0; 393 773); tag = 50; layer = <CALayer: 0x6000002f24c0>>, child: <RCTViewComponentView: 0x1197186c0; frame = (0 0; 393 98); tag = 44; layer = <CALayer: 0x6000002f25e0>>, index: 3)'
*** First throw call stack:
(
	0   CoreFoundation                      0x00000001804ae0f8 __exceptionPreprocess + 172
	1   libobjc.A.dylib                     0x0000000180087db4 objc_exception_throw + 56
	2   Foundation                          0x0000000180d1718c -[NSMutableDictionary(NSMutableDictionary) classForCoder] + 0
	3   RGModal                             0x0000000104da0c84 -[RCTViewComponentView unmountChildComponentView:index:] + 560
	4   RGModal                             0x0000000104771aec -[RNSScreenView unmountChildComponentView:index:] + 244
	5   RGModal                             0x0000000104cf7d40 _ZL27RCTPerformMountInstructionsRKNSt3__16vectorIN8facebook5react18ShadowViewMutationENS_9allocatorIS3_EEEEP24RCTComponentViewRegistryR41RCTMountingTransactionObserverCoordinatori + 1344
	6   RGModal                             0x0000000104cf77f4 _ZZ41-[RCTMountingManager performTransaction:]ENK3$_1clERKN8facebook5react19MountingTransactionERKNS1_16SurfaceTelemetryE + 80
	7   RGModal                             0x0000000104cf7798 _ZNSt3__18__invokeB8ue170006IRZ41-[RCTMountingManager performTransaction:]E3$_1JRKN8facebook5react19MountingTransactionERKNS4_16SurfaceTelemetryEEEEDTclclsr3stdE7declvalIT_EEspclsr3stdE7declvalIT	8   RGModal                             0x0000000104cf7740 _ZNSt3__128__invoke_void_return_wrapperIvLb1EE6__callB8ue170006IJRZ41-[RCTMountingManager performTransaction:]E3$_1RKN8facebook5react19MountingTransactionERKNS6_16SurfaceTelemetryEEEEvDpOT_ + 40
	9   RGModal                             0x0000000104cf770c _ZNSt3__110__function12__alloc_funcIZ41-[RCTMountingManager performTransaction:]E3$_1NS_9allocatorIS2_EEFvRKN8facebook5react19MountingTransactionERKNS6_16SurfaceTelemetryEEEclB8ue170006ES9_SC_ + 	10  RGModal                             0x0000000104cf6578 _ZNSt3__110__function6__funcIZ41-[RCTMountingManager performTransaction:]E3$_1NS_9allocatorIS2_EEFvRKN8facebook5react19MountingTransactionERKNS6_16SurfaceTelemetryEEEclES9_SC_ + 44
	11  RGModal                             0x0000000104b2c9c4 _ZNKSt3__110__function12__value_funcIFvRKN8facebook5react19MountingTransactionERKNS3_16SurfaceTelemetryEEEclB8ue170006ES6_S9_ + 84
	12  RGModal                             0x0000000104b2b9a0 _ZNKSt3__18functionIFvRKN8facebook5react19MountingTransactionERKNS2_16SurfaceTelemetryEEEclES5_S8_ + 40
	13  RGModal                             0x0000000104b2b7fc _ZNK8facebook5react19TelemetryController15pullTransactionERKNSt3__18functionIFvRKNS0_19MountingTransactionERKNS0_16SurfaceTelemetryEEEESD_SD_ + 292
	14  RGModal                             0x0000000104cf1b9c -[RCTMountingManager performTransaction:] + 480
	15  RGModal                             0x0000000104cf198c -[RCTMountingManager initiateTransaction:] + 372
	16  RGModal                             0x0000000104cf13a0 __42-[RCTMountingManager scheduleTransaction:]_block_invoke + 324
	17  RGModal                             0x0000000104937074 __RCTExecuteOnMainQueue_block_invoke + 40
	18  libdispatch.dylib                   0x0000000108cd7ec4 _dispatch_call_block_and_release + 24
	19  libdispatch.dylib                   0x0000000108cd973c _dispatch_client_callout + 16
	20  libdispatch.dylib                   0x0000000108ce93f8 _dispatch_main_queue_drain + 1228
	21  libdispatch.dylib                   0x0000000108ce8f1c _dispatch_main_queue_callback_4CF + 40
	22  CoreFoundation                      0x000000018040e960 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 12
	23  CoreFoundation                      0x0000000180409078 __CFRunLoopRun + 1936
	24  CoreFoundation                      0x00000001804084d4 CFRunLoopRunSpecific + 572
	25  GraphicsServices                    0x000000018ef2aae4 GSEventRunModal + 160
	26  UIKitCore                           0x00000001853d0a28 -[UIApplication _run] + 868
	27  UIKitCore                           0x00000001853d46b0 UIApplicationMain + 124
	28  RGModal                             0x000000010452f3cc main + 96
	29  dyld                                0x0000000107781544 start_sim + 20
	30  ???                                 0x00000001079660e0 0x0 + 4422263008
	31  ???                                 0x662e000000000000 0x0 + 7362822440797339648
)
libc++abi: terminating due to uncaught exception of type NSException

screen-recording-2024-08-04-at-222744_vQkIpvHu.mp4

Steps to reproduce

1. open the app
2. press "show modal" button to open modal screen in iOS
3. swipe down to close
4. try navigate to another tab in bottom
5. the app freezes

Snack or a link to a repository

https://github.com/denysoleksiienko/modal-freeze-gesture

Screens version

3.32.0

React Native version

0.74.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[tboba]

Hey hey @denysoleksiienko, thanks for creating this PR! Have you checked if this error still exists with react-native-screens 3.34.0 version installed? I believe this error should be fixed by PR #2249.

[denysoleksiienko]

Hey @tboba. I updated RN to "react-native": "0.75.0-rc.6", because react-native-screens 3.34.0 doesn't work on RN 0.74.

So, I checked 3.34.0 and the error still exists

[alduzy]

I've investigated it and found that the issue is not caused by closing the modal itself. If you remove the extra condition (modal has it's own visible prop) the crash is easily triggered by navigating between the tabs without even opening the modal:

      {/* {visible && ( */}
      <Modal visible={visible} onClose={() => setVisible(false)}>
        <Text>Modal</Text>
      </Modal>
      {/* )} */}

@denysoleksiienko Upgrading the @react-navigation packages to 7.x (upgrading guide) resolved the issue for me. Let me know if that works for you.

[denysoleksiienko]

@alduzy , yes, I tested @react-navigation v7 rc and it resolved the issue. Thank you

[brentvatne]

@alduzy - do you happen to know what change in react-navigation v7 is responsible for fixing this? ideally we can backport this to react-navigation v6 to make the transition to new arch a little bit easier for people

[alduzy]

@brentvatne check out this PR: react-navigation/react-navigation#11323

[denysoleksiienko]

hey @brentvatne
if there is a problem, is it possible to disable animation for the bottom tabs? Looks like a problem not only with Modal for me in new arch. I created a small Accordion component using react-native-reanimated and it also crashed the app on the Tab screen