@react-navigation/stack 8.0.0-alpha.30 → 8.0.0-alpha.32

package/src/views/Stack/CardStack.tsx

@@ -48,13 +48,18 @@ import type {
 } from '../../types';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type {
+  HeaderHeight,
+  Props as HeaderContainerProps,
+} from '../Header/HeaderContainer';
 import { CardContainer } from './CardContainer';
 
 type GestureValues = {
   [key: string]: Animated.Value;
 };
 
+type HeaderHeights = Record<string, HeaderHeight>;
+
 type Props = {
   direction: LocaleDirection;
   insets: EdgeInsets;
@@ -89,7 +94,7 @@ type State = {
   scenes: Scene[];
   gestures: GestureValues;
   layout: Layout;
-  headerHeights: Record<string, number>;
+  headerHeights: HeaderHeights;
 };
 
 const NAMED_TRANSITIONS_PRESETS = {
@@ -110,6 +115,8 @@ const NAMED_TRANSITIONS_PRESETS = {
 
 const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
 
+const HIDDEN_HEADER_HEIGHT = { measured: false, value: 0 };
+
 const getInterpolationIndex = (scenes: Scene[], index: number) => {
   const { cardStyleInterpolator } = scenes[index].descriptor.options;
 
@@ -162,9 +169,9 @@ const getHeaderHeights = (
   isParentHeaderShown: boolean,
   isParentModal: boolean,
   layout: Layout,
-  previous: Record<string, number>
+  previous: HeaderHeights
 ) => {
-  return scenes.reduce<Record<string, number>>((acc, curr, index) => {
+  return scenes.reduce<HeaderHeights>((acc, curr, index) => {
     const {
       headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
       headerStyle,
@@ -175,19 +182,34 @@ const getHeaderHeights = (
     const height =
       'height' in style && typeof style.height === 'number'
         ? style.height
-        : previous[curr.route.key];
+        : undefined;
 
     const interpolationIndex = getInterpolationIndex(scenes, index);
     const isModal = getIsModal(curr, interpolationIndex, isParentModal);
 
-    acc[curr.route.key] =
-      typeof height === 'number'
-        ? height
-        : getDefaultHeaderHeight({
-            landscape: layout.width > layout.height,
-            modalPresentation: isModal,
-            topInset: headerStatusBarHeight,
-          });
+    if (typeof height === 'number') {
+      acc[curr.route.key] = { measured: true, value: height };
+    } else {
+      const previousHeight = previous[curr.route.key];
+      const defaultHeight = getDefaultHeaderHeight({
+        landscape: layout.width > layout.height,
+        modalPresentation: isModal,
+        topInset: headerStatusBarHeight,
+      });
+
+      // If we hadn't measured before, use re-computed default height
+      if (
+        !previousHeight?.measured &&
+        defaultHeight !== previousHeight?.value
+      ) {
+        acc[curr.route.key] = {
+          measured: false,
+          value: defaultHeight,
+        };
+      } else if (previousHeight) {
+        acc[curr.route.key] = previousHeight;
+      }
+    }
 
     return acc;
   }, {});
@@ -541,14 +563,17 @@ export class CardStack extends React.Component<Props, State> {
     this.setState(({ headerHeights }) => {
       const previousHeight = headerHeights[route.key];
 
-      if (previousHeight === height) {
+      if (previousHeight?.value === height) {
         return null;
       }
 
       return {
         headerHeights: {
           ...headerHeights,
-          [route.key]: height,
+          [route.key]: {
+            measured: true,
+            value: height,
+          },
         },
       };
     });
@@ -603,7 +628,14 @@ export class CardStack extends React.Component<Props, State> {
 
     const focusedRoute = state.routes[state.index];
 
-    const isFloatHeaderAbsolute = scenes.slice(-2).some((scene) => {
+    // Render only two top-most active headers as a workaround for
+    // https://github.com/react-navigation/react-navigation/issues/12456.
+    // If the header is persisted, it might be placed incorrectly when navigating back
+    const activeHeaderScenes = scenes
+      .filter((scene) => !isInactiveRoute(scene.route, routes))
+      .slice(-2);
+
+    const isFloatHeaderAbsolute = activeHeaderScenes.some((scene) => {
       const options = scene.descriptor.options ?? {};
       const { headerMode, headerTransparent, headerShown = true } = options;
 
@@ -622,11 +654,13 @@ export class CardStack extends React.Component<Props, State> {
       scenes.findLast((scene) => scene.route.key === focusedRoute.key)
         ?.descriptor.options.headerMode === 'float';
 
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
+
     return (
       <View style={styles.container}>
         {renderHeader({
           mode: 'float',
-          scenes,
+          scenes: activeHeaderScenes,
           getPreviousScene: this.getPreviousScene,
           getFocusedRoute: this.getFocusedRoute,
           contentHeight: headerHeights[focusedRoute.key],
@@ -637,7 +671,7 @@ export class CardStack extends React.Component<Props, State> {
               // The header title can't be found with maestro without this
               // In some cases, header buttons may not be touchable as well
               isFloatHeaderFocused && {
-                height: headerHeights[focusedRoute.key],
+                height: focusedHeaderHeight?.value,
               },
             ],
           ],
@@ -647,12 +681,12 @@ export class CardStack extends React.Component<Props, State> {
             const focused = focusedRoute.key === route.key;
             const gesture = gestures[route.key];
             const scene = scenes[index];
-            const isInactive = isInactiveRoute(route, this.props.routes);
 
             const {
               inactiveBehavior = 'pause',
               animation,
               headerShown = true,
+              headerMode,
               headerTransparent,
             } = scene.descriptor.options;
 
@@ -662,7 +696,9 @@ export class CardStack extends React.Component<Props, State> {
             const safeAreaInsetLeft = insets.left;
 
             const headerHeight =
-              headerShown !== false ? headerHeights[route.key] : 0;
+              headerShown !== false
+                ? headerHeights[route.key]
+                : HIDDEN_HEADER_HEIGHT;
 
             // Start from current card and count backwards the number of cards with same interpolation
             const interpolationIndex = getInterpolationIndex(scenes, index);
@@ -696,25 +732,36 @@ export class CardStack extends React.Component<Props, State> {
                 self[index + 1]?.key
               );
 
+            const isInactive = isInactiveRoute(route, this.props.routes);
+            const isRetained = state.retainedRouteKeys?.includes(route.key);
+            const isPreloaded = isInactive && !isRetained;
+
+            const isTopmost = index === routes.length - 1;
             const isBeforeLast = index === routes.length - 2;
 
             // Keep animating and the last two rendered routes visible for smoother transitions
             const isVisible =
               focused ||
               isNextScreenTransparent ||
+              // React native destroys the view when hidden
+              // So we keep retained screens visible
+              // This makes sure any videos being played don't stop etc.
+              isRetained ||
               // We only need to keep other screens visible when animation is enabled
               (isAnimationEnabled &&
                 (isFocusing ||
                   isRemoving ||
-                  // Preloaded and retained screens should stay mounted, but remain hidden until focused
-                  (!isInactive && index >= routes.length - 2)));
+                  // Preloaded screens should stay mounted, but remain hidden until focused
+                  (!isPreloaded && index >= routes.length - 2)));
 
             const activityMode = // Render focused and animating screens normally
               focused || isFocusing
                 ? 'normal'
                 : inactiveBehavior === 'none' ||
                     // Unpause preloaded or retained screens so updates are visible
+                    // Handle retained explicitly as isInactive won't be updated until animation end
                     isInactive ||
+                    isRetained ||
                     // Keep the screen before transparent screen active
                     // This lets the screen under the transparent screen update and animate
                     isNextScreenTransparent ||
@@ -736,49 +783,62 @@ export class CardStack extends React.Component<Props, State> {
             }
 
             return (
-              <CardContainer
+              <ActivityView
                 key={route.key}
-                index={index}
-                interpolationIndex={interpolationIndex}
-                modal={isModal}
-                active={index === routes.length - 1}
-                focused={focused}
-                opening={openingRouteKeys.includes(route.key)}
-                closing={closingRouteKeys.includes(route.key)}
-                layout={layout}
-                gesture={gesture}
-                scene={scene}
-                safeAreaInsetTop={safeAreaInsetTop}
-                safeAreaInsetRight={safeAreaInsetRight}
-                safeAreaInsetBottom={safeAreaInsetBottom}
-                safeAreaInsetLeft={safeAreaInsetLeft}
-                onGestureStart={onGestureStart}
-                onGestureCancel={onGestureCancel}
-                onGestureEnd={onGestureEnd}
-                headerHeight={headerHeight}
-                isParentHeaderShown={isParentHeaderShown}
-                onHeaderHeightChange={this.handleHeaderLayout}
-                getPreviousScene={this.getPreviousScene}
-                getFocusedRoute={this.getFocusedRoute}
-                hasAbsoluteFloatHeader={
-                  isFloatHeaderAbsolute && !headerTransparent
-                }
-                renderHeader={renderHeader}
-                onOpenRoute={onOpenRoute}
-                onCloseRoute={onCloseRoute}
-                onTransitionStart={onTransitionStart}
-                onTransitionEnd={onTransitionEnd}
-                isNextScreenTransparent={isNextScreenTransparent}
-                preloaded={isInactive}
+                mode={activityMode}
+                visible={isVisible}
+                style={{
+                  ...StyleSheet.absoluteFill,
+                  // Avoid unfocused larger pages increasing scroll area
+                  // e.g. when a smaller screen is pushed over a larger one on web
+                  overflow: isTopmost ? undefined : 'hidden',
+                  marginTop:
+                    headerTransparent || headerMode === 'screen'
+                      ? 0
+                      : // Add offset for non-transparent floating header
+                        isFloatHeaderAbsolute
+                        ? // If header is absolute, offset the card by the header height
+                          headerHeight?.value
+                        : // Otherwise, the in-flow float header already takes the
+                          // focused header's space, so offset by the difference
+                          headerHeight && focusedHeaderHeight
+                          ? headerHeight.value - focusedHeaderHeight.value
+                          : 0,
+                }}
               >
-                <ActivityView
-                  mode={activityMode}
-                  visible={isVisible}
-                  style={StyleSheet.absoluteFill}
+                <CardContainer
+                  index={index}
+                  interpolationIndex={interpolationIndex}
+                  modal={isModal}
+                  active={isTopmost}
+                  focused={focused}
+                  opening={openingRouteKeys.includes(route.key)}
+                  closing={closingRouteKeys.includes(route.key)}
+                  layout={layout}
+                  gesture={gesture}
+                  scene={scene}
+                  safeAreaInsetTop={safeAreaInsetTop}
+                  safeAreaInsetRight={safeAreaInsetRight}
+                  safeAreaInsetBottom={safeAreaInsetBottom}
+                  safeAreaInsetLeft={safeAreaInsetLeft}
+                  onGestureStart={onGestureStart}
+                  onGestureCancel={onGestureCancel}
+                  onGestureEnd={onGestureEnd}
+                  headerHeight={headerHeight}
+                  isParentHeaderShown={isParentHeaderShown}
+                  onHeaderHeightChange={this.handleHeaderLayout}
+                  getPreviousScene={this.getPreviousScene}
+                  getFocusedRoute={this.getFocusedRoute}
+                  renderHeader={renderHeader}
+                  onOpenRoute={onOpenRoute}
+                  onCloseRoute={onCloseRoute}
+                  onTransitionStart={onTransitionStart}
+                  onTransitionEnd={onTransitionEnd}
+                  preloaded={isInactive}
                 >
                   {scene.descriptor.render()}
-                </ActivityView>
-              </CardContainer>
+                </CardContainer>
+              </ActivityView>
             );
           })}
         </View>

package/lib/module/views/Stack/CardA11yWrapper.js

@@ -1,42 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function CardA11yWrapper({
-  focused,
-  active,
-  animated,
-  isNextScreenTransparent,
-  children,
-  ref
-}) {
-  // 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 && !focused;
-  return /*#__PURE__*/_jsx(View, {
-    "aria-hidden": !focused,
-    style: [StyleSheet.absoluteFill, {
-      pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
-      // 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: children
-  });
-}
-//# sourceMappingURL=CardA11yWrapper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["React","Platform","StyleSheet","View","jsx","_jsx","CardA11yWrapper","focused","active","animated","isNextScreenTransparent","children","ref","inert","setInert","useState","useImperativeHandle","isHidden","style","absoluteFill","pointerEvents","overflow","undefined","display","OS","visibility","collapsable"],"sourceRoot":"../../../../src","sources":["views/Stack/CardA11yWrapper.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAa1D,OAAO,SAASC,eAAeA,CAAC;EAC9BC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,uBAAuB;EACvBC,QAAQ;EACRC;AACK,CAAC,EAAE;EACR;EACA;EACA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,KAAK,CAAC;EAE/Cf,KAAK,CAACgB,mBAAmB,CAACJ,GAAG,EAAE,OAAO;IAAEE;EAAS,CAAC,CAAC,EAAE,EAAE,CAAC;EAExD,MAAMG,QAAQ,GAAG,CAACR,QAAQ,IAAIC,uBAAuB,KAAK,KAAK,IAAI,CAACH,OAAO;EAE3E,oBACEF,IAAA,CAACF,IAAI;IACH,eAAa,CAACI,OAAQ;IACtBW,KAAK,EAAE,CACLhB,UAAU,CAACiB,YAAY,EACvB;MACEC,aAAa,EAAE,CAACX,QAAQ,GAAGI,KAAK,GAAG,CAACN,OAAO,IAAI,MAAM,GAAG,UAAU;MAClE;MACA;MACAc,QAAQ,EAAEb,MAAM,GAAGc,SAAS,GAAG,QAAQ;MACvC;MACAC,OAAO,EAAEtB,QAAQ,CAACuB,EAAE,KAAK,KAAK,IAAIP,QAAQ,GAAG,MAAM,GAAG,MAAM;MAC5D;MACA;MACA;MACAQ,UAAU,EAAER,QAAQ,GAAG,QAAQ,GAAG;IACpC,CAAC;IAEH;IACA;IAAA;IACAS,WAAW,EAAE,KAAM;IAAAf,QAAA,EAElBA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}

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

@@ -1,15 +0,0 @@
-import * as React from 'react';
-type Props = {
-    focused: boolean;
-    active: boolean;
-    animated: boolean;
-    isNextScreenTransparent: boolean;
-    children: React.ReactNode;
-    ref?: React.Ref<CardA11yWrapperRef>;
-};
-export type CardA11yWrapperRef = {
-    setInert: (value: boolean) => void;
-};
-export declare function CardA11yWrapper({ focused, active, animated, isNextScreenTransparent, children, ref, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=CardA11yWrapper.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CardA11yWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/CardA11yWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AAExE,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,uBAAuB,EACvB,QAAQ,EACR,GAAG,GACJ,EAAE,KAAK,2CAkCP"}

package/src/views/Stack/CardA11yWrapper.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-type Props = {
-  focused: boolean;
-  active: boolean;
-  animated: boolean;
-  isNextScreenTransparent: boolean;
-  children: React.ReactNode;
-  ref?: React.Ref<CardA11yWrapperRef>;
-};
-
-export type CardA11yWrapperRef = { setInert: (value: boolean) => void };
-
-export function CardA11yWrapper({
-  focused,
-  active,
-  animated,
-  isNextScreenTransparent,
-  children,
-  ref,
-}: Props) {
-  // 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 && !focused;
-
-  return (
-    <View
-      aria-hidden={!focused}
-      style={[
-        StyleSheet.absoluteFill,
-        {
-          pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
-          // 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>
-  );
-}