@react-navigation/stack 7.4.4 → 7.4.6

package/src/views/Stack/Card.tsx

@@ -8,7 +8,6 @@ import {
   type StyleProp,
   StyleSheet,
   View,
-  type ViewProps,
   type ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
@@ -30,9 +29,10 @@ import {
   PanGestureHandler,
   type PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import { CardSheet, type CardSheetRef } from './CardSheet';
+import { CardContent } from './CardContent';
 
-type Props = ViewProps & {
+type Props = {
+  animated: boolean;
   interpolationIndex: number;
   opening: boolean;
   closing: boolean;
@@ -181,11 +181,11 @@ export class Card extends React.Component<Props> {
 
   private isSwiping = new Animated.Value(FALSE);
 
-  private interactionHandle: number | undefined;
+  private lastToValue: number | undefined;
 
+  private interactionHandle: number | undefined;
   private pendingGestureCallback: number | undefined;
-
-  private lastToValue: number | undefined;
+  private animationHandle: number | undefined;
 
   private animate = ({
     closing,
@@ -194,7 +194,7 @@ export class Card extends React.Component<Props> {
     closing: boolean;
     velocity?: number;
   }) => {
-    const { transitionSpec, onOpen, onClose, onTransition, gesture } =
+    const { animated, transitionSpec, onOpen, onClose, onTransition, gesture } =
       this.props;
 
     const toValue = this.getAnimateToValue({
@@ -211,36 +211,50 @@ export class Card extends React.Component<Props> {
     const animation =
       spec.animation === 'spring' ? Animated.spring : Animated.timing;
 
-    this.setPointerEventsEnabled(!closing);
-    this.handleStartInteraction();
-
     clearTimeout(this.pendingGestureCallback);
 
+    if (this.animationHandle !== undefined) {
+      cancelAnimationFrame(this.animationHandle);
+    }
+
     onTransition?.({ closing, gesture: velocity !== undefined });
-    animation(gesture, {
-      ...spec.config,
-      velocity,
-      toValue,
-      useNativeDriver,
-      isInteraction: false,
-    }).start(({ finished }) => {
-      this.handleEndInteraction();
-
-      clearTimeout(this.pendingGestureCallback);
-
-      if (finished) {
-        if (closing) {
-          onClose();
-        } else {
-          onOpen();
-        }
 
+    const onFinish = () => {
+      if (closing) {
+        onClose();
+      } else {
+        onOpen();
+      }
+
+      this.animationHandle = requestAnimationFrame(() => {
         if (this.isCurrentlyMounted) {
           // Make sure to re-open screen if it wasn't removed
           this.forceUpdate();
         }
-      }
-    });
+      });
+    };
+
+    if (animated) {
+      this.handleStartInteraction();
+
+      animation(gesture, {
+        ...spec.config,
+        velocity,
+        toValue,
+        useNativeDriver,
+        isInteraction: false,
+      }).start(({ finished }) => {
+        this.handleEndInteraction();
+
+        clearTimeout(this.pendingGestureCallback);
+
+        if (finished) {
+          onFinish();
+        }
+      });
+    } else {
+      onFinish();
+    }
   };
 
   private getAnimateToValue = ({
@@ -267,12 +281,6 @@ export class Card extends React.Component<Props> {
     );
   };
 
-  private setPointerEventsEnabled = (enabled: boolean) => {
-    const pointerEvents = enabled ? 'box-none' : 'none';
-
-    this.ref.current?.setPointerEvents(pointerEvents);
-  };
-
   private handleStartInteraction = () => {
     if (this.interactionHandle === undefined) {
       this.interactionHandle = InteractionManager.createInteractionHandle();
@@ -462,8 +470,6 @@ export class Card extends React.Component<Props> {
     }
   }
 
-  private ref = React.createRef<CardSheetRef>();
-
   render() {
     const {
       styleInterpolator,
@@ -482,20 +488,6 @@ export class Card extends React.Component<Props> {
       children,
       containerStyle: customContainerStyle,
       contentStyle,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      closing,
-      direction,
-      gestureResponseDistance,
-      gestureVelocityImpact,
-      onClose,
-      onGestureBegin,
-      onGestureCanceled,
-      onGestureEnd,
-      onOpen,
-      onTransition,
-      transitionSpec,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
     } = this.props;
 
     const interpolationProps = this.getCardAnimation(
@@ -540,72 +532,65 @@ export class Card extends React.Component<Props> {
 
     return (
       <CardAnimationContext.Provider value={interpolationProps}>
+        {Platform.OS !== 'web' ? (
+          <Animated.View
+            style={{
+              // This is a dummy style that doesn't actually change anything visually.
+              // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
+              // If we disable animations and hide header, it could end up making the value unused.
+              // So we have this dummy style that will always be used regardless of what else changed.
+              opacity: current,
+            }}
+            // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
+            collapsable={false}
+          />
+        ) : null}
+        {overlayEnabled ? (
+          <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+            {overlay({ style: overlayStyle })}
+          </View>
+        ) : null}
         <Animated.View
-          style={{
-            // This is a dummy style that doesn't actually change anything visually.
-            // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
-            // If we disable animations and hide header, it could end up making the value unused.
-            // So we have this dummy style that will always be used regardless of what else changed.
-            opacity: current,
-          }}
-          // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
-          collapsable={false}
-        />
-        <View
+          style={[styles.container, containerStyle, customContainerStyle]}
           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 })}
-            </View>
-          ) : null}
-          <Animated.View
-            style={[styles.container, containerStyle, customContainerStyle]}
-            pointerEvents="box-none"
+          <PanGestureHandler
+            enabled={layout.width !== 0 && gestureEnabled}
+            onGestureEvent={handleGestureEvent}
+            onHandlerStateChange={this.handleGestureStateChange}
+            {...this.gestureActivationCriteria()}
           >
-            <PanGestureHandler
-              enabled={layout.width !== 0 && gestureEnabled}
-              onGestureEvent={handleGestureEvent}
-              onHandlerStateChange={this.handleGestureStateChange}
-              {...this.gestureActivationCriteria()}
+            <Animated.View
+              needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
+              style={[styles.container, cardStyle]}
             >
-              <Animated.View
-                needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
-                style={[styles.container, cardStyle]}
+              {shadowEnabled && shadowStyle && !isTransparent ? (
+                <Animated.View
+                  style={[
+                    styles.shadow,
+                    gestureDirection === 'horizontal'
+                      ? [styles.shadowHorizontal, styles.shadowStart]
+                      : gestureDirection === 'horizontal-inverted'
+                        ? [styles.shadowHorizontal, styles.shadowEnd]
+                        : gestureDirection === 'vertical'
+                          ? [styles.shadowVertical, styles.shadowTop]
+                          : [styles.shadowVertical, styles.shadowBottom],
+                    { backgroundColor },
+                    shadowStyle,
+                  ]}
+                  pointerEvents="none"
+                />
+              ) : null}
+              <CardContent
+                enabled={pageOverflowEnabled}
+                layout={layout}
+                style={contentStyle}
               >
-                {shadowEnabled && shadowStyle && !isTransparent ? (
-                  <Animated.View
-                    style={[
-                      styles.shadow,
-                      gestureDirection === 'horizontal'
-                        ? [styles.shadowHorizontal, styles.shadowStart]
-                        : gestureDirection === 'horizontal-inverted'
-                          ? [styles.shadowHorizontal, styles.shadowEnd]
-                          : gestureDirection === 'vertical'
-                            ? [styles.shadowVertical, styles.shadowTop]
-                            : [styles.shadowVertical, styles.shadowBottom],
-                      { backgroundColor },
-                      shadowStyle,
-                    ]}
-                    pointerEvents="none"
-                  />
-                ) : null}
-                <CardSheet
-                  ref={this.ref}
-                  enabled={pageOverflowEnabled}
-                  layout={layout}
-                  style={contentStyle}
-                >
-                  {children}
-                </CardSheet>
-              </Animated.View>
-            </PanGestureHandler>
-          </Animated.View>
-        </View>
+                {children}
+              </CardContent>
+            </Animated.View>
+          </PanGestureHandler>
+        </Animated.View>
       </CardAnimationContext.Provider>
     );
   }

package/src/views/Stack/CardA11yWrapper.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+
+type Props = {
+  focused: boolean;
+  active: boolean;
+  animated: boolean;
+  isNextScreenTransparent: boolean;
+  detachCurrentScreen: boolean;
+  children: React.ReactNode;
+};
+
+export type CardA11yWrapperRef = { setInert: (value: boolean) => void };
+
+export const CardA11yWrapper = React.forwardRef(
+  (
+    {
+      focused,
+      active,
+      animated,
+      isNextScreenTransparent,
+      detachCurrentScreen,
+      children,
+    }: Props,
+    ref: React.Ref<CardA11yWrapperRef>
+  ) => {
+    // Manage this in separate component to avoid re-rendering card during gestures
+    // Otherwise the gesture animation will be interrupted as state hasn't updated yet
+    const [inert, setInert] = React.useState(false);
+
+    React.useImperativeHandle(ref, () => ({ setInert }), []);
+
+    const isHidden =
+      !animated &&
+      isNextScreenTransparent === false &&
+      detachCurrentScreen !== false &&
+      !focused;
+
+    return (
+      <View
+        aria-hidden={!focused}
+        pointerEvents={(animated ? inert : !focused) ? 'none' : 'box-none'}
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          // This is necessary to avoid unfocused larger pages increasing scroll area
+          // The issue can be seen on the web when a smaller screen is pushed over a larger one
+          overflow: active ? undefined : 'hidden',
+          // We use visibility on web
+          display: Platform.OS !== 'web' && isHidden ? 'none' : 'flex',
+          // Hide unfocused screens when animation isn't enabled
+          // This is also necessary for a11y on web
+          // @ts-expect-error visibility is only available on web
+          visibility: isHidden ? 'hidden' : 'visible',
+        }}
+        // 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.
+        // `Container` has `collapsable={false}` by default so we don't need to set it here.
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+CardA11yWrapper.displayName = 'CardA11yWrapper';

package/src/views/Stack/CardContainer.tsx

@@ -18,6 +18,7 @@ import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { useKeyboardManager } from '../../utils/useKeyboardManager';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { Card } from './Card';
+import { CardA11yWrapper, type CardA11yWrapperRef } from './CardA11yWrapper';
 
 type Props = {
   interpolationIndex: number;
@@ -94,6 +95,8 @@ function CardContainerInner({
   safeAreaInsetTop,
   scene,
 }: Props) {
+  const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
+
   const { direction } = useLocale();
 
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
@@ -150,6 +153,8 @@ function CardContainerInner({
     closing: boolean;
     gesture: boolean;
   }) => {
+    wrapperRef.current?.setInert(closing);
+
     const { route } = scene.descriptor;
 
     if (!gesture) {
@@ -172,14 +177,10 @@ function CardContainerInner({
 
   const { colors } = useTheme();
 
-  const [pointerEvents, setPointerEvents] = React.useState<'box-none' | 'none'>(
-    'box-none'
-  );
-
   React.useEffect(() => {
     const listener = scene.progress.next?.addListener?.(
       ({ value }: { value: number }) => {
-        setPointerEvents(value <= EPSILON ? 'box-none' : 'none');
+        wrapperRef.current?.setInert(value > EPSILON);
       }
     );
 
@@ -188,7 +189,7 @@ function CardContainerInner({
         scene.progress.next?.removeListener?.(listener);
       }
     };
-  }, [pointerEvents, scene.progress.next]);
+  }, [scene.progress.next]);
 
   const {
     presentation,
@@ -232,101 +233,94 @@ function CardContainerInner({
     return undefined;
   }, [canGoBack, backTitle, href]);
 
+  const animated = animation !== 'none';
+
   return (
-    <Card
-      interpolationIndex={interpolationIndex}
-      gestureDirection={gestureDirection}
-      layout={layout}
-      insets={insets}
-      direction={direction}
-      gesture={gesture}
-      current={scene.progress.current}
-      next={scene.progress.next}
-      opening={opening}
-      closing={closing}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      overlay={cardOverlay}
-      overlayEnabled={cardOverlayEnabled}
-      shadowEnabled={cardShadowEnabled}
-      onTransition={handleTransition}
-      onGestureBegin={handleGestureBegin}
-      onGestureCanceled={handleGestureCanceled}
-      onGestureEnd={handleGestureEnd}
-      gestureEnabled={index === 0 ? false : gestureEnabled}
-      gestureResponseDistance={gestureResponseDistance}
-      gestureVelocityImpact={gestureVelocityImpact}
-      transitionSpec={transitionSpec}
-      styleInterpolator={cardStyleInterpolator}
-      aria-hidden={!focused}
-      pointerEvents={active ? 'box-none' : pointerEvents}
-      pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-      preloaded={preloaded}
-      containerStyle={
-        hasAbsoluteFloatHeader && headerMode !== 'screen'
-          ? { marginTop: headerHeight }
-          : null
-      }
-      contentStyle={[
-        {
-          backgroundColor:
-            presentation === 'transparentModal'
-              ? 'transparent'
-              : colors.background,
-        },
-        cardStyle,
-      ]}
-      style={[
-        {
-          // This is necessary to avoid unfocused larger pages increasing scroll area
-          // The issue can be seen on the web when a smaller screen is pushed over a larger one
-          overflow: active ? undefined : 'hidden',
-          display:
-            // Hide unfocused screens when animation isn't enabled
-            // This is also necessary for a11y on web
-            animation === 'none' &&
-            isNextScreenTransparent === false &&
-            detachCurrentScreen !== false &&
-            !focused
-              ? 'none'
-              : 'flex',
-        },
-        StyleSheet.absoluteFill,
-      ]}
+    <CardA11yWrapper
+      ref={wrapperRef}
+      focused={focused}
+      active={active}
+      animated={animated}
+      isNextScreenTransparent={isNextScreenTransparent}
+      detachCurrentScreen={detachCurrentScreen}
     >
-      <View style={styles.container}>
-        <ModalPresentationContext.Provider value={modal}>
-          {headerMode !== 'float'
-            ? renderHeader({
-                mode: 'screen',
-                layout,
-                scenes: [previousScene, scene],
-                getPreviousScene,
-                getFocusedRoute,
-                onContentHeightChange: onHeaderHeightChange,
-                style: styles.header,
-              })
-            : null}
-          <View style={styles.scene}>
-            <HeaderBackContext.Provider value={headerBack}>
-              <HeaderShownContext.Provider
-                value={isParentHeaderShown || headerShown !== false}
-              >
-                <HeaderHeightContext.Provider
-                  value={
-                    headerShown !== false
-                      ? headerHeight
-                      : (parentHeaderHeight ?? 0)
-                  }
+      <Card
+        animated={animated}
+        interpolationIndex={interpolationIndex}
+        gestureDirection={gestureDirection}
+        layout={layout}
+        insets={insets}
+        direction={direction}
+        gesture={gesture}
+        current={scene.progress.current}
+        next={scene.progress.next}
+        opening={opening}
+        closing={closing}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        overlay={cardOverlay}
+        overlayEnabled={cardOverlayEnabled}
+        shadowEnabled={cardShadowEnabled}
+        onTransition={handleTransition}
+        onGestureBegin={handleGestureBegin}
+        onGestureCanceled={handleGestureCanceled}
+        onGestureEnd={handleGestureEnd}
+        gestureEnabled={index === 0 ? false : gestureEnabled}
+        gestureResponseDistance={gestureResponseDistance}
+        gestureVelocityImpact={gestureVelocityImpact}
+        transitionSpec={transitionSpec}
+        styleInterpolator={cardStyleInterpolator}
+        pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
+        preloaded={preloaded}
+        containerStyle={
+          hasAbsoluteFloatHeader && headerMode !== 'screen'
+            ? { marginTop: headerHeight }
+            : null
+        }
+        contentStyle={[
+          {
+            backgroundColor:
+              presentation === 'transparentModal'
+                ? 'transparent'
+                : colors.background,
+          },
+          cardStyle,
+        ]}
+      >
+        <View style={styles.container}>
+          <ModalPresentationContext.Provider value={modal}>
+            {headerMode !== 'float'
+              ? renderHeader({
+                  mode: 'screen',
+                  layout,
+                  scenes: [previousScene, scene],
+                  getPreviousScene,
+                  getFocusedRoute,
+                  onContentHeightChange: onHeaderHeightChange,
+                  style: styles.header,
+                })
+              : null}
+            <View style={styles.scene}>
+              <HeaderBackContext.Provider value={headerBack}>
+                <HeaderShownContext.Provider
+                  value={isParentHeaderShown || headerShown !== false}
                 >
-                  {scene.descriptor.render()}
-                </HeaderHeightContext.Provider>
-              </HeaderShownContext.Provider>
-            </HeaderBackContext.Provider>
-          </View>
-        </ModalPresentationContext.Provider>
-      </View>
-    </Card>
+                  <HeaderHeightContext.Provider
+                    value={
+                      headerShown !== false
+                        ? headerHeight
+                        : (parentHeaderHeight ?? 0)
+                    }
+                  >
+                    {scene.descriptor.render()}
+                  </HeaderHeightContext.Provider>
+                </HeaderShownContext.Provider>
+              </HeaderBackContext.Provider>
+            </View>
+          </ModalPresentationContext.Provider>
+        </View>
+      </Card>
+    </CardA11yWrapper>
   );
 }
 

package/src/views/Stack/CardContent.tsx

@@ -0,0 +1,92 @@
+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;
+};
+
+// 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 function CardContent({ enabled, layout, style, ...rest }: Props) {
+  const [fill, setFill] = React.useState(false);
+
+  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="box-none"
+      style={[enabled && fill ? styles.page : styles.card, style]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  page: {
+    minHeight: '100%',
+  },
+  card: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});