@react-navigation/stack 7.0.0-alpha.9 → 7.0.0-rc.1

package/src/views/Stack/CardStack.tsx

@@ -23,21 +23,31 @@ import {
   forNoAnimation as forNoAnimationCard,
 } from '../../TransitionConfigs/CardStyleInterpolators';
 import {
+  BottomSheetAndroid,
   DefaultTransition,
+  FadeFromBottomAndroid,
+  FadeFromRightAndroid,
   ModalFadeTransition,
+  ModalSlideFromBottomIOS,
   ModalTransition,
+  RevealFromBottomAndroid,
+  ScaleFromCenterAndroid,
+  SlideFromLeftIOS,
+  SlideFromRightIOS,
 } from '../../TransitionConfigs/TransitionPresets';
 import type {
   Layout,
   Scene,
+  StackAnimationName,
   StackCardStyleInterpolator,
   StackDescriptor,
   StackDescriptorMap,
   StackHeaderMode,
-  StackNavigationOptions,
+  TransitionPreset,
 } from '../../types';
 import { findLastIndex } from '../../utils/findLastIndex';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
+import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
 import { CardContainer } from './CardContainer';
@@ -86,6 +96,22 @@ type State = {
   headerHeights: Record<string, number>;
 };
 
+const NAMED_TRANSITIONS_PRESETS = {
+  default: DefaultTransition,
+  fade: ModalFadeTransition,
+  fade_from_bottom: FadeFromBottomAndroid,
+  fade_from_right: FadeFromRightAndroid,
+  none: DefaultTransition,
+  reveal_from_bottom: RevealFromBottomAndroid,
+  scale_from_center: ScaleFromCenterAndroid,
+  slide_from_left: SlideFromLeftIOS,
+  slide_from_right: SlideFromRightIOS,
+  slide_from_bottom: Platform.select({
+    ios: ModalSlideFromBottomIOS,
+    default: BottomSheetAndroid,
+  }),
+} as const satisfies Record<StackAnimationName, TransitionPreset>;
+
 const EPSILON = 1e-5;
 
 const STATE_INACTIVE = 0;
@@ -178,12 +204,22 @@ const getDistanceFromOptions = (
   descriptor: StackDescriptor | undefined,
   isRTL: boolean
 ) => {
-  const {
-    presentation,
-    gestureDirection = presentation === 'modal'
+  if (descriptor?.options.gestureDirection) {
+    return getDistanceForDirection(
+      layout,
+      descriptor?.options.gestureDirection,
+      isRTL
+    );
+  }
+
+  const defaultGestureDirection =
+    descriptor?.options.presentation === 'modal'
       ? ModalTransition.gestureDirection
-      : DefaultTransition.gestureDirection,
-  } = (descriptor?.options || {}) as StackNavigationOptions;
+      : DefaultTransition.gestureDirection;
+
+  const gestureDirection = descriptor?.options.animation
+    ? NAMED_TRANSITIONS_PRESETS[descriptor?.options.animation]?.gestureDirection
+    : defaultGestureDirection;
 
   return getDistanceForDirection(layout, gestureDirection, isRTL);
 };
@@ -236,13 +272,12 @@ export class CardStack extends React.Component<Props, State> {
     ].reduce<GestureValues>((acc, curr) => {
       const descriptor =
         props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
-      const { animationEnabled } = descriptor?.options || {};
+      const { animation } = descriptor?.options || {};
 
       acc[curr.key] =
         state.gestures[curr.key] ||
         new Animated.Value(
-          (props.openingRouteKeys.includes(curr.key) &&
-            animationEnabled !== false) ||
+          (props.openingRouteKeys.includes(curr.key) && animation !== 'none') ||
           props.state.preloadedRoutes.includes(curr)
             ? getDistanceFromOptions(
                 state.layout,
@@ -255,6 +290,14 @@ export class CardStack extends React.Component<Props, State> {
       return acc;
     }, {});
 
+    const modalRouteKeys = getModalRouteKeys(
+      [...props.routes, ...props.state.preloadedRoutes],
+      {
+        ...props.descriptors,
+        ...props.preloadedDescriptors,
+      }
+    );
+
     const scenes = [...props.routes, ...props.state.preloadedRoutes].map(
       (route, index, self) => {
         // For preloaded screens, we don't care about the previous and the next screen
@@ -300,24 +343,38 @@ export class CardStack extends React.Component<Props, State> {
             ? nextDescriptor.options
             : descriptor.options;
 
-        const defaultTransitionPreset =
-          optionsForTransitionConfig.presentation === 'modal'
-            ? ModalTransition
-            : optionsForTransitionConfig.presentation === 'transparentModal'
-              ? ModalFadeTransition
-              : DefaultTransition;
+        // Assume modal if there are already modal screens in the stack
+        // or current screen is a modal when no presentation is specified
+        const isModal = modalRouteKeys.includes(route.key);
+
+        // Disable screen transition animation by default on web, windows and macos to match the native behavior
+        const excludedPlatforms =
+          Platform.OS !== 'web' &&
+          Platform.OS !== 'windows' &&
+          Platform.OS !== 'macos';
+
+        const animation =
+          optionsForTransitionConfig.animation ??
+          (excludedPlatforms ? 'default' : 'none');
+        const isAnimationEnabled = animation !== 'none';
+
+        const transitionPreset =
+          animation !== 'default'
+            ? NAMED_TRANSITIONS_PRESETS[animation]
+            : isModal || optionsForTransitionConfig.presentation === 'modal'
+              ? ModalTransition
+              : optionsForTransitionConfig.presentation === 'transparentModal'
+                ? ModalFadeTransition
+                : DefaultTransition;
 
         const {
-          animationEnabled = Platform.OS !== 'web' &&
-            Platform.OS !== 'windows' &&
-            Platform.OS !== 'macos',
-          gestureEnabled = Platform.OS === 'ios' && animationEnabled,
-          gestureDirection = defaultTransitionPreset.gestureDirection,
-          transitionSpec = defaultTransitionPreset.transitionSpec,
-          cardStyleInterpolator = animationEnabled === false
-            ? forNoAnimationCard
-            : defaultTransitionPreset.cardStyleInterpolator,
-          headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+          gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
+          gestureDirection = transitionPreset.gestureDirection,
+          transitionSpec = transitionPreset.transitionSpec,
+          cardStyleInterpolator = isAnimationEnabled
+            ? transitionPreset.cardStyleInterpolator
+            : forNoAnimationCard,
+          headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
           cardOverlayEnabled = (Platform.OS !== 'ios' &&
             optionsForTransitionConfig.presentation !== 'transparentModal') ||
             getIsModalPresentation(cardStyleInterpolator),
@@ -345,7 +402,7 @@ export class CardStack extends React.Component<Props, State> {
             ...descriptor,
             options: {
               ...descriptor.options,
-              animationEnabled,
+              animation,
               cardOverlayEnabled,
               cardStyleInterpolator,
               gestureDirection,
@@ -753,8 +810,8 @@ const styles = StyleSheet.create({
   absolute: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
   },
   floating: {
     zIndex: 1,

package/src/views/Stack/StackView.tsx

@@ -142,7 +142,7 @@ export class StackView extends React.Component<Props, State> {
     const isAnimationEnabled = (key: string) => {
       const descriptor = props.descriptors[key] || state.descriptors[key];
 
-      return descriptor ? descriptor.options.animationEnabled !== false : true;
+      return descriptor ? descriptor.options.animation !== 'none' : true;
     };
 
     const getAnimationTypeForReplace = (key: string) => {

package/lib/commonjs/utils/debounce.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.debounce = debounce;
-function debounce(func, duration) {
-  let timeout;
-  return function () {
-    if (!timeout) {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      func.apply(this, args);
-      timeout = setTimeout(() => {
-        timeout = undefined;
-      }, duration);
-    }
-  };
-}
-//# sourceMappingURL=debounce.js.map

package/lib/commonjs/utils/debounce.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","func","duration","timeout","_len","arguments","length","args","Array","_key","apply","setTimeout","undefined"],"sourceRoot":"../../../src","sources":["utils/debounce.tsx"],"mappings":";;;;;;AAAO,SAASA,QAAQA,CACtBC,IAAO,EACPC,QAAgB,EACb;EACH,IAAIC,OAA4C;EAEhD,OAAO,YAA8B;IACnC,IAAI,CAACA,OAAO,EAAE;MAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EADeC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;QAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;MAAA;MAE/BR,IAAI,CAACS,KAAK,CAAC,IAAI,EAAEH,IAAI,CAAC;MAEtBJ,OAAO,GAAGQ,UAAU,CAAC,MAAM;QACzBR,OAAO,GAAGS,SAAS;MACrB,CAAC,EAAEV,QAAQ,CAAC;IACd;EACF,CAAC;AACH"}

package/lib/module/utils/debounce.js

@@ -1,15 +0,0 @@
-export function debounce(func, duration) {
-  let timeout;
-  return function () {
-    if (!timeout) {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      func.apply(this, args);
-      timeout = setTimeout(() => {
-        timeout = undefined;
-      }, duration);
-    }
-  };
-}
-//# sourceMappingURL=debounce.js.map

package/lib/module/utils/debounce.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","func","duration","timeout","_len","arguments","length","args","Array","_key","apply","setTimeout","undefined"],"sourceRoot":"../../../src","sources":["utils/debounce.tsx"],"mappings":"AAAA,OAAO,SAASA,QAAQA,CACtBC,IAAO,EACPC,QAAgB,EACb;EACH,IAAIC,OAA4C;EAEhD,OAAO,YAA8B;IACnC,IAAI,CAACA,OAAO,EAAE;MAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EADeC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;QAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;MAAA;MAE/BR,IAAI,CAACS,KAAK,CAAC,IAAI,EAAEH,IAAI,CAAC;MAEtBJ,OAAO,GAAGQ,UAAU,CAAC,MAAM;QACzBR,OAAO,GAAGS,SAAS;MACrB,CAAC,EAAEV,QAAQ,CAAC;IACd;EACF,CAAC;AACH"}

package/lib/typescript/src/utils/debounce.d.ts

@@ -1,2 +0,0 @@
-export declare function debounce<T extends (...args: any[]) => void>(func: T, duration: number): T;
-//# sourceMappingURL=debounce.d.ts.map

package/lib/typescript/src/utils/debounce.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../../src/utils/debounce.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EACzD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,MAAM,GACf,CAAC,CAYH"}

package/src/utils/debounce.tsx

@@ -1,16 +0,0 @@
-export function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  duration: number
-): T {
-  let timeout: NodeJS.Timeout | number | undefined;
-
-  return function (this: any, ...args) {
-    if (!timeout) {
-      func.apply(this, args);
-
-      timeout = setTimeout(() => {
-        timeout = undefined;
-      }, duration);
-    }
-  } as T;
-}