@react-navigation/stack 7.0.0-alpha.8 → 7.0.0-rc.0

package/src/views/Screens.tsx

@@ -32,6 +32,7 @@ export const MaybeScreen = ({
   active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
   children: React.ReactNode;
   freezeOnBlur?: boolean;
+  homeIndicatorHidden?: boolean;
 }) => {
   if (Screens != null) {
     return (

package/src/views/Stack/Card.tsx

@@ -295,7 +295,8 @@ export class Card extends React.Component<Props> {
         this.handleStartInteraction();
         onGestureBegin?.();
         break;
-      case GestureState.CANCELLED: {
+      case GestureState.CANCELLED:
+      case GestureState.FAILED: {
         this.isSwiping.setValue(FALSE);
         this.handleEndInteraction();
 
@@ -407,9 +408,9 @@ export class Card extends React.Component<Props> {
       gestureResponseDistance !== undefined
         ? gestureResponseDistance
         : gestureDirection === 'vertical' ||
-          gestureDirection === 'vertical-inverted'
-        ? GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+            gestureDirection === 'vertical-inverted'
+          ? GESTURE_RESPONSE_DISTANCE_VERTICAL
+          : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
     if (gestureDirection === 'vertical') {
       return {
@@ -539,7 +540,13 @@ export class Card extends React.Component<Props> {
           // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
           collapsable={false}
         />
-        <View pointerEvents="box-none" {...rest}>
+        <View
+          pointerEvents="box-none"
+          // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
+          // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
+          collapsable={false}
+          {...rest}
+        >
           {overlayEnabled ? (
             <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
               {overlay({ style: overlayStyle })}
@@ -564,12 +571,12 @@ export class Card extends React.Component<Props> {
                     style={[
                       styles.shadow,
                       gestureDirection === 'horizontal'
-                        ? [styles.shadowHorizontal, styles.shadowLeft]
+                        ? [styles.shadowHorizontal, styles.shadowStart]
                         : gestureDirection === 'horizontal-inverted'
-                        ? [styles.shadowHorizontal, styles.shadowRight]
-                        : gestureDirection === 'vertical'
-                        ? [styles.shadowVertical, styles.shadowTop]
-                        : [styles.shadowVertical, styles.shadowBottom],
+                          ? [styles.shadowHorizontal, styles.shadowEnd]
+                          : gestureDirection === 'vertical'
+                            ? [styles.shadowVertical, styles.shadowTop]
+                            : [styles.shadowVertical, styles.shadowBottom],
                       { backgroundColor },
                       shadowStyle,
                     ]}
@@ -613,15 +620,15 @@ const styles = StyleSheet.create({
     width: 3,
     shadowOffset: { width: -1, height: 1 },
   },
-  shadowLeft: {
-    left: 0,
+  shadowStart: {
+    start: 0,
   },
-  shadowRight: {
-    right: 0,
+  shadowEnd: {
+    end: 0,
   },
   shadowVertical: {
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     height: 3,
     shadowOffset: { width: 1, height: -1 },
   },

package/src/views/Stack/CardContainer.tsx

@@ -190,7 +190,7 @@ function CardContainerInner({
 
   const {
     presentation,
-    animationEnabled,
+    animation,
     cardOverlay,
     cardOverlayEnabled,
     cardShadowEnabled,
@@ -275,7 +275,7 @@ function CardContainerInner({
           display:
             // Hide unfocused screens when animation isn't enabled
             // This is also necessary for a11y on web
-            animationEnabled === false &&
+            animation === 'none' &&
             isNextScreenTransparent === false &&
             detachCurrentScreen !== false &&
             !focused

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,
@@ -560,16 +617,16 @@ export class CardStack extends React.Component<Props, State> {
         detachPreviousScreen = options.presentation === 'transparentModal'
           ? false
           : getIsModalPresentation(options.cardStyleInterpolator)
-          ? i !==
-            findLastIndex(scenes, (scene) => {
-              const { cardStyleInterpolator } = scene.descriptor.options;
-
-              return (
-                cardStyleInterpolator === forModalPresentationIOS ||
-                cardStyleInterpolator?.name === 'forModalPresentationIOS'
-              );
-            })
-          : true,
+            ? i !==
+              findLastIndex(scenes, (scene) => {
+                const { cardStyleInterpolator } = scene.descriptor.options;
+
+                return (
+                  cardStyleInterpolator === forModalPresentationIOS ||
+                  cardStyleInterpolator?.name === 'forModalPresentationIOS'
+                );
+              })
+            : true,
       } = options;
 
       if (detachPreviousScreen === false) {
@@ -650,8 +707,8 @@ export class CardStack extends React.Component<Props, State> {
                 index === routes.length - 1
                   ? STATE_ON_TOP // the screen is on top after the transition
                   : index >= routes.length - activeScreensLimit
-                  ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
-                  : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
+                    ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
+                    : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
               isScreenActive = sceneForActivity
                 ? sceneForActivity.progress.current.interpolate({
                     inputRange: [0, 1 - EPSILON, 1],
@@ -665,6 +722,7 @@ export class CardStack extends React.Component<Props, State> {
               headerShown = true,
               headerTransparent,
               freezeOnBlur,
+              autoHideHomeIndicator,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -698,6 +756,7 @@ export class CardStack extends React.Component<Props, State> {
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 freezeOnBlur={freezeOnBlur}
+                homeIndicatorHidden={autoHideHomeIndicator}
                 pointerEvents="box-none"
               >
                 <CardContainer
@@ -751,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;
-}