@react-navigation/stack 7.4.4 → 7.4.6

package/src/views/Stack/CardStack.tsx

@@ -40,9 +40,9 @@ import type {
   Scene,
   StackAnimationName,
   StackCardStyleInterpolator,
-  StackDescriptor,
   StackDescriptorMap,
   StackHeaderMode,
+  StackNavigationOptions,
   TransitionPreset,
 } from '../../types';
 import { findLastIndex } from '../../utils/findLastIndex';
@@ -198,24 +198,20 @@ const getHeaderHeights = (
 
 const getDistanceFromOptions = (
   layout: Layout,
-  descriptor: StackDescriptor | undefined,
+  options: StackNavigationOptions | undefined,
   isRTL: boolean
 ) => {
-  if (descriptor?.options.gestureDirection) {
-    return getDistanceForDirection(
-      layout,
-      descriptor?.options.gestureDirection,
-      isRTL
-    );
+  if (options?.gestureDirection) {
+    return getDistanceForDirection(layout, options.gestureDirection, isRTL);
   }
 
   const defaultGestureDirection =
-    descriptor?.options.presentation === 'modal'
+    options?.presentation === 'modal'
       ? ModalTransition.gestureDirection
       : DefaultTransition.gestureDirection;
 
-  const gestureDirection = descriptor?.options.animation
-    ? NAMED_TRANSITIONS_PRESETS[descriptor?.options.animation]?.gestureDirection
+  const gestureDirection = options?.animation
+    ? NAMED_TRANSITIONS_PRESETS[options?.animation]?.gestureDirection
     : defaultGestureDirection;
 
   return getDistanceForDirection(layout, gestureDirection, isRTL);
@@ -224,7 +220,7 @@ const getDistanceFromOptions = (
 const getProgressFromGesture = (
   gesture: Animated.Value,
   layout: Layout,
-  descriptor: StackDescriptor | undefined,
+  options: StackNavigationOptions | undefined,
   isRTL: boolean
 ) => {
   const distance = getDistanceFromOptions(
@@ -234,7 +230,7 @@ const getProgressFromGesture = (
       width: Math.max(1, layout.width),
       height: Math.max(1, layout.height),
     },
-    descriptor,
+    options,
     isRTL
   );
 
@@ -251,6 +247,20 @@ const getProgressFromGesture = (
   });
 };
 
+function getDefaultAnimation(animation: StackAnimationName | undefined) {
+  // 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';
+
+  return animation ?? (excludedPlatforms ? 'default' : 'none');
+}
+
+export function getAnimationEnabled(animation: StackAnimationName | undefined) {
+  return getDefaultAnimation(animation) !== 'none';
+}
+
 export class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
@@ -274,11 +284,12 @@ export class CardStack extends React.Component<Props, State> {
       acc[curr.key] =
         state.gestures[curr.key] ||
         new Animated.Value(
-          (props.openingRouteKeys.includes(curr.key) && animation !== 'none') ||
+          (props.openingRouteKeys.includes(curr.key) &&
+            getAnimationEnabled(animation)) ||
           props.state.preloadedRoutes.includes(curr)
             ? getDistanceFromOptions(
                 state.layout,
-                descriptor,
+                descriptor?.options,
                 props.direction === 'rtl'
               )
             : 0
@@ -317,15 +328,19 @@ export class CardStack extends React.Component<Props, State> {
           state.descriptors[route.key] ||
           (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
 
-        const nextDescriptor =
+        const nextOptions =
           nextRoute &&
-          (props.descriptors[nextRoute?.key] ||
-            state.descriptors[nextRoute?.key]);
+          (
+            props.descriptors[nextRoute?.key] ||
+            state.descriptors[nextRoute?.key]
+          )?.options;
 
-        const previousDescriptor =
+        const previousOptions =
           previousRoute &&
-          (props.descriptors[previousRoute?.key] ||
-            state.descriptors[previousRoute?.key]);
+          (
+            props.descriptors[previousRoute?.key] ||
+            state.descriptors[previousRoute?.key]
+          )?.options;
 
         // When a screen is not the last, it should use next screen's transition config
         // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
@@ -335,25 +350,20 @@ export class CardStack extends React.Component<Props, State> {
         // but the majority of the transitions look alright
         const optionsForTransitionConfig =
           index !== self.length - 1 &&
-          nextDescriptor &&
-          nextDescriptor.options.presentation !== 'transparentModal'
-            ? nextDescriptor.options
+          nextOptions &&
+          nextOptions?.presentation !== 'transparentModal'
+            ? nextOptions
             : descriptor.options;
 
         // 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 = getDefaultAnimation(
+          optionsForTransitionConfig.animation
+        );
 
-        const animation =
-          optionsForTransitionConfig.animation ??
-          (excludedPlatforms ? 'default' : 'none');
-        const isAnimationEnabled = animation !== 'none';
+        const isAnimationEnabled = getAnimationEnabled(animation);
 
         const transitionPreset =
           animation !== 'default'
@@ -382,8 +392,8 @@ export class CardStack extends React.Component<Props, State> {
           (!(
             optionsForTransitionConfig.presentation === 'modal' ||
             optionsForTransitionConfig.presentation === 'transparentModal' ||
-            nextDescriptor?.options.presentation === 'modal' ||
-            nextDescriptor?.options.presentation === 'transparentModal' ||
+            nextOptions?.presentation === 'modal' ||
+            nextOptions?.presentation === 'transparentModal' ||
             getIsModalPresentation(cardStyleInterpolator)
           ) &&
           Platform.OS === 'ios' &&
@@ -413,16 +423,15 @@ export class CardStack extends React.Component<Props, State> {
             current: getProgressFromGesture(
               currentGesture,
               state.layout,
-              descriptor,
+              descriptor.options,
               isRTL
             ),
             next:
-              nextGesture &&
-              nextDescriptor?.options.presentation !== 'transparentModal'
+              nextGesture && nextOptions?.presentation !== 'transparentModal'
                 ? getProgressFromGesture(
                     nextGesture,
                     state.layout,
-                    nextDescriptor,
+                    nextOptions,
                     isRTL
                   )
                 : undefined,
@@ -430,7 +439,7 @@ export class CardStack extends React.Component<Props, State> {
               ? getProgressFromGesture(
                   previousGesture,
                   state.layout,
-                  previousDescriptor,
+                  previousOptions,
                   isRTL
                 )
               : undefined,
@@ -438,8 +447,8 @@ export class CardStack extends React.Component<Props, State> {
           __memo: [
             state.layout,
             descriptor,
-            nextDescriptor,
-            previousDescriptor,
+            nextOptions,
+            previousOptions,
             currentGesture,
             nextGesture,
             previousGesture,

package/src/views/Stack/StackView.tsx

@@ -27,7 +27,7 @@ import {
   HeaderContainer,
   type Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import { CardStack } from './CardStack';
+import { CardStack, getAnimationEnabled } from './CardStack';
 
 type Props = StackNavigationConfig & {
   direction: LocaleDirection;
@@ -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.animation !== 'none' : true;
+      return getAnimationEnabled(descriptor?.options.animation);
     };
 
     const getAnimationTypeForReplace = (key: string) => {

package/lib/module/views/Stack/CardSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","StyleSheet","View","jsx","_jsx","CardSheet","forwardRef","enabled","layout","style","rest","ref","fill","setFill","useState","pointerEvents","setPointerEvents","useImperativeHandle","useEffect","document","body","width","clientWidth","height","clientHeight","isFullHeight","id","unsubscribe","navigator","maxTouchPoints","getElementById","createElement","updateStyle","vh","window","innerHeight","textContent","join","head","contains","appendChild","addEventListener","removeEventListener","remove","styles","page","card","create","minHeight","flex","overflow"],"sourceRoot":"../../../../src","sources":["views/Stack/CardSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/views/Stack/CardSheet.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { type ViewProps } from 'react-native';
-export type CardSheetRef = {
-    setPointerEvents: React.Dispatch<ViewProps['pointerEvents']>;
-};
-export declare const CardSheet: React.ForwardRefExoticComponent<ViewProps & {
-    enabled: boolean;
-    layout: {
-        width: number;
-        height: number;
-    };
-    children: React.ReactNode;
-} & React.RefAttributes<CardSheetRef>>;
-//# sourceMappingURL=CardSheet.d.ts.map

package/lib/typescript/src/views/Stack/CardSheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardSheet.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/CardSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQhE,MAAM,MAAM,YAAY,GAAG;IACzB,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;CAC9D,CAAC;AAMF,eAAO,MAAM,SAAS;aAbX,OAAO;YACR;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;cAC/B,KAAK,CAAC,SAAS;sCAyF1B,CAAC"}

package/src/views/Stack/CardSheet.tsx

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
-
-type Props = ViewProps & {
-  enabled: boolean;
-  layout: { width: number; height: number };
-  children: React.ReactNode;
-};
-
-export type CardSheetRef = {
-  setPointerEvents: React.Dispatch<ViewProps['pointerEvents']>;
-};
-
-// This component will render a page which overflows the screen
-// if the container fills the body by comparing the size
-// This lets the document.body handle scrolling of the content
-// It's necessary for mobile browsers to be able to hide address bar on scroll
-export const CardSheet = React.forwardRef<CardSheetRef, Props>(
-  function CardSheet({ enabled, layout, style, ...rest }, ref) {
-    const [fill, setFill] = React.useState(false);
-    // To avoid triggering a rerender in Card during animation we had to move
-    // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
-    const [pointerEvents, setPointerEvents] =
-      React.useState<ViewProps['pointerEvents']>('auto');
-
-    React.useImperativeHandle(ref, () => {
-      return { setPointerEvents };
-    });
-
-    React.useEffect(() => {
-      if (typeof document === 'undefined' || !document.body) {
-        // Only run when DOM is available
-        return;
-      }
-
-      const width = document.body.clientWidth;
-      const height = document.body.clientHeight;
-
-      // Workaround for mobile Chrome, necessary when a navigation happens
-      // when the address bar has already collapsed, which resulted in an
-      // empty space at the bottom of the page (matching the height of the
-      // address bar). To fix this, it's necessary to update the height of
-      // the DOM with the current height of the window.
-      // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-      const isFullHeight = height === layout.height;
-      const id = '__react-navigation-stack-mobile-chrome-viewport-fix';
-
-      let unsubscribe: (() => void) | undefined;
-
-      if (isFullHeight && navigator.maxTouchPoints > 0) {
-        const style =
-          document.getElementById(id) ?? document.createElement('style');
-
-        style.id = id;
-
-        const updateStyle = () => {
-          const vh = window.innerHeight * 0.01;
-
-          style.textContent = [
-            `:root { --vh: ${vh}px; }`,
-            `body { height: calc(var(--vh, 1vh) * 100); }`,
-          ].join('\n');
-        };
-
-        updateStyle();
-
-        if (!document.head.contains(style)) {
-          document.head.appendChild(style);
-        }
-
-        window.addEventListener('resize', updateStyle);
-
-        unsubscribe = () => {
-          window.removeEventListener('resize', updateStyle);
-        };
-      } else {
-        // Remove the workaround if the stack does not occupy the whole
-        // height of the page
-        document.getElementById(id)?.remove();
-      }
-
-      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-      setFill(width === layout.width && height === layout.height);
-
-      return unsubscribe;
-    }, [layout.height, layout.width]);
-
-    return (
-      <View
-        {...rest}
-        pointerEvents={pointerEvents}
-        style={[enabled && fill ? styles.page : styles.card, style]}
-      />
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  page: {
-    minHeight: '100%',
-  },
-  card: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-});