From 7580efce89b45e7f3d9678d424e832d5164b4586 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 10 May 2021 12:42:02 +0200 Subject: [PATCH] refactor: rename animationPresentation to presentation --- example/src/Screens/MixedStack.tsx | 2 +- example/src/Screens/ModalStack.tsx | 2 +- example/src/Screens/StackTransparent.tsx | 4 +--- .../src/navigators/createStackNavigator.tsx | 4 ++-- packages/stack/src/types.tsx | 23 +++++++++++-------- .../stack/src/views/Stack/CardContainer.tsx | 6 ++--- packages/stack/src/views/Stack/CardStack.tsx | 14 ++++++----- 7 files changed, 28 insertions(+), 27 deletions(-) diff --git a/example/src/Screens/MixedStack.tsx b/example/src/Screens/MixedStack.tsx index 5303e8be..6de5e386 100644 --- a/example/src/Screens/MixedStack.tsx +++ b/example/src/Screens/MixedStack.tsx @@ -118,7 +118,7 @@ export default function MixedStackScreen({ navigation }: Props) { component={AlbumsScreen} options={{ title: 'Albums', - animationPresentation: 'modal', + presentation: 'modal', }} /> diff --git a/example/src/Screens/ModalStack.tsx b/example/src/Screens/ModalStack.tsx index 69191be4..87a4c6f9 100644 --- a/example/src/Screens/ModalStack.tsx +++ b/example/src/Screens/ModalStack.tsx @@ -82,7 +82,7 @@ export default function ModalStackScreen({ navigation }: Props) { }, [navigation]); return ( - + + ({ - animationPresentation: mode, + presentation: mode, headerShown: headerMode ? headerMode !== 'none' : true, headerMode: headerMode && headerMode !== 'none' ? headerMode : undefined, }), diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index 96e8df38..ad55079e 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -246,22 +246,25 @@ export type StackNavigationOptions = StackHeaderOptions & * so that the previous screen isn't transformed or invisible. */ cardStyle?: StyleProp; + /** + * Whether this screen should be presented as a modal or a regular card. + * + * Specifying this will configure several options: + * - `card`: Use the default OS animations for iOS and Android screen transitions. + * - `modal`: Use Modal animations. This changes a few things: + * - Sets `headerMode` to `screen` for the screen unless specified otherwise. + * - Changes the screen animation to match the platform behavior for modals. + * - Adjusts the `detachPreviousScreen` option so that the previous screen stays rendered. + * + * Defaults to 'card'. + */ + presentation?: 'card' | 'modal'; /** * Whether transition animation should be enabled the screen. * If you set it to `false`, the screen won't animate when pushing or popping. * Defaults to `true` on Android and iOS, `false` on Web. */ animationEnabled?: boolean; - /** - * Whether this screen should be presented as a modal or a regular card. - * - * If you haven't customized the animations separately, the animation will change based on the value: - * - 'modal' - modal animation on iOS and Android. It'll also default `headerMode` to `screen`. - * - 'card' - horizontal slide animation on iOS, OS-default animation on Android. - * - * Defaults to 'card'. - */ - animationPresentation?: 'card' | 'modal'; /** * The type of animation to use when this screen replaces another screen. Defaults to `push`. * When `pop` is used, the `pop` animation is applied to the screen being replaced. diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx index 2214aa77..cb876656 100644 --- a/packages/stack/src/views/Stack/CardContainer.tsx +++ b/packages/stack/src/views/Stack/CardContainer.tsx @@ -170,7 +170,7 @@ function CardContainer({ }, [pointerEvents, scene.progress.next]); const { - animationPresentation, + presentation, cardOverlay, cardOverlayEnabled, cardShadowEnabled, @@ -228,9 +228,7 @@ function CardContainer({ accessibilityElementsHidden={!focused} importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'} pointerEvents={active ? 'box-none' : pointerEvents} - pageOverflowEnabled={ - headerMode !== 'float' && animationPresentation !== 'modal' - } + pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'} headerDarkContent={headerDarkContent} containerStyle={ hasAbsoluteFloatHeader && headerMode !== 'screen' diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx index 2567066b..f06bc91e 100755 --- a/packages/stack/src/views/Stack/CardStack.tsx +++ b/packages/stack/src/views/Stack/CardStack.tsx @@ -122,8 +122,8 @@ const getDistanceFromOptions = ( descriptor?: StackDescriptor ) => { const { - animationPresentation, - gestureDirection = animationPresentation === 'modal' + presentation, + gestureDirection = presentation === 'modal' ? ModalTransition.gestureDirection : DefaultTransition.gestureDirection, } = (descriptor?.options || {}) as StackNavigationOptions; @@ -226,7 +226,7 @@ export default class CardStack extends React.Component { : descriptor.options; let defaultTransitionPreset = - optionsForTransitionConfig.animationPresentation === 'modal' + optionsForTransitionConfig.presentation === 'modal' ? ModalTransition : DefaultTransition; @@ -247,8 +247,10 @@ export default class CardStack extends React.Component { const headerMode: StackHeaderMode = descriptor.options.headerMode ?? - (optionsForTransitionConfig.animationPresentation !== 'modal' && - cardStyleInterpolator !== forModalPresentationIOS && + (!( + optionsForTransitionConfig.presentation === 'modal' || + cardStyleInterpolator === forModalPresentationIOS + ) && Platform.OS === 'ios' && descriptor.options.header === undefined ? 'float' @@ -465,7 +467,7 @@ export default class CardStack extends React.Component { const { options } = scenes[i].descriptor; const { // By default, we don't want to detach the previous screen of the active one for modals - detachPreviousScreen = options.animationPresentation === 'modal' || + detachPreviousScreen = options.presentation === 'modal' || options.cardStyleInterpolator === forModalPresentationIOS ? i !== scenes.length - 1 : true,