@amazon-devices/react-navigation__stack 7.0.9000000000 → 8.0.9000000000-rn-83

package/src/views/Stack/CardA11yWrapper.tsx

@@ -0,0 +1,67 @@
+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.absoluteFill,
+          {
+            // 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.
+        collapsable={false}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+CardA11yWrapper.displayName = 'CardA11yWrapper';

package/src/views/Stack/CardContainer.tsx

@@ -4,27 +4,34 @@ import {
   HeaderHeightContext,
   HeaderShownContext,
 } from '@amazon-devices/react-navigation__elements';
-import { Route, useTheme } from '@amazon-devices/react-navigation__native';
+import {
+  type Route,
+  useLinkBuilder,
+  useLocale,
+  useTheme,
+} from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
 
 import type { Layout, Scene } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
-import useKeyboardManager from '../../utils/useKeyboardManager';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { useKeyboardManager } from '../../utils/useKeyboardManager';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import Card from './Card';
+import { Card } from './Card';
+import { CardA11yWrapper, type CardA11yWrapperRef } from './CardA11yWrapper';
 
 type Props = {
   interpolationIndex: number;
   index: number;
   active: boolean;
   focused: boolean;
+  opening: boolean;
   closing: boolean;
   modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
+  preloaded: boolean;
   scene: Scene;
-  headerDarkContent: boolean | undefined;
   safeAreaInsetTop: number;
   safeAreaInsetRight: number;
   safeAreaInsetBottom: number;
@@ -32,7 +39,6 @@ type Props = {
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route<string> }) => React.ReactNode;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   onTransitionStart: (
@@ -56,17 +62,17 @@ type Props = {
 
 const EPSILON = 0.1;
 
-function CardContainer({
+function CardContainerInner({
   interpolationIndex,
   index,
   active,
+  opening,
   closing,
   gesture,
   focused,
   modal,
   getPreviousScene,
   getFocusedRoute,
-  headerDarkContent,
   hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
@@ -81,14 +87,18 @@ function CardContainer({
   onGestureStart,
   onTransitionEnd,
   onTransitionStart,
+  preloaded,
   renderHeader,
-  renderScene,
   safeAreaInsetBottom,
   safeAreaInsetLeft,
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
 }: Props) {
+  const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
+
+  const { direction } = useLocale();
+
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
@@ -143,6 +153,8 @@ function CardContainer({
     closing: boolean;
     gesture: boolean;
   }) => {
+    wrapperRef.current?.setInert(closing);
+
     const { route } = scene.descriptor;
 
     if (!gesture) {
@@ -165,14 +177,10 @@ function CardContainer({
 
   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);
       }
     );
 
@@ -181,11 +189,11 @@ function CardContainer({
         scene.progress.next?.removeListener?.(listener);
       }
     };
-  }, [pointerEvents, scene.progress.next]);
+  }, [scene.progress.next]);
 
   const {
     presentation,
-    animationEnabled,
+    animation,
     cardOverlay,
     cardOverlayEnabled,
     cardShadowEnabled,
@@ -200,119 +208,130 @@ function CardContainer({
     transitionSpec,
   } = scene.descriptor.options;
 
+  const { buildHref } = useLinkBuilder();
   const previousScene = getPreviousScene({ route: scene.descriptor.route });
 
   let backTitle: string | undefined;
+  let href: string | undefined;
 
   if (previousScene) {
     const { options, route } = previousScene.descriptor;
 
     backTitle = getHeaderTitle(options, route.name);
+    href = buildHref(route.name, route.params);
   }
 
-  const headerBack = React.useMemo(
-    () => (backTitle !== undefined ? { title: backTitle } : undefined),
-    [backTitle]
-  );
+  const canGoBack = previousScene != null;
+  const headerBack = React.useMemo(() => {
+    if (canGoBack) {
+      return {
+        href,
+        title: backTitle,
+      };
+    }
+
+    return undefined;
+  }, [canGoBack, backTitle, href]);
+
+  const animated = animation !== 'none';
 
   return (
-    <Card
-      interpolationIndex={interpolationIndex}
-      gestureDirection={gestureDirection}
-      layout={layout}
-      insets={insets}
-      gesture={gesture}
-      current={scene.progress.current}
-      next={scene.progress.next}
-      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}
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-      pointerEvents={active ? 'box-none' : pointerEvents}
-      pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-      headerDarkContent={headerDarkContent}
-      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
-            animationEnabled === false &&
-            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}>
-          <View style={styles.scene}>
-            <HeaderBackContext.Provider value={headerBack}>
-              <HeaderShownContext.Provider
-                value={isParentHeaderShown || headerShown !== false}
-              >
-                <HeaderHeightContext.Provider
-                  value={headerShown ? 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}
                 >
-                  {renderScene({ route: scene.descriptor.route })}
-                </HeaderHeightContext.Provider>
-              </HeaderShownContext.Provider>
-            </HeaderBackContext.Provider>
-          </View>
-          {headerMode !== 'float'
-            ? renderHeader({
-                mode: 'screen',
-                layout,
-                scenes: [previousScene, scene],
-                getPreviousScene,
-                getFocusedRoute,
-                onContentHeightChange: onHeaderHeightChange,
-              })
-            : null}
-        </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>
   );
 }
 
-export default React.memo(CardContainer);
+export const CardContainer = React.memo(CardContainerInner);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column-reverse',
+  },
+  header: {
+    zIndex: 1,
   },
   scene: {
     flex: 1,

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',
+  },
+});