feat: add modal types (#551)

Added missing types for modal `stackPresentation` prop. PR based on the work of @pvinis.

README.md

@@ -109,9 +109,27 @@ Allows for the customization of how the given screen should appear/disappear whe
 
 Defines how the method that should be used to present the given screen. It is a separate property from `stackAnimation` as the presentation mode can carry additional semantic. The allowed values are:
 
-- `"push"` – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
-- `"modal"` – the new screen will be presented modally. Besides, this allows for a nested stack to be rendered inside such screens
-- `"transparentModal"` – the new screen will be presented modally but also, the second to last screen will remain attached to the stack container such that if the top screen is non-opaque, the content below can still be seen. If `"modal"` is used instead the below screen will get unmounted as soon as the transition ends.
+ - `push` – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
+ - `modal` – Explained below.
+ - `transparentModal` – Explained below.
+ - `containedModal` – Explained below.
+ - `containedTransparentModal` – Explained below.
+ - `fullScreenModal` – Explained below.
+ - `formSheet` – Explained below.
+
+ 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)
+ - `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`.
+
+ `transparentModal`, `containedTransparentModal` will use `Screen.StackPresentation.TRANSPARENT_MODAL`.
 
 ### `<ScreenStackHeaderConfig>`
 

native-stack/README.md

@@ -155,8 +155,12 @@ Gestures are only supported on iOS. They can be disabled only when `stackPresent
 How the screen should be presented. Possible values:
 
 - `push` - The new screen will be pushed onto a stack. The default animation on iOS is to slide from the side. The animation on Android may vary depending on the OS version and theme.
-- `modal` - The new screen will be presented modally. In addition, this allows for a nested stack to be rendered inside such screens
+- `modal` - The new screen will be presented modally. In addition, this allows for a nested stack to be rendered inside such screens.
 - `transparentModal` - The new screen will be presented modally. In addition, the second to last screen will remain attached to the stack container such that if the top screen is translucent, the content below can still be seen. If `"modal"` is used instead, the below screen gets removed as soon as the transition ends.
+- `containedModal` – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to `"modal"` on Android.
+- `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.
 
 Defaults to `push`.
 

src/index.d.ts

@@ -19,6 +19,8 @@ declare module 'react-native-screens' {
     | 'push'
     | 'modal'
     | 'transparentModal'
+    | 'containedModal'
+    | 'containedTransparentModal'
     | 'fullScreenModal'
     | 'formSheet';
   export type StackAnimationTypes = 'default' | 'fade' | 'flip' | 'none';
@@ -37,8 +39,12 @@ declare module 'react-native-screens' {
     onDismissed?: (e: NativeSyntheticEvent<NativeTouchEvent>) => void;
     /**
      * @type "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
-     * @type "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens
+     * @type "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens.
      * @type "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends.
+     * @type "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
+     * @type "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
+     * @type "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
+     * @type "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
      */
     stackPresentation: StackPresentationTypes;
     /**

src/native-stack/types.tsx

@@ -223,8 +223,12 @@ export type NativeStackNavigationOptions = {
    * How should the screen be presented.
    * The following values are currently supported:
    * - "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
-   * - "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens
+   * - "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens.
    * - "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends.
+   * - "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
+   * - "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.
    */
   stackPresentation?: ScreenProps['stackPresentation'];
   /**