fix(iOS): allow to interactively swipe down the modal (#51483)

Summary:
This PR allows to interactively close the modal using the swipe down gesture.

It fixes 5 year old issue: #29319

In short it removes `modalInPresentation` which according to the documentation causes: "UIKit ignores events outside the view controller’s bounds and **prevents the interactive dismissal of the view controller while it is onscreen.**".

It also adds another delegate event to call onRequestClose whenever modal is closed by gesture.

https://github.com/user-attachments/assets/8849ecba-f762-47ec-a28b-b41c1991a882

## Changelog:

[IOS] [ADDED] - Allow to interactively swipe down the modal.
Add allowSwipeDismissal prop.

Pull Request resolved: #51483

Test Plan: Test if swiping down the modal calls onRequestClose

Reviewed By: rshest

Differential Revision: D75125438

Pulled By: javache

fbshipit-source-id: d4f2c8b59447680f405b725d0809573a937f97cf

Author: okwasniewski

packages/react-native/Libraries/Modal/Modal.d.ts

@@ -35,9 +35,9 @@ export interface ModalBaseProps {
    */
   visible?: boolean | undefined;
   /**
-   * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
+   * The `onRequestClose` callback is called when the user taps the hardware back button on Android, dismisses the sheet using a gesture on iOS (when `allowSwipeDismissal` is set to true) or the menu button on Apple TV.
    *
-   * This is required on Apple TV and Android.
+   * This is required on iOS and Android.
    */
   onRequestClose?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
   /**
@@ -89,6 +89,12 @@ export interface ModalPropsIOS {
   onOrientationChange?:
     | ((event: NativeSyntheticEvent<any>) => void)
     | undefined;
+
+  /**
+   * Controls whether the modal can be dismissed by swiping down on iOS.
+   * This requires you to implement the `onRequestClose` prop to handle the dismissal.
+   */
+  allowSwipeDismissal?: boolean | undefined;
 }
 
 export interface ModalPropsAndroid {

packages/react-native/Libraries/Modal/Modal.js

@@ -86,9 +86,9 @@ export type ModalBaseProps = {
    */
   visible?: ?boolean,
   /**
-   * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
+   * The `onRequestClose` callback is called when the user taps the hardware back button on Android, dismisses the sheet using a gesture on iOS (when `allowSwipeDismissal` is set to true) or the menu button on Apple TV.
    *
-   * This is required on Apple TV and Android.
+   * This is required on iOS and Android.
    */
   // onRequestClose?: (event: NativeSyntheticEvent<any>) => void;
   onRequestClose?: ?DirectEventHandler<null>,
@@ -147,6 +147,12 @@ export type ModalPropsIOS = {
   //   | ((event: NativeSyntheticEvent<any>) => void)
   //   | undefined;
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * Controls whether the modal can be dismissed by swiping down on iOS.
+   * This requires you to implement the `onRequestClose` prop to handle the dismissal.
+   */
+  allowSwipeDismissal?: ?boolean,
 };
 
 export type ModalPropsAndroid = {
@@ -192,6 +198,16 @@ function confirmProps(props: ModalProps) {
         'Modal with translucent navigation bar and without translucent status bar is not supported.',
       );
     }
+
+    if (
+      Platform.OS === 'ios' &&
+      props.allowSwipeDismissal === true &&
+      !props.onRequestClose
+    ) {
+      console.warn(
+        'Modal requires the onRequestClose prop when used with `allowSwipeDismissal`. This is necessary to prevent state corruption.',
+      );
+    }
   }
 }
 
@@ -327,6 +343,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         onStartShouldSetResponder={this._shouldSetResponder}
         supportedOrientations={this.props.supportedOrientations}
         onOrientationChange={this.props.onOrientationChange}
+        allowSwipeDismissal={this.props.allowSwipeDismissal}
         testID={this.props.testID}>
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5689,6 +5689,7 @@ export type ModalPropsIOS = {
   >,
   onDismiss?: ?() => void,
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+  allowSwipeDismissal?: ?boolean,
 };
 export type ModalPropsAndroid = {
   hardwareAccelerated?: ?boolean,

packages/react-native/React/Fabric/Mounting/ComponentViews/Modal/RCTFabricModalHostViewController.mm

@@ -22,8 +22,6 @@ - (instancetype)init
   }
   _touchHandler = [RCTSurfaceTouchHandler new];
 
-  self.modalInPresentation = YES;
-
   return self;
 }
 

packages/react-native/React/Fabric/Mounting/ComponentViews/Modal/RCTModalHostViewComponentView.mm

@@ -124,6 +124,7 @@ - (RCTFabricModalHostViewController *)viewController
     _viewController = [RCTFabricModalHostViewController new];
     _viewController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
     _viewController.delegate = self;
+    _viewController.modalInPresentation = YES;
   }
   return _viewController;
 }
@@ -239,6 +240,7 @@ - (void)prepareForRecycle
 
 - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
 {
+  const auto &oldViewProps = static_cast<const ModalHostViewProps &>(*_props);
   const auto &newProps = static_cast<const ModalHostViewProps &>(*props);
 
 #if !TARGET_OS_TV
@@ -251,6 +253,10 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   self.viewController.modalPresentationStyle = presentationConfiguration(newProps);
 
+  if (oldViewProps.allowSwipeDismissal != newProps.allowSwipeDismissal) {
+    self.viewController.modalInPresentation = !newProps.allowSwipeDismissal;
+  }
+
   _shouldPresent = newProps.visible;
   [self ensurePresentedOnlyIfNeeded];
 
@@ -283,6 +289,16 @@ - (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)co
   }
 }
 
+- (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
+{
+  auto eventEmitter = [self modalEventEmitter];
+  const auto &props = static_cast<const ModalHostViewProps &>(*_props);
+
+  if (eventEmitter && props.allowSwipeDismissal) {
+    eventEmitter->onRequestClose({});
+  }
+}
+
 @end
 
 #ifdef __cplusplus

packages/react-native/React/Views/RCTModalHostView.h

@@ -24,6 +24,7 @@
 
 @property (nonatomic, copy) RCTDirectEventBlock onShow;
 @property (nonatomic, assign) BOOL visible;
+@property (nonatomic, assign) BOOL allowSwipeDismissal;
 
 // Android only
 @property (nonatomic, assign) BOOL statusBarTranslucent;

packages/react-native/React/Views/RCTModalHostView.m

@@ -35,6 +35,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
   if ((self = [super initWithFrame:CGRectZero])) {
     _bridge = bridge;
     _modalViewController = [RCTModalHostViewController new];
+    _modalViewController.modalInPresentation = YES;
     UIView *containerView = [UIView new];
     containerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
     _modalViewController.view = containerView;
@@ -50,6 +51,14 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
   return self;
 }
 
+- (void)setAllowSwipeDismissal:(BOOL)allowSwipeDismissal
+{
+  if (_allowSwipeDismissal != allowSwipeDismissal) {
+    _allowSwipeDismissal = allowSwipeDismissal;
+    _modalViewController.modalInPresentation = !allowSwipeDismissal;
+  }
+}
+
 - (void)notifyForBoundsChange:(CGRect)newBounds
 {
   if (_reactSubview && _isPresented) {
@@ -70,6 +79,13 @@ - (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)co
   }
 }
 
+- (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
+{
+  if (_onRequestClose != nil && _allowSwipeDismissal) {
+    _onRequestClose(nil);
+  }
+}
+
 - (void)notifyForOrientationChange
 {
   if (!_onOrientationChange) {

packages/react-native/React/Views/RCTModalHostViewController.m

@@ -22,8 +22,6 @@ - (instancetype)init
     return nil;
   }
 
-  self.modalInPresentation = YES;
-
   _preferredStatusBarStyle = [RCTUIStatusBarManager() statusBarStyle];
   _preferredStatusBarHidden = [RCTUIStatusBarManager() isStatusBarHidden];
 

packages/react-native/React/Views/RCTModalHostViewManager.m

@@ -119,6 +119,7 @@ - (void)invalidate
 RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(visible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onRequestClose, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(allowSwipeDismissal, BOOL)
 
 // Fabric only
 RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -5306,6 +5306,7 @@ public class com/facebook/react/viewmanagers/ModalHostViewManagerDelegate : com/
 }
 
 public abstract interface class com/facebook/react/viewmanagers/ModalHostViewManagerInterface : com/facebook/react/uimanager/ViewManagerWithGeneratedInterface {
+	public abstract fun setAllowSwipeDismissal (Landroid/view/View;Z)V
 	public abstract fun setAnimated (Landroid/view/View;Z)V
 	public abstract fun setAnimationType (Landroid/view/View;Ljava/lang/String;)V
 	public abstract fun setHardwareAccelerated (Landroid/view/View;Z)V