feat: add pageSheet presentation to native stack (#12503)

**Motivation**

Since the release of iOS 18, screens with`presentation: 'modal'` changed
size on devices with a bigger screen, such as an iPad - they became much
smaller, which impacted applications of the library's users (see issue
software-mansion/react-native-screens#2549).

To address the issue, `react-native-screens` will introduce new
presentation type for native stack (`pageSheet`) that will allow users
to use previous modal behavior (see PR
software-mansion/react-native-screens#2793). The
behavior of `pageSheet` on Android will be the same as `modal`.

Please note that in `react-native-screens`, behavior of regular `modal`
has been aligned with previous behavior internally via
[`prefersPageSizing` UIKit
prop](software-mansion/react-native-screens#2797)
in order not to introduce breaking changes. In the future major release
of `react-native-screens` however this will be aligned to fully native
behavior.

This PR contains changes required to support `pageSheet` in
`react-navigation`.

**Test plan**

Open Stack Presentation and Modals example screens in example apps from
`react-native-screens` and open a `pageSheet`.

Author: kligarski

packages/native-stack/src/types.tsx

@@ -581,6 +581,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.
    *
    * Only supported on iOS and Android.
    */

packages/native-stack/src/utils/getModalRoutesKeys.ts

@@ -16,7 +16,8 @@ export const getModalRouteKeys = (
       presentation === 'containedModal' ||
       presentation === 'containedTransparentModal' ||
       presentation === 'fullScreenModal' ||
-      presentation === 'formSheet'
+      presentation === 'formSheet' ||
+      presentation === 'pageSheet'
     ) {
       acc.push(route.key);
     }

packages/native-stack/src/views/NativeStackView.native.tsx

@@ -138,8 +138,11 @@ const SceneView = ({
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
 
-  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
-  const isModal = presentation === 'modal' || presentation === 'formSheet';
+  // `modal`, `formSheet` and `pageSheet` presentations do not take whole screen, so should not take the inset.
+  const isModal =
+    presentation === 'modal' ||
+    presentation === 'formSheet' ||
+    presentation === 'pageSheet';
 
   // Modals are fullscreen in landscape only on iPhone
   const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);