feat(iOS): add pageSheet presentation for native-stack

android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt

@@ -126,7 +126,7 @@ open class ScreenViewManager :
             when (presentation) {
                 "push" -> Screen.StackPresentation.PUSH
                 "formSheet" -> Screen.StackPresentation.FORM_SHEET
-                "modal", "containedModal", "fullScreenModal" ->
+                "modal", "containedModal", "fullScreenModal", "pageSheet" ->
                     Screen.StackPresentation.MODAL
                 "transparentModal", "containedTransparentModal" ->
                     Screen.StackPresentation.TRANSPARENT_MODAL

apps/src/screens/Modals.tsx

@@ -12,6 +12,7 @@ type StackParamList = {
   FullscreenModal: undefined;
   Alert: undefined;
   ContainedModal: undefined;
+  PageSheet: undefined;
 };
 
 interface MainScreenProps {
@@ -30,6 +31,10 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
       title="Open contained modal"
       onPress={() => navigation.navigate('ContainedModal')}
     />
+    <Button
+      title="Open pageSheet"
+      onPress={() => navigation.navigate('PageSheet')}
+    />
     <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
   </View>
 );
@@ -50,6 +55,10 @@ const ModalScreen = ({ navigation }: ModalScreenProps): React.JSX.Element => (
       title="Open contained modal"
       onPress={() => navigation.navigate('ContainedModal')}
     />
+    <Button
+      title="Open pageSheet"
+      onPress={() => navigation.push('PageSheet')}
+    />
     <Button title="Go back" onPress={() => navigation.goBack()} />
   </View>
 );
@@ -81,6 +90,11 @@ const App = (): React.JSX.Element => (
       component={ModalScreen}
       options={{ presentation: 'containedModal' }}
     />
+    <Stack.Screen
+      name="PageSheet"
+      component={ModalScreen}
+      options={{ presentation: 'pageSheet' }}
+    />
     <Stack.Screen
       name="Alert"
       component={Alert}

apps/src/screens/StackPresentation.tsx

@@ -16,6 +16,7 @@ type StackParamList = {
   ContainedTransparentModal: undefined;
   FullScreenModal: undefined;
   FormSheet: { usesFormSheetPresentation?: boolean };
+  PageSheet: undefined;
 };
 
 interface MainScreenProps {
@@ -62,6 +63,11 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
         onPress={() => navigation.navigate('FormSheet')}
         testID="stack-presentation-form-sheet-button"
       />
+      <Button
+        title="pageSheet"
+        onPress={() => navigation.navigate('PageSheet')}
+        testID="stack-presentation-page-sheet-button"
+      />
       <Button
         testID="stack-presentation-go-back-button"
         onPress={() => navigation.pop()}
@@ -123,6 +129,22 @@ const ModalScreen = ({ navigation }: ModalScreenProps): React.JSX.Element => (
   </View>
 );
 
+interface PageSheetScreenProps {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}
+
+const PageSheetScreen = ({ navigation }: PageSheetScreenProps): React.JSX.Element => (
+  <View style={styles.container}>
+    <Choose />
+    <Button
+      testID="stack-presentation-page-sheet-screen-go-back-button"
+      title="Go back"
+      onPress={() => navigation.goBack()}
+    />
+  </View>
+);
+
+
 interface FullScreenModalProps {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }
@@ -204,6 +226,11 @@ const App = (): React.JSX.Element => (
         usesFormSheetPresentation: true
       }}
     />
+    <Stack.Screen
+      name="PageSheet"
+      component={PageSheetScreen}
+      options={{ presentation: 'pageSheet' }}
+    />
   </Stack.Navigator>
 );
 

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -242,6 +242,7 @@ Defines how the method that should be used to present the given screen. It is a
 - `containedTransparentModal` – Explained below.
 - `fullScreenModal` – Explained below.
 - `formSheet` – Explained below.
+- `pageSheet` - Explained below.
 
 Using `containedModal` and `containedTransparentModal` with other types of modals in one native stack navigator is not recommended and can result in a freeze or a crash of the application.
 
@@ -250,13 +251,14 @@ For iOS:
 - `modal` will use [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc) on iOS 13 and later, and will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) on iOS 12 and earlier.
 - `fullScreenModal` will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc)
 - `formSheet` will use [`UIModalPresentationFormSheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationformsheet?language=objc)
+- `pageSheet` will use [`UIModalPresentationPageSheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/pagesheet?language=objc)
 - `transparentModal` will use [`UIModalPresentationOverFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationoverfullscreen?language=objc)
 - `containedModal` will use [`UIModalPresentationCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationcurrentcontext?language=objc)
 - `containedTransparentModal` will use [`UIModalPresentationOverCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationovercurrentcontext?language=objc)
 
 For Android:
 
-`modal`, `containedModal`, `fullScreenModal`, `formSheet` will use `Screen.StackPresentation.MODAL`.
+`modal`, `containedModal`, `fullScreenModal`, `formSheet`, `pageSheet` will use `Screen.StackPresentation.MODAL`.
 
 `transparentModal`, `containedTransparentModal` will use `Screen.StackPresentation.TRANSPARENT_MODAL`.
 

ios/RNSConvert.mm

@@ -49,6 +49,8 @@ + (RNSScreenStackPresentation)RNSScreenStackPresentationFromCppEquivalent:
       return RNSScreenStackPresentationFullScreenModal;
     case FormSheet:
       return RNSScreenStackPresentationFormSheet;
+    case PageSheet:
+      return RNSScreenStackPresentationPageSheet;
     case ContainedModal:
       return RNSScreenStackPresentationContainedModal;
     case TransparentModal:

ios/RNSEnums.h

@@ -5,7 +5,8 @@ typedef NS_ENUM(NSInteger, RNSScreenStackPresentation) {
   RNSScreenStackPresentationContainedModal,
   RNSScreenStackPresentationContainedTransparentModal,
   RNSScreenStackPresentationFullScreenModal,
-  RNSScreenStackPresentationFormSheet
+  RNSScreenStackPresentationFormSheet,
+  RNSScreenStackPresentationPageSheet,
 };
 
 typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {

ios/RNSScreen.mm

@@ -248,6 +248,15 @@ - (void)setStackPresentation:(RNSScreenStackPresentation)stackPresentation
       _controller.modalPresentationStyle = UIModalPresentationFullScreen;
 #endif
       break;
+
+    case RNSScreenStackPresentationPageSheet:
+#if !TARGET_OS_TV
+      _controller.modalPresentationStyle = UIModalPresentationPageSheet;
+#else
+      _controller.modalPresentationStyle = UIModalPresentationFullScreen;
+#endif
+      break;
+
     case RNSScreenStackPresentationFullScreenModal:
       _controller.modalPresentationStyle = UIModalPresentationFullScreen;
       break;
@@ -2024,6 +2033,7 @@ @implementation RCTConvert (RNSScreen)
       @"modal" : @(RNSScreenStackPresentationModal),
       @"fullScreenModal" : @(RNSScreenStackPresentationFullScreenModal),
       @"formSheet" : @(RNSScreenStackPresentationFormSheet),
+      @"pageSheet" : @(RNSScreenStackPresentationPageSheet),
       @"containedModal" : @(RNSScreenStackPresentationContainedModal),
       @"transparentModal" : @(RNSScreenStackPresentationTransparentModal),
       @"containedTransparentModal" : @(RNSScreenStackPresentationContainedTransparentModal)

native-stack/README.md

@@ -346,6 +346,7 @@ How the screen should be presented. Possible values:
 - `containedTransparentModal` – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to `"transparentModal"` on Android.
 - `fullScreenModal` – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to `"modal"` on Android.
 - `formSheet` – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to `"modal"` on Android.
+- `pageSheet` – will use "UIModalPresentationPageSheet" modal style on iOS and will fallback to `"modal"` on Android.
 
 Defaults to `push`.
 

src/fabric/ModalScreenNativeComponent.ts

@@ -45,6 +45,7 @@ type StackPresentation =
   | 'transparentModal'
   | 'fullScreenModal'
   | 'formSheet'
+  | 'pageSheet'
   | 'containedModal'
   | 'containedTransparentModal';
 

src/fabric/ScreenNativeComponent.ts

@@ -45,6 +45,7 @@ type StackPresentation =
   | 'transparentModal'
   | 'fullScreenModal'
   | 'formSheet'
+  | 'pageSheet'
   | 'containedModal'
   | 'containedTransparentModal';
 

src/native-stack/types.tsx

@@ -475,6 +475,7 @@ export type NativeStackNavigationOptions = {
    * - "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
    * - "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    * - "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
+   * - "pageSheet" – will use "UIModalPresentationPageSheet" modal style on iOS and will fallback to "modal" on Android.
    */
   stackPresentation?: ScreenProps['stackPresentation'];
   /**

src/native-stack/utils/getDefaultHeaderHeight.tsx

@@ -16,9 +16,11 @@ export default function getDefaultHeaderHeight(
   if (Platform.OS === 'ios') {
     const isLandscape = layout.width > layout.height;
     const isFormSheetModal =
-      stackPresentation === 'modal' || stackPresentation === 'formSheet';
+      stackPresentation === 'modal' ||
+      stackPresentation === 'formSheet' ||
+      stackPresentation === 'pageSheet';
     if (isFormSheetModal && !isLandscape) {
-      // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+      // `modal`, `formSheet` and `pageSheet` presentations do not take whole screen, so should not take the inset.
       statusBarHeight = 0;
     }
 

src/types.tsx

@@ -27,7 +27,8 @@ export type StackPresentationTypes =
   | 'containedModal'
   | 'containedTransparentModal'
   | 'fullScreenModal'
-  | 'formSheet';
+  | 'formSheet'
+  | 'pageSheet';
 export type StackAnimationTypes =
   | 'default'
   | 'fade'
@@ -425,6 +426,7 @@ export interface ScreenProps extends ViewProps {
    * - "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
    * - "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    * - "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS, on Android this will use Material BottomSheetBehaviour. On Android neested stack rendering is not yet supported.
+   * - "pageSheet" – will use "UIModalPresentationPageSheet" modal style on iOS and will fallback to "modal" on Android.
    */
   stackPresentation?: StackPresentationTypes;
   /**