@amazon-devices/react-navigation__stack 7.0.1758683737 → 8.0.9000000000

package/src/views/Stack/StackView.tsx

@@ -3,34 +3,41 @@ import {
   SafeAreaProviderCompat,
 } from '@amazon-devices/react-navigation__elements';
 import {
-  ParamListBase,
-  Route,
+  CommonActions,
+  type LocaleDirection,
+  type ParamListBase,
+  type Route,
+  type RouteProp,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
 } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import {
-  EdgeInsets,
-  SafeAreaInsetsContext,
-} from '@amazon-devices/react-native-safe-area-context';
+import { SafeAreaInsetsContext } from '@amazon-devices/react-native-safe-area-context';
 
 import type {
+  StackDescriptor,
   StackDescriptorMap,
   StackNavigationConfig,
   StackNavigationHelpers,
 } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
-import HeaderContainer, {
-  Props as HeaderContainerProps,
+import {
+  HeaderContainer,
+  type Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import CardStack from './CardStack';
+import { CardStack, getAnimationEnabled } from './CardStack';
 
 type Props = StackNavigationConfig & {
+  direction: LocaleDirection;
   state: StackNavigationState<ParamListBase>;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => StackDescriptor;
 };
 
 type State = {
@@ -58,9 +65,9 @@ const GestureHandlerWrapper = GestureHandlerRootView ?? View;
  * We need to make sure that both values and order match.
  */
 const isArrayEqual = (a: any[], b: any[]) =>
-  a.length === b.length && a.every((it, index) => it === b[index]);
+  a.length === b.length && a.every((it, index) => Object.is(it, b[index]));
 
-export default class StackView extends React.Component<Props, State> {
+export class StackView extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Readonly<Props>,
     state: Readonly<State>
@@ -123,12 +130,9 @@ export default class StackView extends React.Component<Props, State> {
         : props.state.routes;
 
     // Now we need to determine which routes were added and removed
-    let {
-      openingRouteKeys,
-      closingRouteKeys,
-      replacingRouteKeys,
-      previousRoutes,
-    } = state;
+    const { previousRoutes } = state;
+
+    let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
 
     const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
       | Route<string>
@@ -138,7 +142,7 @@ export default class StackView extends React.Component<Props, State> {
     const isAnimationEnabled = (key: string) => {
       const descriptor = props.descriptors[key] || state.descriptors[key];
 
-      return descriptor ? descriptor.options.animationEnabled !== false : true;
+      return getAnimationEnabled(descriptor?.options.animation);
     };
 
     const getAnimationTypeForReplace = (key: string) => {
@@ -154,9 +158,35 @@ export default class StackView extends React.Component<Props, State> {
       // We only need to animate routes if the focused route changed
       // Animating previous routes won't be visible coz the focused route is on top of everything
 
-      if (!previousRoutes.some((r) => r.key === nextFocusedRoute.key)) {
-        // A new route has come to the focus, we treat this as a push
-        // A replace can also trigger this, the animation should look like push
+      if (
+        previousRoutes.some((r) => r.key === nextFocusedRoute.key) &&
+        !routes.some((r) => r.key === previousFocusedRoute.key)
+      ) {
+        // The previously focused route was removed, and the new focused route was already present
+        // We treat this as a pop
+
+        if (
+          isAnimationEnabled(previousFocusedRoute.key) &&
+          !closingRouteKeys.includes(previousFocusedRoute.key)
+        ) {
+          closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
+
+          // Sometimes a route can be closed before the opening animation finishes
+          // So we also need to remove it from the opening list
+          openingRouteKeys = openingRouteKeys.filter(
+            (key) => key !== previousFocusedRoute.key
+          );
+          replacingRouteKeys = replacingRouteKeys.filter(
+            (key) => key !== previousFocusedRoute.key
+          );
+
+          // Keep a copy of route being removed in the state to be able to animate it
+          routes = [...routes, previousFocusedRoute];
+        }
+      } else {
+        // A route has come to the focus, we treat this as a push
+        // A replace or rearranging can also trigger this
+        // The animation should look like push
 
         if (
           isAnimationEnabled(nextFocusedRoute.key) &&
@@ -213,31 +243,6 @@ export default class StackView extends React.Component<Props, State> {
             }
           }
         }
-      } else if (!routes.some((r) => r.key === previousFocusedRoute.key)) {
-        // The previously focused route was removed, we treat this as a pop
-
-        if (
-          isAnimationEnabled(previousFocusedRoute.key) &&
-          !closingRouteKeys.includes(previousFocusedRoute.key)
-        ) {
-          closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
-
-          // Sometimes a route can be closed before the opening animation finishes
-          // So we also need to remove it from the opening list
-          openingRouteKeys = openingRouteKeys.filter(
-            (key) => key !== previousFocusedRoute.key
-          );
-          replacingRouteKeys = replacingRouteKeys.filter(
-            (key) => key !== previousFocusedRoute.key
-          );
-
-          // Keep a copy of route being removed in the state to be able to animate it
-          routes = [...routes, previousFocusedRoute];
-        }
-      } else {
-        // Looks like some routes were re-arranged and no focused routes were added/removed
-        // i.e. the currently focused route already existed and the previously focused route still exists
-        // We don't know how to animate this
       }
     } else if (replacingRouteKeys.length || closingRouteKeys.length) {
       // Keep the routes we are closing or replacing if animation is enabled for them
@@ -301,17 +306,6 @@ export default class StackView extends React.Component<Props, State> {
     return routes[index - 1];
   };
 
-  private renderScene = ({ route }: { route: Route<string> }) => {
-    const descriptor =
-      this.state.descriptors[route.key] || this.props.descriptors[route.key];
-
-    if (!descriptor) {
-      return null;
-    }
-
-    return descriptor.render();
-  };
-
   private renderHeader = (props: HeaderContainerProps) => {
     return <HeaderContainer {...props} />;
   };
@@ -328,7 +322,18 @@ export default class StackView extends React.Component<Props, State> {
     ) {
       // If route isn't present in current state, but was closing, assume that a close animation was cancelled
       // So we need to add this route back to the state
-      navigation.navigate(route);
+      navigation.dispatch((state) => {
+        const routes = [
+          ...state.routes.filter((r) => r.key !== route.key),
+          route,
+        ];
+
+        return CommonActions.reset({
+          ...state,
+          routes,
+          index: routes.length - 1,
+        });
+      });
     } else {
       this.setState((state) => ({
         routes: state.replacingRouteKeys.length
@@ -425,6 +430,12 @@ export default class StackView extends React.Component<Props, State> {
     const { routes, descriptors, openingRouteKeys, closingRouteKeys } =
       this.state;
 
+    const preloadedDescriptors =
+      state.preloadedRoutes.reduce<StackDescriptorMap>((acc, route) => {
+        acc[route.key] = acc[route.key] || this.props.describe(route, true);
+        return acc;
+      }, {});
+
     return (
       <GestureHandlerWrapper style={styles.container}>
         <SafeAreaProviderCompat>
@@ -435,7 +446,7 @@ export default class StackView extends React.Component<Props, State> {
                   <HeaderShownContext.Consumer>
                     {(isParentHeaderShown) => (
                       <CardStack
-                        insets={insets as EdgeInsets}
+                        insets={insets!}
                         isParentHeaderShown={isParentHeaderShown}
                         isParentModal={isParentModal}
                         getPreviousRoute={this.getPreviousRoute}
@@ -447,12 +458,12 @@ export default class StackView extends React.Component<Props, State> {
                         onTransitionStart={this.handleTransitionStart}
                         onTransitionEnd={this.handleTransitionEnd}
                         renderHeader={this.renderHeader}
-                        renderScene={this.renderScene}
                         state={state}
                         descriptors={descriptors}
                         onGestureStart={this.handleGestureStart}
                         onGestureEnd={this.handleGestureEnd}
                         onGestureCancel={this.handleGestureCancel}
+                        preloadedDescriptors={preloadedDescriptors}
                         {...rest}
                       />
                     )}