From beb37381fb2771cdfb96a1d3c40b0ac293226d2f Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Jun 2020 14:01:59 +0200 Subject: [PATCH] feat: add modal types (#551) Added missing types for modal `stackPresentation` prop. PR based on the work of @pvinis. --- README.md | 24 +++++++++++++++++++++--- native-stack/README.md | 6 +++++- src/index.d.ts | 8 +++++++- src/native-stack/types.tsx | 6 +++++- 4 files changed, 38 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index cec8173..d1e8ac0 100644 --- a/README.md +++ b/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`. ### `` diff --git a/native-stack/README.md b/native-stack/README.md index a3e8a27..f5b137b 100644 --- a/native-stack/README.md +++ b/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`. diff --git a/src/index.d.ts b/src/index.d.ts index d7a8fb3..77d5bc8 100644 --- a/src/index.d.ts +++ b/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) => 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; /** diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx index fb497d9..a8b3db4 100644 --- a/src/native-stack/types.tsx +++ b/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']; /**