feat(iOS): sheetInitialDetent support

apps/src/tests/Test2002.tsx

@@ -5,9 +5,22 @@ import {
   DefaultTheme,
   NavigationContainer,
 } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type StackParamList = {
+  Home: undefined;
+  formSheet: undefined;
+  fullScreenModal: undefined;
+};
 
-function HomeScreen({ navigation }) {
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
   return (
     <View style={styles.container}>
       <Button
@@ -22,15 +35,19 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ModalScreen({ navigation }) {
+function ModalScreen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
   return (
     <View style={styles.container}>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
     </View>
   );
 }
 
-const RootStack = createNativeStackNavigator();
+const RootStack = createNativeStackNavigator<StackParamList>();
 
 export default function App() {
   const scheme = useColorScheme();
@@ -42,7 +59,11 @@ export default function App() {
         <RootStack.Screen
           name="formSheet"
           component={ModalScreen}
-          options={{ presentation: 'formSheet' }}
+          options={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.5, 0.8],
+            sheetInitialDetent: 1,
+          }}
         />
         <RootStack.Screen
           name="fullScreenModal"

ios/RNSScreen.h

@@ -90,6 +90,7 @@ namespace react = facebook::react;
 @property (nonatomic) NSNumber *sheetLargestUndimmedDetent;
 @property (nonatomic) BOOL sheetGrabberVisible;
 @property (nonatomic) CGFloat sheetCornerRadius;
+@property (nonatomic) NSInteger sheetInitialDetent;
 @property (nonatomic) BOOL sheetExpandsWhenScrolledToEdge;
 #endif // !TARGET_OS_TV
 

ios/RNSScreen.mm

@@ -889,8 +889,8 @@ - (void)updateFormSheetPresentationStyle
     sheet.delegate = self;
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_16_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_16_0
-    if (_sheetAllowedDetents.count > 0) {
-      if (@available(iOS 16.0, *)) {
+    if (@available(iOS 16.0, *)) {
+      if (_sheetAllowedDetents.count > 0) {
         if (_sheetAllowedDetents.count == 1 && [_sheetAllowedDetents[0] integerValue] == SHEET_FIT_TO_CONTENTS) {
           // This is `fitToContents` case, where sheet should be just high to display its contents.
           // Paper: we do not set anything here, we will set once React computed layout of our React's children, namely
@@ -944,6 +944,26 @@ - (void)updateFormSheetPresentationStyle
       }
     }
 
+    if (_sheetInitialDetent > 0 && _sheetInitialDetent < _sheetAllowedDetents.count) {
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_16_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_16_0
+      if (@available(iOS 16.0, *)) {
+        UISheetPresentationControllerDetent *detent = sheet.detents[_sheetInitialDetent];
+        [self setSelectedDetentForSheet:sheet to:detent.identifier animate:YES];
+      } else
+#endif // Check for iOS >= 16
+      {
+        if (_sheetInitialDetent < 2) {
+          [self setSelectedDetentForSheet:sheet to:UISheetPresentationControllerDetentIdentifierLarge animate:YES];
+        } else {
+          RCTLogError(
+              @"[RNScreens] sheetInitialDetent out of bounds, on iOS versions below 16 sheetAllowedDetents is ignored in favor of an array of two system-defined detents");
+        }
+      }
+    } else if (_sheetInitialDetent != 0) {
+      RCTLogError(@"[RNScreens] sheetInitialDetent out of bounds for sheetAllowedDetents array");
+    }
+
     sheet.prefersScrollingExpandsWhenScrolledToEdge = _sheetExpandsWhenScrolledToEdge;
     [self setGrabberVisibleForSheet:sheet to:_sheetGrabberVisible animate:YES];
     [self setCornerRadiusForSheet:sheet to:_sheetCornerRadius animate:YES];
@@ -1151,6 +1171,10 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
     [self setSheetAllowedDetents:[RNSConvert detentFractionsArrayFromVector:newScreenProps.sheetAllowedDetents]];
   }
 
+  if (newScreenProps.sheetInitialDetent != oldScreenProps.sheetInitialDetent) {
+    [self setSheetInitialDetent:newScreenProps.sheetInitialDetent];
+  }
+
   if (newScreenProps.sheetLargestUndimmedDetent != oldScreenProps.sheetLargestUndimmedDetent) {
     [self setSheetLargestUndimmedDetent:[NSNumber numberWithInt:newScreenProps.sheetLargestUndimmedDetent]];
   }
@@ -1864,6 +1888,7 @@ @implementation RNSScreenManager
 RCT_EXPORT_VIEW_PROPERTY(sheetLargestUndimmedDetent, NSNumber *);
 RCT_EXPORT_VIEW_PROPERTY(sheetGrabberVisible, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(sheetCornerRadius, CGFloat);
+RCT_EXPORT_VIEW_PROPERTY(sheetInitialDetent, NSInteger);
 RCT_EXPORT_VIEW_PROPERTY(sheetExpandsWhenScrolledToEdge, BOOL);
 #endif
 

native-stack/README.md

@@ -287,9 +287,11 @@ Defaults to system default.
 
 #### `sheetInitialDetent`
 
-Initial detent for the sheet.
+Index of the detent the sheet should expand to after being opened.
 Works only when `presentation` is set to `formSheet`.
 
+Defaults to `0` - which represents first detent in the detents array.
+
 #### `sheetGrabberVisible` (iOS only)
 
 Boolean indicating whether the sheet shows a grabber at the top.

src/fabric/ModalScreenNativeComponent.ts

@@ -75,6 +75,7 @@ export interface NativeProps extends ViewProps {
   sheetGrabberVisible?: WithDefault<boolean, false>;
   sheetCornerRadius?: WithDefault<Float, -1.0>;
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
+  sheetInitialDetent?: WithDefault<Int32, 0>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
   fullScreenSwipeShadowEnabled?: boolean;