refactor: rename animationPresentation to presentation

example/src/Screens/MixedStack.tsx

@@ -118,7 +118,7 @@ export default function MixedStackScreen({ navigation }: Props) {
         component={AlbumsScreen}
         options={{
           title: 'Albums',
-          animationPresentation: 'modal',
+          presentation: 'modal',
         }}
       />
     </MixedStack.Navigator>

example/src/Screens/ModalStack.tsx

@@ -82,7 +82,7 @@ export default function ModalStackScreen({ navigation }: Props) {
   }, [navigation]);
 
   return (
-    <ModalStack.Navigator screenOptions={{ animationPresentation: 'modal' }}>
+    <ModalStack.Navigator screenOptions={{ presentation: 'modal' }}>
       <ModalStack.Screen
         name="Article"
         component={ArticleScreen}

example/src/Screens/StackTransparent.tsx

@@ -84,9 +84,7 @@ export default function TransparentStackScreen({ navigation }: Props) {
   }, [navigation]);
 
   return (
-    <TransparentStack.Navigator
-      screenOptions={{ animationPresentation: 'modal' }}
-    >
+    <TransparentStack.Navigator screenOptions={{ presentation: 'modal' }}>
       <TransparentStack.Screen
         name="Article"
         component={ArticleScreen}

packages/stack/src/navigators/createStackNavigator.tsx

@@ -38,7 +38,7 @@ function StackNavigator({
 
   warnOnce(
     mode != null,
-    `Stack Navigator: 'mode="${mode}"' is deprecated. Use 'animationPresentation: "${mode}"' in 'screenOptions' instead.`
+    `Stack Navigator: 'mode="${mode}"' is deprecated. Use 'presentation: "${mode}"' in 'screenOptions' instead.`
   );
 
   warnOnce(
@@ -67,7 +67,7 @@ function StackNavigator({
     children,
     screenOptions,
     defaultScreenOptions: () => ({
-      animationPresentation: mode,
+      presentation: mode,
       headerShown: headerMode ? headerMode !== 'none' : true,
       headerMode: headerMode && headerMode !== 'none' ? headerMode : undefined,
     }),

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<ViewStyle>;
+    /**
+     * 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.

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'

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<Props, State> {
             : descriptor.options;
 
         let defaultTransitionPreset =
-          optionsForTransitionConfig.animationPresentation === 'modal'
+          optionsForTransitionConfig.presentation === 'modal'
             ? ModalTransition
             : DefaultTransition;
 
@@ -247,8 +247,10 @@ export default class CardStack extends React.Component<Props, State> {
 
         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<Props, State> {
       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,