From 88ecbb18ce55ee0ba1062567e1f02fd8b05c428b Mon Sep 17 00:00:00 2001
From: Krzysztof Ligarski <krzysztof.ligarski@swmansion.com>
Date: Thu, 20 Mar 2025 14:33:13 +0100
Subject: [PATCH] add support for pageSheet

---
 .../swmansion/rnscreens/ScreenViewManager.kt  |  2 +-
 apps/src/screens/Modals.tsx                   | 14 ++++++++++
 apps/src/screens/StackPresentation.tsx        | 27 +++++++++++++++++++
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md           |  4 ++-
 ios/RNSConvert.mm                             |  2 ++
 ios/RNSEnums.h                                |  3 ++-
 ios/RNSScreen.mm                              | 10 +++++++
 native-stack/README.md                        |  1 +
 src/fabric/ModalScreenNativeComponent.ts      |  1 +
 src/fabric/ScreenNativeComponent.ts           |  1 +
 src/native-stack/types.tsx                    |  1 +
 .../utils/getDefaultHeaderHeight.tsx          |  6 +++--
 src/types.tsx                                 |  4 ++-
 13 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
index 3889c2f362..3c655d369f 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
+++ b/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
diff --git a/apps/src/screens/Modals.tsx b/apps/src/screens/Modals.tsx
index 3d50f4a6d7..5e4727f033 100644
--- a/apps/src/screens/Modals.tsx
+++ b/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}
diff --git a/apps/src/screens/StackPresentation.tsx b/apps/src/screens/StackPresentation.tsx
index 5773e029cd..548742c376 100644
--- a/apps/src/screens/StackPresentation.tsx
+++ b/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>
 );
 
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index a9f15ac454..a1f56b3024 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/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`.
 
diff --git a/ios/RNSConvert.mm b/ios/RNSConvert.mm
index c8ba0d1c6a..1b1c99d55e 100644
--- a/ios/RNSConvert.mm
+++ b/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:
diff --git a/ios/RNSEnums.h b/ios/RNSEnums.h
index 2d05610b48..7a82e43b87 100644
--- a/ios/RNSEnums.h
+++ b/ios/RNSEnums.h
@@ -5,7 +5,8 @@ typedef NS_ENUM(NSInteger, RNSScreenStackPresentation) {
   RNSScreenStackPresentationContainedModal,
   RNSScreenStackPresentationContainedTransparentModal,
   RNSScreenStackPresentationFullScreenModal,
-  RNSScreenStackPresentationFormSheet
+  RNSScreenStackPresentationFormSheet,
+  RNSScreenStackPresentationPageSheet,
 };
 
 typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 4e34a3e933..b80590e30b 100644
--- a/ios/RNSScreen.mm
+++ b/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)
diff --git a/native-stack/README.md b/native-stack/README.md
index f87fa5dfe9..7f6faff28b 100644
--- a/native-stack/README.md
+++ b/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`.
 
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
index 8fcdefac81..77593c682e 100644
--- a/src/fabric/ModalScreenNativeComponent.ts
+++ b/src/fabric/ModalScreenNativeComponent.ts
@@ -45,6 +45,7 @@ type StackPresentation =
   | 'transparentModal'
   | 'fullScreenModal'
   | 'formSheet'
+  | 'pageSheet'
   | 'containedModal'
   | 'containedTransparentModal';
 
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
index 37dbf94c68..2a7ae3d8e1 100644
--- a/src/fabric/ScreenNativeComponent.ts
+++ b/src/fabric/ScreenNativeComponent.ts
@@ -45,6 +45,7 @@ type StackPresentation =
   | 'transparentModal'
   | 'fullScreenModal'
   | 'formSheet'
+  | 'pageSheet'
   | 'containedModal'
   | 'containedTransparentModal';
 
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 1f04534ee6..36c6e5d27e 100644
--- a/src/native-stack/types.tsx
+++ b/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'];
   /**
diff --git a/src/native-stack/utils/getDefaultHeaderHeight.tsx b/src/native-stack/utils/getDefaultHeaderHeight.tsx
index c524dbe2eb..6464ff49d0 100644
--- a/src/native-stack/utils/getDefaultHeaderHeight.tsx
+++ b/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;
     }
 
diff --git a/src/types.tsx b/src/types.tsx
index 0f4dddaba3..efdc456034 100644
--- a/src/types.tsx
+++ b/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;
   /**