fix(iOS, Stack v4): Fix usePreventRemove callback not called when tapping formSheet backdrop (#3771)

## Description

When using a `FormSheet` with `preventNativeDismiss` enabled, swiping
down the sheet correctly triggers the event for dismiss cancellation to
JS. However, tapping the dimming backdrop fails to trigger it.
When `presentationControllerShouldDismiss:` returns `NO`, UIKit cancels
the dismissal. For swipe gestures, it still calls the
`presentationControllerDidAttemptToDismiss` method. For backdrop taps,
it simply drops the touch event entirely without any notification.
We can fix this by attaching a custom `UITapGestureRecognizer` directly
to the `containerView` (covering the whole Screen) and simply ignoring
taps that are inside the `FormSheet` or its content, which ensures the
gesture only recognizes taps on the dimming view. Then, we can send an
event back to JS via `notifyDismissCancelledWithDismissCount` if
`preventNativeDismiss` is enabled.

Closes:
#3568

## Changes

- Added `backdropTapGestureRecognizer` and logic for sending proper
event to the JS when backdrop was tapped under certain conditions.

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/aca68f50-f4a1-42b2-90ef-6658a074ec2c"
/> | <video
src="https://github.com/user-attachments/assets/b23f01e6-7a5f-499d-9299-ff945c850785"
/> |

## Test plan

Added Test3568, verified that there's no regression in
#2129

## Checklist

- [x] Included code example that can be used to test this change.
- [ ] Updated / created local changelog entries in relevant test files.
- [x] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

Author: t0maboro

apps/src/tests/issue-tests/Test3568.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet, Alert } from 'react-native';
+import {
+  NavigationContainer,
+  usePreventRemove,
+  useNavigation,
+} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import Colors from '../../shared/styling/Colors';
+
+type StackParamList = {
+  Home: undefined;
+  FormSheet: undefined;
+};
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+function HomeScreen({
+  navigation,
+}: NativeStackScreenProps<StackParamList, 'Home'>) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>
+        FormSheet iOS usePreventRemove callback bug
+      </Text>
+      <Button
+        title="Open sheet"
+        onPress={() => navigation.navigate('FormSheet')}
+      />
+    </View>
+  );
+}
+
+function FormSheetContent() {
+  const [preventRemove, setPreventRemove] = React.useState(false);
+  const navigation = useNavigation();
+
+  usePreventRemove(preventRemove, ({ data }) => {
+    Alert.alert(
+      'Discard changes?',
+      'You have unsaved changes. Are you sure you want to leave?',
+      [
+        {
+          text: 'Keep editing',
+          style: 'cancel',
+          onPress: () => {},
+        },
+        {
+          text: 'Discard',
+          style: 'destructive',
+          onPress: () => navigation.dispatch(data.action),
+        },
+      ],
+    );
+  });
+
+  return (
+    <View style={styles.sheetContainer}>
+      <Button
+        title={preventRemove ? 'Prevent Remove: ON' : 'Prevent Remove: OFF'}
+        onPress={() => setPreventRemove(existing => !existing)}
+      />
+      <Text style={styles.sheetTitle}>Sheet Content</Text>
+      <Text style={styles.sheetText}>
+        Toggle the button above, then try to swipe down or close the sheet to
+        see the Alert in action.
+      </Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          name="FormSheet"
+          component={FormSheetContent}
+          options={{
+            presentation: 'formSheet',
+            headerShown: false,
+            sheetAllowedDetents: 'fitToContents',
+            sheetCornerRadius: 20,
+            sheetGrabberVisible: true,
+            contentStyle: {
+              backgroundColor: Colors.White,
+            },
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  sheetContainer: {
+    padding: 20,
+  },
+  sheetTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginVertical: 20,
+  },
+  sheetText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginVertical: 10,
+  },
+});

apps/src/tests/issue-tests/index.ts

@@ -176,6 +176,7 @@ export { default as Test3521 } from './Test3521';
 export { default as Test3522 } from './Test3522';
 export { default as Test3564 } from './Test3564';
 export { default as Test3566 } from './Test3566';
+export { default as Test3568 } from './Test3568';
 export { default as Test3576 } from './Test3576';
 export { default as Test3596 } from './Test3596';
 export { default as Test3611 } from './Test3611';

ios/RNSScreen.mm

@@ -56,6 +56,7 @@
 
 @interface RNSScreenView () <
     UIAdaptivePresentationControllerDelegate,
+    UIGestureRecognizerDelegate,
 #if !TARGET_OS_TV
     UISheetPresentationControllerDelegate,
 #endif
@@ -76,6 +77,7 @@ @implementation RNSScreenView {
   ContentWrapperBox _contentWrapperBox;
   bool _sheetHasInitialDetentSet;
   BOOL _shouldUpdateScrollEdgeEffects;
+  UITapGestureRecognizer *_backdropTapGestureRecognizer;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTSurfaceTouchHandler *_touchHandler;
   react::RNSScreenShadowNode::ConcreteState::Shared _state;
@@ -608,6 +610,7 @@ - (void)notifyDismissCancelledWithDismissCount:(int)dismissCount
 
 - (void)notifyWillAppear
 {
+  [self setupBackdropTapGestureRecognizer];
 #ifdef RCT_NEW_ARCH_ENABLED
   // If screen is already unmounted then there will be no event emitter
   if (_eventEmitter != nullptr) {
@@ -880,6 +883,34 @@ - (void)presentationControllerDidDismiss:(UIPresentationController *)presentatio
   }
 }
 
+- (void)setupBackdropTapGestureRecognizer
+{
+  if (self.stackPresentation != RNSScreenStackPresentationFormSheet &&
+      self.stackPresentation != RNSScreenStackPresentationPageSheet &&
+      self.stackPresentation != RNSScreenStackPresentationModal) {
+    return;
+  }
+
+  UIPresentationController *presentationController = _controller.presentationController;
+
+  if (presentationController && presentationController.containerView && !_backdropTapGestureRecognizer) {
+    _backdropTapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
+                                                                            action:@selector(handleBackdropTap:)];
+    _backdropTapGestureRecognizer.delegate = self;
+    _backdropTapGestureRecognizer.cancelsTouchesInView = NO;
+    [presentationController.containerView addGestureRecognizer:_backdropTapGestureRecognizer];
+  }
+}
+
+- (void)handleBackdropTap:(UITapGestureRecognizer *)gesture
+{
+  if (gesture.state == UIGestureRecognizerStateRecognized) {
+    if (_preventNativeDismiss) {
+      [self notifyDismissCancelledWithDismissCount:1];
+    }
+  }
+}
+
 - (nullable RNSScreenStackHeaderConfig *)findHeaderConfig
 {
   // Fast path
@@ -1336,6 +1367,38 @@ - (void)safeAreaInsetsDidChange
   [self dispatchSafeAreaDidChangeNotification];
 }
 
+#pragma mark - UIGestureRecognizerDelegate
+
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
+{
+  if (gestureRecognizer == _backdropTapGestureRecognizer) {
+    // When native dismissal is not being prevented, this recognizer should not
+    // participate in handling touches to avoid interfering with UIKit.
+    if (!_preventNativeDismiss) {
+      return NO;
+    }
+
+    UIPresentationController *presentationController = _controller.presentationController;
+
+    // Ignore any touches that land inside the actual sheet content.
+    if (presentationController && presentationController.presentedView &&
+        [touch.view isDescendantOfView:presentationController.presentedView]) {
+      return NO;
+    }
+    return YES;
+  }
+  return YES;
+}
+
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
+    shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
+{
+  if (gestureRecognizer == _backdropTapGestureRecognizer) {
+    return YES;
+  }
+  return NO;
+}
+
 #pragma mark - Fabric specific
 #ifdef RCT_NEW_ARCH_ENABLED