Add interactive dismiss enabled to add full support for iOS 13 style page sheet modals

Libraries/Modal/Modal.js

@@ -79,6 +79,15 @@ export type Props = $ReadOnly<{|
     | 'overFullScreen'
   ),
 
+  /**
+   * Enables interactive dismissal on with certain values of
+   * presentationStyle (mainly `pageSheet`). If `true`, `onDismiss` must be
+   * defined, and calling `onDismiss` must set `visible` to `false`.
+   *
+   * See https://reactnative.dev/docs/modal.html#interactivedismissenabled
+   */
+  interactiveDismissEnabled?: ?boolean,
+
   /**
    * The `transparent` prop determines whether your modal will fill the
    * entire view.
@@ -248,6 +257,7 @@ class Modal extends React.Component<Props> {
       <RCTModalHostView
         animationType={animationType}
         presentationStyle={presentationStyle}
+        interactiveDismissEnabled={this.props.interactiveDismissEnabled}
         transparent={this.props.transparent}
         hardwareAccelerated={this.props.hardwareAccelerated}
         onRequestClose={this.props.onRequestClose}

Libraries/Modal/RCTModalHostViewNativeComponent.js

@@ -42,6 +42,14 @@ type NativeProps = $ReadOnly<{|
     'fullScreen',
   >,
 
+  /**
+   * Enables interactive dismissal on with certain values of
+   * presentationStyle (mainly `pageSheet`)
+   *
+   * See https://reactnative.dev/docs/modal.html#interactivedismissenabled
+   */
+  interactiveDismissEnabled?: WithDefault<boolean, false>,
+
   /**
    * The `transparent` prop determines whether your modal will fill the
    * entire view.

React/Views/RCTModalHostView.h

@@ -24,6 +24,8 @@
 
 @property (nonatomic, copy) RCTDirectEventBlock onShow;
 @property (nonatomic, assign) BOOL visible;
+@property (nonatomic, assign) BOOL interactiveDismissEnabled;
+@property (nonatomic, copy) RCTDirectEventBlock onRequestClose;
 
 // Android only
 @property (nonatomic, assign) BOOL statusBarTranslucent;
@@ -52,5 +54,6 @@
 - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
           withViewController:(RCTModalHostViewController *)viewController
                     animated:(BOOL)animated;
+- (void)modalHostViewWasDismissedInteractively:(RCTModalHostView *)modalHostView;
 
 @end

React/Views/RCTModalHostView.m

@@ -45,6 +45,8 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     _modalViewController.boundsDidChangeBlock = ^(CGRect newBounds) {
       [weakSelf notifyForBoundsChange:newBounds];
     };
+
+    [self setInteractiveDismissEnabled:NO];
   }
 
   return self;
@@ -70,6 +72,12 @@ - (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)co
   }
 }
 
+- (void)presentationControllerDidDismiss:(UIPresentationController *)controller
+{
+  _isPresented = NO;
+  [_delegate modalHostViewWasDismissedInteractively:self];
+}
+
 - (void)notifyForOrientationChange
 {
   if (!_onOrientationChange) {
@@ -205,6 +213,16 @@ - (void)setTransparent:(BOOL)transparent
       transparent ? UIModalPresentationOverFullScreen : UIModalPresentationFullScreen;
 }
 
+- (void)setInteractiveDismissEnabled:(BOOL)interactiveDismissEnabled
+{
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+  if (@available(iOS 13.0, *)) {
+    _modalViewController.modalInPresentation = !interactiveDismissEnabled;
+  }
+#endif
+}
+
 - (UIInterfaceOrientationMask)supportedOrientationsMask
 {
   if (_supportedOrientations.count == 0) {

React/Views/RCTModalHostViewController.m

@@ -22,13 +22,6 @@ - (instancetype)init
     return nil;
   }
 
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
-    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
-  if (@available(iOS 13.0, *)) {
-    self.modalInPresentation = YES;
-  }
-#endif
-
   _preferredStatusBarStyle = [RCTSharedApplication() statusBarStyle];
   _preferredStatusBarHidden = [RCTSharedApplication() isStatusBarHidden];
 

React/Views/RCTModalHostViewManager.m

@@ -89,9 +89,7 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
                     animated:(BOOL)animated
 {
   dispatch_block_t completionBlock = ^{
-    if (modalHostView.identifier) {
-      [[self.bridge moduleForClass:[RCTModalManager class]] modalDismissed:modalHostView.identifier];
-    }
+    [self modalHostViewWasDismissedInteractively:modalHostView];
   };
   if (_dismissalBlock) {
     _dismissalBlock([modalHostView reactViewController], viewController, animated, completionBlock);
@@ -100,6 +98,13 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
   }
 }
 
+- (void)modalHostViewWasDismissedInteractively:(RCTModalHostView *)modalHostView
+{
+  if (modalHostView.identifier) {
+    [[self.bridge moduleForClass:[RCTModalManager class]] modalDismissed:modalHostView.identifier];
+  }
+}
+
 - (RCTShadowView *)shadowView
 {
   return [RCTModalHostShadowView new];
@@ -125,6 +130,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(interactiveDismissEnabled, BOOL)
 
 // Fabric only
 RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)

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

@@ -103,6 +103,8 @@ public void setVisible(ReactModalHostView view, boolean visible) {
   public void setPresentationStyle(ReactModalHostView view, @Nullable String value) {}
 
   @Override
+  public void setInteractiveDismissEnabled(ReactModalHostView view, boolean value) {}
+
   @ReactProp(name = "animated")
   public void setAnimated(ReactModalHostView view, boolean value) {}
 

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

@@ -45,6 +45,8 @@ function ModalPresentation() {
     React.useState('fullScreen');
   const [supportedOrientationKey, setSupportedOrientationKey] =
     React.useState('Portrait');
+  const [interactiveDismissEnabled, setInteractiveDismissEnabled] =
+    React.useState(false);
   const [currentOrientation, setCurrentOrientation] = React.useState('unknown');
   const [action, setAction] = React.useState('None');
   const actions = Platform.OS === 'ios' ? iOSActions : noniOSActions;
@@ -76,6 +78,7 @@ function ModalPresentation() {
       <Modal
         animationType={animationType}
         presentationStyle={presentationStyle}
+        interactiveDismissEnabled={interactiveDismissEnabled}
         transparent={transparent}
         hardwareAccelerated={hardwareAccelerated}
         statusBarTranslucent={statusBarTranslucent}
@@ -160,6 +163,15 @@ function ModalPresentation() {
               </View>
             </View>
           ) : null}
+          {Platform.OS === 'ios' ? (
+            <View style={styles.inlineBlock}>
+              <Text style={styles.title}>Interactive Dismiss Enabled</Text>
+              <Switch
+                value={interactiveDismissEnabled}
+                onValueChange={setInteractiveDismissEnabled}
+              />
+            </View>
+          ) : null}
           <View style={styles.block}>
             <View style={styles.rowWithSpaceBetween}>
               <Text style={styles.title}>Transparent</Text>