feat: add modal detents prop

Author: okwasniewski

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

@@ -63,6 +63,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> | undefined;
+
   /**
    * 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.

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

@@ -121,6 +121,15 @@ export type ModalPropsIOS = {
     | '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 `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.
@@ -208,6 +217,27 @@ function confirmProps(props: ModalProps) {
         'Modal requires the onRequestClose prop when used with `allowSwipeDismissal`. This is necessary to prevent state corruption.',
       );
     }
+
+    if (
+      Platform.OS === 'ios' &&
+      props.detents &&
+      !props.detents.every(detent => typeof detent === 'string')
+    ) {
+      console.warn(
+        'Modal detents should be a combination of `large`, `medium` or any number represented as a string.',
+      );
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      props.detents?.length > 0 &&
+      props.presentationStyle !== 'pageSheet' &&
+      props.presentationStyle !== 'formSheet'
+    ) {
+      console.warn(
+        'Modal detents are only supported with `pageSheet` or `formSheet` presentation styles.',
+      );
+    }
   }
 }
 
@@ -344,6 +374,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         supportedOrientations={this.props.supportedOrientations}
         onOrientationChange={this.props.onOrientationChange}
         allowSwipeDismissal={this.props.allowSwipeDismissal}
+        detents={this.props.detents}
         testID={this.props.testID}>
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>

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

@@ -107,6 +107,7 @@ @implementation RCTModalHostViewComponentView {
   BOOL _shouldPresent;
   BOOL _isPresented;
   BOOL _modalInPresentation;
+  NSArray<UISheetPresentationControllerDetent *>* _detents;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -156,6 +157,13 @@ - (void)ensurePresentedOnlyIfNeeded
     self.viewController.presentationController.delegate = self;
     self.viewController.modalInPresentation = _modalInPresentation;
 
+    UISheetPresentationController *sheetPresentationController =
+      _viewController.sheetPresentationController;
+    
+     if (sheetPresentationController) {
+       sheetPresentationController.detents = _detents;
+     }
+
     _isPresented = YES;
     [self presentViewController:self.viewController
                        animated:_shouldAnimatePresentation
@@ -243,7 +251,7 @@ - (void)boundsDidChange:(CGRect)newBounds
 
   if (_state != nullptr) {
     auto newState = ModalHostViewState{RCTSizeFromCGSize(newBounds.size)};
-    _state->updateState(std::move(newState));
+    _state->updateState(std::move(newState), EventQueue::UpdateMode::unstable_Immediate);
   }
 }
 
@@ -282,6 +290,13 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _modalInPresentation = !newProps.allowSwipeDismissal;
     self.viewController.modalInPresentation = _modalInPresentation;
   }
+  
+  if (oldViewProps.detents != newProps.detents) {
+    _detents = [self calculateDetents:newProps.detents];
+    if (_viewController.sheetPresentationController) {
+      _viewController.sheetPresentationController.detents = _detents;
+    }
+  }
 
   _shouldPresent = newProps.visible;
   [self ensurePresentedOnlyIfNeeded];
@@ -325,6 +340,41 @@ - (void)presentationControllerDidDismiss:(UIPresentationController *)presentatio
   }
 }
 
+#pragma mark - Helpers
+
+- (NSArray<UISheetPresentationControllerDetent *> *)calculateDetents:(const std::vector<std::string> &)detents {
+  if (@available(iOS 16.0, *)) {
+    NSMutableArray<UISheetPresentationControllerDetent *> *detentsArray = [NSMutableArray new];
+    
+    for (const auto &detent : detents) {
+      NSString *detentString = [NSString stringWithUTF8String:detent.c_str()];
+      
+      if ([detentString isEqualToString:@"medium"]) {
+        [detentsArray addObject:[UISheetPresentationControllerDetent mediumDetent]];
+      } else if ([detentString isEqualToString:@"large"]) {
+        [detentsArray addObject:[UISheetPresentationControllerDetent largeDetent]];
+      } else {
+        // Try to parse as a number (custom detent)
+        NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
+        NSNumber *number = [formatter numberFromString:detentString];
+        
+        if (number != nil) {
+          float value = [number floatValue];
+          [detentsArray addObject:[UISheetPresentationControllerDetent
+                                   customDetentWithIdentifier:nil
+                                   resolver:^CGFloat(id<UISheetPresentationControllerDetentResolutionContext> context) {
+            return value;
+          }]];
+        }
+      }
+    }
+    
+    return detentsArray;
+  }
+  
+  return [NSMutableArray new];
+}
+
 @end
 
 #ifdef __cplusplus

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

@@ -69,6 +69,11 @@ internal class ReactModalHostManager :
     // iOS only
   }
 
+  @ReactProp(name = "detent")
+  override fun setDetent(view: ReactModalHostView, value: String?) {
+    // iOS only
+  }
+
   @ReactProp(name = "presentationStyle")
   override fun setPresentationStyle(view: ReactModalHostView, value: String?): Unit = Unit
 

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

@@ -42,6 +42,15 @@ type RCTModalHostViewNativeProps = $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.

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

@@ -19,7 +19,15 @@ import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import RNTOption from '../../components/RNTOption';
 import * as React from 'react';
 import {useCallback, useContext, useState} from 'react';
-import {Modal, Platform, StyleSheet, Switch, Text, View} from 'react-native';
+import {
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+} from 'react-native';
 
 const animationTypes = ['slide', 'none', 'fade'] as const;
 const presentationStyles = [
@@ -37,6 +45,7 @@ const supportedOrientations = [
 ] as const;
 
 const backdropColors = ['red', 'blue', undefined];
+const detents = ['200', '500', 'large'];
 
 function ModalPresentation() {
   const onDismiss = useCallback(() => {
@@ -72,6 +81,7 @@ function ModalPresentation() {
     visible: false,
     backdropColor: undefined,
   });
+  const [useDetents, setUseDetents] = useState(false);
   const presentationStyle = props.presentationStyle;
   const hardwareAccelerated = props.hardwareAccelerated;
   const statusBarTranslucent = props.statusBarTranslucent;
@@ -149,6 +159,13 @@ function ModalPresentation() {
           }
         />
       </View>
+      <View style={styles.inlineBlock}>
+        <RNTesterText style={styles.title}>Use Detents ⚫️</RNTesterText>
+        <Switch
+          value={useDetents}
+          onValueChange={enabled => setUseDetents(enabled)}
+        />
+      </View>
       <View style={styles.block}>
         <RNTesterText style={styles.title}>Presentation Style ⚫️</RNTesterText>
         <View style={styles.row}>
@@ -295,9 +312,12 @@ function ModalPresentation() {
       </RNTesterButton>
       <Modal
         {...props}
+        detents={useDetents ? detents : undefined}
         onRequestClose={onRequestClose}
         onOrientationChange={onOrientationChange}>
-        <View style={styles.modalContainer}>
+        <ScrollView
+          style={styles.modalContainer}
+          contentContainerStyle={{justifyContent: 'center'}}>
           <View style={[styles.modalInnerContainer, {backgroundColor}]}>
             <Text testID="modal_animationType_text">
               This modal was presented with animationType: '
@@ -314,6 +334,9 @@ function ModalPresentation() {
             </RNTesterButton>
             {controls}
           </View>
+        </ScrollView>
+        <View style={styles.footer}>
+          <Text>Footer position: absolute</Text>
         </View>
       </Modal>
       <View style={styles.block}>
@@ -367,7 +390,6 @@ const styles = StyleSheet.create({
   },
   modalContainer: {
     flex: 1,
-    justifyContent: 'center',
     padding: 20,
   },
   modalInnerContainer: {
@@ -379,6 +401,17 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: 'red',
   },
+  footer: {
+    height: 60,
+    width: '100%',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 export default ({