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

@@ -902,6 +902,13 @@ - (void)updateFormSheetPresentationStyle
           [self setAllowedDetentsForSheet:sheet
                                        to:[self detentsFromMaxHeightFractions:_sheetAllowedDetents]
                                   animate:NO];
+
+          if (_sheetInitialDetent > 0 && _sheetInitialDetent < _sheetAllowedDetents.count) {
+            UISheetPresentationControllerDetent *detent = sheet.detents[_sheetInitialDetent];
+            [self setSelectedDetentForSheet:sheet to:detent.identifier animate:YES];
+          } else if (_sheetInitialDetent != 0) {
+            RCTLogError(@"[RNScreens] sheetInitialDetent out of bounds for sheetAllowedDetents array");
+          }
         }
       }
     } else
@@ -1151,6 +1158,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 +1875,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;