@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

package/src/views/Stack/CardContainer.tsx

@@ -16,9 +16,11 @@ import { Animated, StyleSheet, View } from 'react-native';
 import type { Layout, Scene } from '../../types';
 import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { useKeyboardManager } from '../../utils/useKeyboardManager';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type {
+  HeaderHeight,
+  Props as HeaderContainerProps,
+} from '../Header/HeaderContainer';
 import { Card } from './Card';
-import { CardA11yWrapper, type CardA11yWrapperRef } from './CardA11yWrapper';
 
 type Props = {
   interpolationIndex: number;
@@ -27,6 +29,8 @@ type Props = {
   focused: boolean;
   opening: boolean;
   closing: boolean;
+  closingAnimated: Animated.Value;
+  nextClosingAnimated: Animated.Value | undefined;
   modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
@@ -49,36 +53,31 @@ type Props = {
   onGestureStart: (props: { route: Route<string> }) => void;
   onGestureEnd: (props: { route: Route<string> }) => void;
   onGestureCancel: (props: { route: Route<string> }) => void;
-  hasAbsoluteFloatHeader: boolean;
-  headerHeight: number;
+  headerHeight: HeaderHeight | undefined;
   onHeaderHeightChange: (props: {
     route: Route<string>;
     height: number;
   }) => void;
   isParentHeaderShown: boolean;
-  isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
+  children: React.ReactNode;
 };
 
-const EPSILON = 0.1;
-
 function CardContainerInner({
   interpolationIndex,
   index,
   active,
   opening,
   closing,
+  closingAnimated,
+  nextClosingAnimated,
   gesture,
   focused,
   modal,
   getPreviousScene,
   getFocusedRoute,
-  hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
   isParentHeaderShown,
-  isNextScreenTransparent,
-  detachCurrentScreen,
   layout,
   onCloseRoute,
   onOpenRoute,
@@ -94,23 +93,22 @@ function CardContainerInner({
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
+  children,
 }: Props) {
-  const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
-
   const { direction } = useLocale();
 
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
 
-  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager(
-      React.useCallback(() => {
-        const { options, navigation } = scene.descriptor;
+  const { options } = scene.descriptor;
+  const enabled = options.keyboardHandlingEnabled !== false;
+  const contentRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false
-        );
-      }, [scene.descriptor])
-    );
+  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
+    useKeyboardManager({
+      enabled,
+      focused,
+      contentRef,
+    });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -153,17 +151,9 @@ function CardContainerInner({
     closing: boolean;
     gesture: boolean;
   }) => {
-    wrapperRef.current?.setInert(closing);
-
     const { route } = scene.descriptor;
 
-    if (!gesture) {
-      onPageChangeConfirm?.(true);
-    } else if (active && closing) {
-      onPageChangeConfirm?.(false);
-    } else {
-      onPageChangeCancel?.();
-    }
+    onPageChangeConfirm?.({ gesture, active, closing });
 
     onTransitionStart?.({ route }, closing);
   };
@@ -177,20 +167,6 @@ function CardContainerInner({
 
   const { colors } = useTheme();
 
-  React.useEffect(() => {
-    const listener = scene.progress.next?.addListener?.(
-      ({ value }: { value: number }) => {
-        wrapperRef.current?.setInert(value > EPSILON);
-      }
-    );
-
-    return () => {
-      if (listener) {
-        scene.progress.next?.removeListener?.(listener);
-      }
-    };
-  }, [scene.progress.next]);
-
   const {
     presentation,
     animation,
@@ -235,91 +211,99 @@ function CardContainerInner({
 
   const animated = animation !== 'none';
 
+  const { current, next } = React.useMemo(
+    () => ({
+      current: { progress: scene.progress.current, closing: closingAnimated },
+      next:
+        scene.progress.next && nextClosingAnimated
+          ? { progress: scene.progress.next, closing: nextClosingAnimated }
+          : undefined,
+    }),
+    [closingAnimated, nextClosingAnimated, scene.progress]
+  );
+
   return (
-    <CardA11yWrapper
-      ref={wrapperRef}
-      focused={focused}
-      active={active}
+    <Card
       animated={animated}
-      isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
+      interpolationIndex={interpolationIndex}
+      gestureDirection={gestureDirection}
+      layout={layout}
+      insets={insets}
+      direction={direction}
+      gesture={gesture}
+      current={current}
+      next={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={
+        // Avoid unfocused larger pages increasing scroll area
+        // e.g. when a smaller screen is pushed over a larger one on web
+        active &&
+        // Float header disables full-page scrolling in browsers
+        // So we don't need to keep overflow enabled
+        headerMode !== 'float' &&
+        // Avoid modals scrolling the whole page
+        // Modal content should be scrollable within the modal
+        presentation !== 'modal'
+      }
+      preloaded={preloaded}
+      contentStyle={[
+        {
+          backgroundColor:
+            presentation === 'transparentModal'
+              ? 'transparent'
+              : colors.background,
+        },
+        cardStyle,
+      ]}
     >
-      <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',
-                  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}
+      <View ref={contentRef} style={styles.container}>
+        <ModalPresentationContext.Provider value={modal}>
+          {headerMode !== 'float'
+            ? renderHeader({
+                mode: 'screen',
+                scenes: [previousScene, scene],
+                getPreviousScene,
+                getFocusedRoute,
+                contentHeight: headerHeight,
+                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?.value ?? 0)
+                      : (parentHeaderHeight ?? 0)
+                  }
                 >
-                  <HeaderHeightContext.Provider
-                    value={
-                      headerShown !== false
-                        ? headerHeight
-                        : (parentHeaderHeight ?? 0)
-                    }
-                  >
-                    {scene.descriptor.render()}
-                  </HeaderHeightContext.Provider>
-                </HeaderShownContext.Provider>
-              </HeaderBackContext.Provider>
-            </View>
-          </ModalPresentationContext.Provider>
-        </View>
-      </Card>
-    </CardA11yWrapper>
+                  {children}
+                </HeaderHeightContext.Provider>
+              </HeaderShownContext.Provider>
+            </HeaderBackContext.Provider>
+          </View>
+        </ModalPresentationContext.Provider>
+      </View>
+    </Card>
   );
 }
 

package/src/views/Stack/CardContent.tsx

@@ -7,14 +7,14 @@ type Props = ViewProps & {
   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) {
+  // If the container fills the body, we consider it to be a "page" that can overflow the screen
+  // So we adjust the style accordingly to let the content take more space if needed
+  // This lets the document.body handle scrolling of the content
+  // This is necessary for mobile browsers to be able to hide the address bar on scroll
   const [fill, setFill] = React.useState(false);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (typeof document === 'undefined' || !document.body) {
       // Only run when DOM is available
       return;
@@ -23,53 +23,15 @@ export function CardContent({ enabled, layout, style, ...rest }: Props) {
     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';
+    // `document.body.clientHeight`/`clientWidth` are always rounded integers,
+    // But `layout` is sub-pixel precise, so we allow a small difference.
+    const approximatelyEqual = (a: number, b: number) => Math.abs(a - b) < 1;
 
-    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;
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-layout-effect
+    setFill(
+      approximatelyEqual(width, layout.width) &&
+        approximatelyEqual(height, layout.height)
+    );
   }, [layout.height, layout.width]);
 
   return (