Allows interactive dismissal of modals on iOS

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

@@ -43,6 +43,10 @@ export interface ModalBaseProps {
    * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
   onShow?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
+  /**
+   * Allows the modal to be dismissed by an interactive gesture
+   */
+  interactiveDismissal?: boolean | undefined;
   /**
    * The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
    */

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

@@ -134,6 +134,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,
 |}>;
 
 type State = {|
@@ -229,6 +234,7 @@ class Modal extends React.Component<Props, State> {
         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/Libraries/Modal/RCTModalHostViewNativeComponent.js

@@ -122,6 +122,11 @@ type NativeProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/modal#onorientationchange
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * Allows the modal to be dismissed by an interactive gesture
+   */
+  interactiveDismissal?: WithDefault<boolean, false>,
 |}>;
 
 export default (codegenNativeComponent<NativeProps>('ModalHostView', {

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

@@ -6479,6 +6479,7 @@ type NativeProps = $ReadOnly<{|
     \\"portrait\\",
   >,
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+  interactiveDismissal?: WithDefault<boolean, false>,
 |}>;
 declare export default HostComponent<NativeProps>;
 "

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

@@ -26,6 +26,9 @@
 @property (nonatomic, copy) RCTDirectEventBlock onDismiss;
 @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

@@ -123,6 +123,7 @@ - (void)invalidate
 RCT_EXPORT_VIEW_PROPERTY(hardwareAccelerated, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(animated, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onShow, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(interactiveDismissal, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(supportedOrientations, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)

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

@@ -161,6 +161,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/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">