feat(iOS): modal detents

Libraries/Modal/Modal.d.ts

@@ -56,6 +56,15 @@ export interface ModalPropsIOS {
     | 'overFullScreen'
     | undefined;
 
+  /**
+   * The `detents` determines the height for modal,
+   * based on the detents value.
+   * It can be a combination of `large`, `medium` or
+   * any number.
+   * for eg: ['140', 'medium', 'large']
+   */
+  detents?: Array<string>;
+
   /**
    * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
    * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.

Libraries/Modal/Modal.js

@@ -79,6 +79,14 @@ export type Props = $ReadOnly<{|
     | 'overFullScreen'
   ),
 
+  /**
+   * The `detents` determines the height for modal,
+   * based on the detents value.
+   * It can be a combination of `large`, `medium` or
+   * any number.
+   * for eg: ['140', 'medium', 'large']
+   */
+  detents?: ?$ReadOnlyArray<string>,
   /**
    * The `transparent` prop determines whether your modal will fill the
    * entire view.
@@ -246,6 +254,7 @@ class Modal extends React.Component<Props> {
 
     return (
       <RCTModalHostView
+        detents={this.props.detents}
         animationType={animationType}
         presentationStyle={presentationStyle}
         transparent={this.props.transparent}

Libraries/Modal/RCTModalHostViewNativeComponent.js

@@ -42,6 +42,14 @@ type NativeProps = $ReadOnly<{|
     'fullScreen',
   >,
 
+  /**
+   * The `detents` determines the height for modal,
+   * based on the detents value.
+   * It can be a combination of `large`, `medium` or
+   * any number.
+   * for eg: ['140', 'medium', 'large']
+   */
+  detents?: ?$ReadOnlyArray<string>,
   /**
    * The `transparent` prop determines whether your modal will fill the
    * entire view.

React/Fabric/Mounting/ComponentViews/Modal/RCTFabricModalHostViewController.h

@@ -15,6 +15,7 @@
 
 @property (nonatomic, weak) id<RCTFabricModalHostViewControllerDelegate> delegate;
 
+@property (nonatomic, copy) NSArray *detents;
 @property (nonatomic, assign) UIInterfaceOrientationMask supportedInterfaceOrientations;
 
 @end

React/Fabric/Mounting/ComponentViews/Modal/RCTModalHostViewComponentView.h

@@ -11,7 +11,7 @@
 /**
  * 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.

React/Fabric/Mounting/ComponentViews/Modal/RCTModalHostViewComponentView.mm

@@ -150,6 +150,22 @@ - (void)ensurePresentedOnlyIfNeeded
   BOOL shouldBePresented = !_isPresented && _shouldPresent && self.window;
   if (shouldBePresented) {
     _isPresented = YES;
+    if (@available(iOS 13.0, *)) {
+        _viewController.presentationController.delegate = self;
+    }
+//    if (@available(iOS 15.0, *)) {
+//      UISheetPresentationController *sheetPresentationController =
+//        _viewController.sheetPresentationController;
+//
+//      if (sheetPresentationController && self.detents != nil) {
+//        NSArray<UISheetPresentationControllerDetent *> *detents = self.detents != nil
+//          ? [RCTConvert UISheetPresentationControllerDetentArray:self.detents]
+//            // The default value is an array that contains the value largeDetent
+//          : @[[UISheetPresentationControllerDetent largeDetent]];
+//        sheetPresentationController.detents = detents;
+//        sheetPresentationController.prefersGrabberVisible = detents.count > 1;
+//      }
+//    }
     [self presentViewController:self.viewController
                        animated:_shouldAnimatePresentation
                      completion:^{
@@ -227,6 +243,14 @@ - (void)boundsDidChange:(CGRect)newBounds
   }
 }
 
+- (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)controller
+{
+    auto eventEmitter = [self modalEventEmitter];
+    if (eventEmitter) {
+        eventEmitter->onRequestClose(ModalHostViewEventEmitter::OnRequestClose{});
+    }
+}
+
 #pragma mark - RCTComponentViewProtocol
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -257,6 +281,8 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   self.viewController.modalPresentationStyle = presentationConfiguration(newProps);
 
+  self.viewController.detents = @[];
+
   _shouldPresent = newProps.visible;
   [self ensurePresentedOnlyIfNeeded];
 

React/Views/RCTConvert+Modal.h

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTConvert.h>
+
+@interface RCTConvert (Modal)
+
++ (UISheetPresentationControllerDetent *)UISheetPresentationControllerDetent:(id)json API_AVAILABLE(ios(15.0));
++ (NSArray<UISheetPresentationControllerDetent *> *)UISheetPresentationControllerDetentArray:(id)json API_AVAILABLE(ios(15.0));
+
+@end

React/Views/RCTConvert+Modal.m

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTConvert+Modal.h"
+
+@implementation RCTConvert (Modal)
+
++ (UISheetPresentationControllerDetent *)UISheetPresentationControllerDetent:(id)json {
+  if (@available(iOS 16.0, *)) {
+    if ([json isKindOfClass:[NSNumber class]]) {
+      float value = [json floatValue];
+      return [UISheetPresentationControllerDetent
+              customDetentWithIdentifier:nil
+              resolver:^CGFloat(id context) {
+        return value;
+      }];
+    }
+  }
+
+  if ([json isEqualToString:@"medium"]) {
+    return [UISheetPresentationControllerDetent mediumDetent];
+  }
+
+  return [UISheetPresentationControllerDetent largeDetent];
+}
+
+RCT_ARRAY_CONVERTER(UISheetPresentationControllerDetent)
+
+@end

React/Views/RCTModalHostView.h

@@ -20,6 +20,7 @@
 
 @property (nonatomic, copy) NSString *animationType;
 @property (nonatomic, assign) UIModalPresentationStyle presentationStyle;
+@property (nonatomic, assign) id detents;
 @property (nonatomic, assign, getter=isTransparent) BOOL transparent;
 
 @property (nonatomic, copy) RCTDirectEventBlock onShow;

React/Views/RCTModalHostView.m

@@ -16,6 +16,7 @@
 #import "RCTUIManager.h"
 #import "RCTUtils.h"
 #import "UIView+React.h"
+#import "RCTConvert+Modal.h"
 
 @implementation RCTModalHostView {
   __weak RCTBridge *_bridge;
@@ -185,6 +186,19 @@ - (void)ensurePresentedOnlyIfNeeded
     if (@available(iOS 13.0, *)) {
       _modalViewController.presentationController.delegate = self;
     }
+    if (@available(iOS 15.0, *)) {
+      UISheetPresentationController *sheetPresentationController =
+        _modalViewController.sheetPresentationController;
+
+      if (sheetPresentationController && self.detents != nil) {
+        NSArray<UISheetPresentationControllerDetent *> *detents = self.detents != nil
+          ? [RCTConvert UISheetPresentationControllerDetentArray:self.detents]
+            // The default value is an array that contains the value largeDetent
+          : @[[UISheetPresentationControllerDetent largeDetent]];
+        sheetPresentationController.detents = detents;
+        sheetPresentationController.prefersGrabberVisible = detents.count > 1;
+      }
+    }
     [_delegate presentModalHostView:self withViewController:_modalViewController animated:[self hasAnimationType]];
     _isPresented = YES;
   }

React/Views/RCTModalHostViewManager.m

@@ -125,6 +125,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(detents, NSArray)
 
 // Fabric only
 RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)

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

@@ -102,6 +102,12 @@ public void setVisible(ReactModalHostView view, boolean visible) {
   @ReactProp(name = "presentationStyle")
   public void setPresentationStyle(ReactModalHostView view, @Nullable String value) {}
 
+  @Override
+  @ReactProp(name = "detent")
+  public void setDetent(ReactModalHostView view, @Nullable String value) {
+    // iOS only
+  }
+
   @Override
   @ReactProp(name = "animated")
   public void setAnimated(ReactModalHostView view, boolean value) {}