Allows interactive dismissal of modals on iOS

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

@@ -82,6 +82,11 @@ export interface ModalPropsIOS {
   onOrientationChange?:
     | ((event: NativeSyntheticEvent<any>) => void)
     | undefined;
+
+  /**
+   * Allows the modal to be dismissed by an interactive gesture
+   */
+  interactiveDismissal?: boolean | undefined;
 }
 
 export interface ModalPropsAndroid {

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

@@ -157,6 +157,11 @@ export type Props = $ReadOnly<{|
    * See https://reactnative.dev/docs/modal#onorientationchange
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * Allows the modal to be dismissed by an interactive gesture
+   */
+  interactiveDismissal?: boolean,
 |}>;
 
 function confirmProps(props: Props) {
@@ -265,6 +270,7 @@ class Modal extends React.Component<Props> {
         onStartShouldSetResponder={this._shouldSetResponder}
         supportedOrientations={this.props.supportedOrientations}
         onOrientationChange={this.props.onOrientationChange}
+        interactiveDismissal={this.props.interactiveDismissal}
         testID={this.props.testID}>
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>

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

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <UIKit/UIKit.h>
+
 #import <React/RCTMountingTransactionObserving.h>
 #import <React/RCTViewComponentView.h>
 
 /**
  * UIView class for root <ModalHostView> component.
  */
-@interface RCTModalHostViewComponentView : RCTViewComponentView <RCTMountingTransactionObserving>
+@interface RCTModalHostViewComponentView : RCTViewComponentView <RCTMountingTransactionObserving, UIAdaptivePresentationControllerDelegate>
 
 /**
  * Subclasses may override this method and present the modal on different view controller.

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

@@ -103,6 +103,7 @@ @implementation RCTModalHostViewComponentView {
   ModalHostViewShadowNode::ConcreteState::Shared _state;
   BOOL _shouldAnimatePresentation;
   BOOL _shouldPresent;
+  BOOL _interactiveDismissal;
   BOOL _isPresented;
   UIView *_modalContentsSnapshot;
 }
@@ -113,6 +114,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _props = ModalHostViewShadowNode::defaultSharedProps();
     _shouldAnimatePresentation = YES;
 
+    _interactiveDismissal = NO;
     _isPresented = NO;
   }
 
@@ -148,7 +150,10 @@ - (void)ensurePresentedOnlyIfNeeded
 {
   BOOL shouldBePresented = !_isPresented && _shouldPresent && self.window;
   if (shouldBePresented) {
+    _viewController.modalInPresentation = !self->_interactiveDismissal;
+    _viewController.presentationController.delegate = self;
     _isPresented = YES;
+
     [self presentViewController:self.viewController
                        animated:_shouldAnimatePresentation
                      completion:^{
@@ -189,6 +194,16 @@ - (void)ensurePresentedOnlyIfNeeded
   return std::static_pointer_cast<const ModalHostViewEventEmitter>(_eventEmitter);
 }
 
+#pragma mark - UIAdaptivePresentationControllerDelegate
+
+- (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
+{
+  auto eventEmitter = [self modalEventEmitter];
+  if (eventEmitter) {
+    eventEmitter->onDismiss(ModalHostViewEventEmitter::OnDismiss{});
+  }
+}
+
 #pragma mark - RCTMountingTransactionObserving
 
 - (void)mountingTransactionWillMount:(const MountingTransaction &)transaction
@@ -240,6 +255,7 @@ - (void)prepareForRecycle
   _viewController = nil;
   _isPresented = NO;
   _shouldPresent = NO;
+  _interactiveDismissal = NO;
 }
 
 - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
@@ -256,6 +272,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   self.viewController.modalPresentationStyle = presentationConfiguration(newProps);
 
+  _interactiveDismissal = newProps.interactiveDismissal;
   _shouldPresent = newProps.visible;
   [self ensurePresentedOnlyIfNeeded];
 

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

@@ -25,6 +25,9 @@
 @property (nonatomic, copy) RCTDirectEventBlock onShow;
 @property (nonatomic, assign) BOOL visible;
 
+// iOS only
+@property (nonatomic, assign) BOOL interactiveDismissal;
+
 // Android only
 @property (nonatomic, assign) BOOL statusBarTranslucent;
 @property (nonatomic, assign) BOOL hardwareAccelerated;

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

@@ -39,6 +39,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     containerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
     _modalViewController.view = containerView;
     _touchHandler = [[RCTTouchHandler alloc] initWithBridge:bridge];
+    _interactiveDismissal = NO;
     _isPresented = NO;
 
     __weak typeof(self) weakSelf = self;
@@ -63,13 +64,25 @@ - (void)setOnRequestClose:(RCTDirectEventBlock)onRequestClose
   _onRequestClose = onRequestClose;
 }
 
+- (BOOL)presentationControllerShouldDismiss:(UIPresentationController *)presentationController
+{
+  return _interactiveDismissal;
+}
+
 - (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)controller
 {
   if (_onRequestClose != nil) {
     _onRequestClose(nil);
   }
 }
 
+- (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
+{
+  if (_onDismiss) {
+    _onDismiss(nil);
+  }
+}
+
 - (void)notifyForOrientationChange
 {
   if (!_onOrientationChange) {
@@ -173,6 +186,7 @@ - (void)ensurePresentedOnlyIfNeeded
     RCTAssert(self.reactViewController, @"Can't present modal view controller without a presenting view controller");
 
     _modalViewController.supportedInterfaceOrientations = [self supportedOrientationsMask];
+    _modalViewController.modalInPresentation = !self.interactiveDismissal;
 
     if ([self.animationType isEqualToString:@"fade"]) {
       _modalViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

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

@@ -124,13 +124,11 @@ - (void)invalidate
 RCT_EXPORT_VIEW_PROPERTY(hardwareAccelerated, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(animated, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onShow, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(identifier, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(interactiveDismissal, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(supportedOrientations, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(visible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onRequestClose, RCTDirectEventBlock)
 
-// Fabric only
-RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)
-
 @end

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java

@@ -158,6 +158,12 @@ public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
     return eventTypeConstants;
   }
 
+  @Override
+  @ReactProp(name = "interactiveDismissal")
+  public void setInteractiveDismissal(ReactModalHostView view, boolean interactiveDismissal) {
+    // iOS only
+  }
+
   @Override
   protected void onAfterUpdateTransaction(ReactModalHostView view) {
     super.onAfterUpdateTransaction(view);

packages/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js

@@ -127,6 +127,11 @@ type NativeProps = $ReadOnly<{|
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
 
+  /**
+   * Allows the modal to be dismissed by an interactive gesture
+   */
+  interactiveDismissal?: WithDefault<boolean, false>,
+
   /**
    * The `identifier` is the unique number for identifying Modal components.
    */

packages/rn-tester/js/examples/Modal/ModalPresentation.js

@@ -52,6 +52,7 @@ function ModalPresentation() {
     transparent: false,
     hardwareAccelerated: false,
     statusBarTranslucent: false,
+    interactiveDismissal: false,
     presentationStyle: Platform.select({
       ios: 'fullScreen',
       default: undefined,
@@ -75,6 +76,16 @@ function ModalPresentation() {
   const onOrientationChange = event =>
     setCurrentOrientation(event.nativeEvent.orientation);
 
+  const onDismissInternal = () => {
+    if (props.interactiveDismissal === true) {
+      setProps(prev => ({...prev, visible: false}));
+    }
+
+    if (props.onDismiss) {
+      props.onDismiss();
+    }
+  };
+
   const controls = (
     <>
       <View style={styles.inlineBlock}>
@@ -146,6 +157,26 @@ function ModalPresentation() {
           </Text>
         ) : null}
       </View>
+      {Platform.OS === 'ios' && (
+        <View style={styles.block}>
+          <View style={styles.rowWithSpaceBetween}>
+            <Text style={styles.title}>Interactive Dismissal</Text>
+            <Switch
+              value={props.interactiveDismissal}
+              onValueChange={enabled =>
+                setProps(prev => ({...prev, interactiveDismissal: enabled}))
+              }
+            />
+          </View>
+          {!['pageSheet', 'formSheet'].includes(presentationStyle) ||
+          props.animationType !== 'slide' ? (
+            <Text style={styles.warning}>
+              Modal can only be dismissed interactively whilst using 'pageSheet'
+              or 'formSheet' Presentation Style, and 'slide' Animation Type
+            </Text>
+          ) : null}
+        </View>
+      )}
       <View style={styles.block}>
         <Text style={styles.title}>Supported Orientation ⚫️</Text>
         <View style={styles.row}>
@@ -223,7 +254,8 @@ function ModalPresentation() {
       <Modal
         {...props}
         onRequestClose={onRequestClose}
-        onOrientationChange={onOrientationChange}>
+        onOrientationChange={onOrientationChange}
+        onDismiss={onDismissInternal}>
         <View style={styles.modalContainer}>
           <View style={styles.modalInnerContainer}>
             <Text testID="modal_animationType_text">