@react-navigation/stack 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/views/Stack/StackView.tsx

@@ -35,10 +35,8 @@ type Props = StackNavigationConfig & {
 type State = {
   // Local copy of the routes which are actually rendered
   routes: Route<string>[];
-  // Previous routes, to compare whether routes have changed or not
-  previousRoutes: Route<string>[];
-  // Previous descriptors, to compare whether descriptors have changed or not
-  previousDescriptors: StackDescriptorMap;
+  // Previous navigation state for comparison
+  previousState: StackNavigationState<ParamListBase> | undefined;
   // List of routes being opened, we need to animate pushing of these new routes
   openingRouteKeys: string[];
   // List of routes being closed, we need to animate popping of these routes
@@ -64,33 +62,53 @@ export class StackView extends React.Component<Props, State> {
     props: Readonly<Props>,
     state: Readonly<State>
   ) {
-    const allRoutes = [...props.state.routes, ...props.state.preloadedRoutes];
+    const allRoutes = props.state.routes;
+    const previousRoutes = state.previousState?.routes ?? [];
+    const previousFocusedRoute = state.previousState
+      ? state.previousState.routes[state.previousState.index]
+      : undefined;
+    const nextFocusedRouteFromState = props.state.routes[props.state.index];
+    const activeRoutes = props.state.routes.slice(0, props.state.index + 1);
 
     // If there was no change in routes, we don't need to compute anything
     if (
       isArrayEqual(
         allRoutes.map((r) => r.key),
-        state.previousRoutes.map((r) => r.key)
+        previousRoutes.map((r) => r.key)
       ) &&
+      previousFocusedRoute?.key === nextFocusedRouteFromState?.key &&
       state.routes.length
     ) {
-      let routes = props.state.routes;
-      let previousRoutes = state.previousRoutes;
-      let descriptors = props.descriptors;
-      let previousDescriptors = state.previousDescriptors;
+      // If there were any routes being closed or replaced,
+      // We need to make sure they are preserved in the new state from props.state
+      // So first we get all such routes from the previous state (that included the animating routes)
+      // Then we add them back to the new state if they don't already exist
+
+      const closingRoutes = state.routes.filter(
+        (r) =>
+          state.closingRouteKeys.includes(r.key) &&
+          !activeRoutes.some((pr) => pr.key === r.key)
+      );
 
-      if (props.descriptors !== state.previousDescriptors) {
-        descriptors = state.routes.reduce<StackDescriptorMap>((acc, route) => {
-          acc[route.key] =
-            props.descriptors[route.key] || state.descriptors[route.key];
+      const replacingRoutes = state.routes.filter(
+        (r) =>
+          state.replacingRouteKeys.includes(r.key) &&
+          !activeRoutes.some((pr) => pr.key === r.key)
+      );
 
-          return acc;
-        }, {});
+      let routes: Route<string>[] = activeRoutes.slice();
 
-        previousDescriptors = props.descriptors;
+      // Replacing routes go before the focused route (they're being covered)
+      if (replacingRoutes.length) {
+        routes.splice(routes.length - 1, 0, ...replacingRoutes);
       }
 
-      if (!isArrayEqual(allRoutes, state.previousRoutes)) {
+      // Closing routes go at the end (they're animating out on top)
+      if (closingRoutes.length) {
+        routes.push(...closingRoutes);
+      }
+
+      if (!isArrayEqual(allRoutes, previousRoutes)) {
         // if any route objects have changed, we should update them
         const map = allRoutes.reduce<Record<string, Route<string>>>(
           (acc, route) => {
@@ -100,37 +118,44 @@ export class StackView extends React.Component<Props, State> {
           {}
         );
 
-        routes = props.state.routes.map((route) => map[route.key] || route);
-        previousRoutes = allRoutes;
+        routes = routes.map((route) => map[route.key] || route);
       }
 
+      const routeKeys = new Set(routes.map((route) => route.key));
+      const descriptors = [
+        ...routes,
+        ...props.state.routes.filter((route) => !routeKeys.has(route.key)),
+      ].reduce<StackDescriptorMap>((acc, route) => {
+        acc[route.key] =
+          props.descriptors[route.key] || state.descriptors[route.key];
+
+        return acc;
+      }, {});
+
       return {
         routes,
-        previousRoutes,
+        previousState: props.state,
         descriptors,
-        previousDescriptors,
       };
     }
 
     // Here we determine which routes were added or removed to animate them
     // We keep a copy of the route being removed in local state to be able to animate it
 
-    let routes =
-      props.state.index < props.state.routes.length - 1
-        ? // Remove any extra routes from the state
-          // The last visible route should be the focused route, i.e. at current index
-          props.state.routes.slice(0, props.state.index + 1)
-        : props.state.routes;
+    let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
 
-    // Now we need to determine which routes were added and removed
-    const { previousRoutes } = state;
+    // If a route that was closing or being replaced is now back in the routes,
+    // it was added back before the animation finished, so stop tracking it
+    closingRouteKeys = closingRouteKeys.filter(
+      (key) => !activeRoutes.some((r) => r.key === key)
+    );
 
-    let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
+    replacingRouteKeys = replacingRouteKeys.filter(
+      (key) => !activeRoutes.some((r) => r.key === key)
+    );
 
-    const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
-      | Route<string>
-      | undefined;
-    const nextFocusedRoute = routes[routes.length - 1];
+    // Get previous focused route from previous active routes
+    const nextFocusedRoute = activeRoutes[activeRoutes.length - 1];
 
     const isAnimationEnabled = (key: string) => {
       const descriptor = props.descriptors[key] || state.descriptors[key];
@@ -144,6 +169,8 @@ export class StackView extends React.Component<Props, State> {
       return descriptor.options.animationTypeForReplace ?? 'push';
     };
 
+    let routes = activeRoutes;
+
     if (
       previousFocusedRoute &&
       previousFocusedRoute.key !== nextFocusedRoute.key
@@ -233,6 +260,18 @@ export class StackView extends React.Component<Props, State> {
               // After the push animation is completed, routes being replaced will be removed completely
               routes = routes.slice();
               routes.splice(routes.length - 1, 0, previousFocusedRoute);
+
+              // Preserve any other routes still being replaced from previous transitions
+              const previousReplacingRoutes = state.routes.filter(
+                (r) =>
+                  replacingRouteKeys.includes(r.key) &&
+                  !routes.some((existing) => existing.key === r.key)
+              );
+
+              if (previousReplacingRoutes.length) {
+                // Insert before the route we just added (previousFocusedRoute)
+                routes.splice(routes.length - 2, 0, ...previousReplacingRoutes);
+              }
             }
           }
         }
@@ -257,7 +296,11 @@ export class StackView extends React.Component<Props, State> {
       );
     }
 
-    const descriptors = allRoutes.reduce<StackDescriptorMap>((acc, route) => {
+    const routeKeys = new Set(routes.map((route) => route.key));
+    const descriptors = [
+      ...routes,
+      ...props.state.routes.filter((route) => !routeKeys.has(route.key)),
+    ].reduce<StackDescriptorMap>((acc, route) => {
       acc[route.key] =
         props.descriptors[route.key] || state.descriptors[route.key];
 
@@ -266,8 +309,7 @@ export class StackView extends React.Component<Props, State> {
 
     return {
       routes,
-      previousRoutes: [...props.state.routes, ...props.state.preloadedRoutes],
-      previousDescriptors: props.descriptors,
+      previousState: props.state,
       openingRouteKeys,
       closingRouteKeys,
       replacingRouteKeys,
@@ -277,8 +319,7 @@ export class StackView extends React.Component<Props, State> {
 
   state: State = {
     routes: [],
-    previousRoutes: [],
-    previousDescriptors: {},
+    previousState: undefined,
     openingRouteKeys: [],
     closingRouteKeys: [],
     replacingRouteKeys: [],
@@ -307,48 +348,73 @@ export class StackView extends React.Component<Props, State> {
     const { state, navigation } = this.props;
     const { closingRouteKeys, replacingRouteKeys } = this.state;
 
+    const activeRoutes = state.routes.slice(0, state.index + 1);
+
     if (
       closingRouteKeys.some((key) => key === route.key) &&
       replacingRouteKeys.every((key) => key !== route.key) &&
       state.routeNames.includes(route.name) &&
-      !state.routes.some((r) => r.key === route.key)
+      !activeRoutes.some((r) => r.key === route.key)
     ) {
-      // If route isn't present in current state, but was closing, assume that a close animation was cancelled
+      // If route is no longer active, but was closing, assume that a close animation was cancelled
       // So we need to add this route back to the state
       navigation.dispatch((state) => {
-        const routes = [
-          ...state.routes.filter((r) => r.key !== route.key),
-          route,
-        ];
+        const activeRoutes = state.routes
+          .slice(0, state.index + 1)
+          .filter((r) => r.key !== route.key);
+        const inactiveRoutes = state.routes
+          .slice(state.index + 1)
+          .filter((r) => r.key !== route.key);
 
-        return CommonActions.reset({
+        const routes = [...activeRoutes, route];
+
+        const resetState = {
           ...state,
-          routes,
           index: routes.length - 1,
-        });
+          routes: routes.concat(inactiveRoutes),
+        };
+
+        return CommonActions.reset(resetState);
       });
     } else {
-      this.setState((state) => ({
-        routes: state.replacingRouteKeys.length
-          ? state.routes.filter(
-              (r) => !state.replacingRouteKeys.includes(r.key)
-            )
-          : state.routes,
-        openingRouteKeys: state.openingRouteKeys.filter(
-          (key) => key !== route.key
-        ),
-        closingRouteKeys: state.closingRouteKeys.filter(
-          (key) => key !== route.key
-        ),
-        replacingRouteKeys: [],
-      }));
+      this.setState((state) => {
+        const routeIndex = state.routes.findIndex((r) => r.key === route.key);
+
+        // Remove replacing routes that were before the route that just opened
+        // Those were replaced by this or earlier routes and should be cleaned up
+        const replacingRoutesToRemove = new Set(
+          state.routes
+            .slice(0, routeIndex)
+            .filter((r) => state.replacingRouteKeys.includes(r.key))
+            .map((r) => r.key)
+        );
+
+        const newRoutes = state.routes.filter(
+          (r) => !replacingRoutesToRemove.has(r.key)
+        );
+
+        return {
+          routes: newRoutes,
+          openingRouteKeys: state.openingRouteKeys.filter(
+            (key) => key !== route.key
+          ),
+          closingRouteKeys: state.closingRouteKeys.filter(
+            (key) => key !== route.key
+          ),
+          replacingRouteKeys: state.replacingRouteKeys.filter(
+            (key) => !replacingRoutesToRemove.has(key)
+          ),
+        };
+      });
     }
   };
 
   private handleCloseRoute = ({ route }: { route: Route<string> }) => {
     const { state, navigation } = this.props;
 
-    if (state.routes.some((r) => r.key === route.key)) {
+    const activeRoutes = state.routes.slice(0, state.index + 1);
+
+    if (activeRoutes.some((r) => r.key === route.key)) {
       // If a route exists in state, trigger a pop
       // This will happen in when the route was closed from the card component
       // e.g. When the close animation triggered from a gesture ends
@@ -420,8 +486,13 @@ export class StackView extends React.Component<Props, State> {
       ...rest
     } = this.props;
 
-    const { routes, descriptors, openingRouteKeys, closingRouteKeys } =
-      this.state;
+    const {
+      routes,
+      descriptors,
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
+    } = this.state;
 
     return (
       <GestureHandlerWrapper style={styles.container}>
@@ -440,6 +511,7 @@ export class StackView extends React.Component<Props, State> {
                         routes={routes}
                         openingRouteKeys={openingRouteKeys}
                         closingRouteKeys={closingRouteKeys}
+                        replacingRouteKeys={replacingRouteKeys}
                         onOpenRoute={this.handleOpenRoute}
                         onCloseRoute={this.handleCloseRoute}
                         onTransitionStart={this.handleTransitionStart}

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

@@ -1,43 +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 const CardA11yWrapper = /*#__PURE__*/React.forwardRef(({
-  focused,
-  active,
-  animated,
-  isNextScreenTransparent,
-  detachCurrentScreen,
-  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 && detachCurrentScreen !== 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
-  });
-});
-CardA11yWrapper.displayName = 'CardA11yWrapper';
-//# 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","forwardRef","focused","active","animated","isNextScreenTransparent","detachCurrentScreen","children","ref","inert","setInert","useState","useImperativeHandle","isHidden","style","absoluteFill","pointerEvents","overflow","undefined","display","OS","visibility","collapsable","displayName"],"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,MAAMC,eAAe,gBAAGN,KAAK,CAACO,UAAU,CAC7C,CACE;EACEC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,uBAAuB;EACvBC,mBAAmB;EACnBC;AACK,CAAC,EACRC,GAAkC,KAC/B;EACH;EACA;EACA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGhB,KAAK,CAACiB,QAAQ,CAAC,KAAK,CAAC;EAE/CjB,KAAK,CAACkB,mBAAmB,CAACJ,GAAG,EAAE,OAAO;IAAEE;EAAS,CAAC,CAAC,EAAE,EAAE,CAAC;EAExD,MAAMG,QAAQ,GACZ,CAACT,QAAQ,IACTC,uBAAuB,KAAK,KAAK,IACjCC,mBAAmB,KAAK,KAAK,IAC7B,CAACJ,OAAO;EAEV,oBACEH,IAAA,CAACF,IAAI;IACH,eAAa,CAACK,OAAQ;IACtBY,KAAK,EAAE,CACLlB,UAAU,CAACmB,YAAY,EACvB;MACEC,aAAa,EAAE,CAACZ,QAAQ,GAAGK,KAAK,GAAG,CAACP,OAAO,IAAI,MAAM,GAAG,UAAU;MAClE;MACA;MACAe,QAAQ,EAAEd,MAAM,GAAGe,SAAS,GAAG,QAAQ;MACvC;MACAC,OAAO,EAAExB,QAAQ,CAACyB,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,CACF,CAAC;AAEDP,eAAe,CAACuB,WAAW,GAAG,iBAAiB","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;
-    detachCurrentScreen: boolean;
-    children: React.ReactNode;
-};
-export type CardA11yWrapperRef = {
-    setInert: (value: boolean) => void;
-};
-export declare const CardA11yWrapper: React.ForwardRefExoticComponent<Props & React.RefAttributes<CardA11yWrapperRef>>;
-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,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AAExE,eAAO,MAAM,eAAe,kFAkD3B,CAAC"}

package/src/views/Stack/CardA11yWrapper.tsx

@@ -1,67 +0,0 @@
-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}
-        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>
-    );
-  }
-);
-
-CardA11yWrapper.displayName = 'CardA11yWrapper';