@react-navigation/stack 7.0.5 → 7.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "7.0.5",
+  "version": "7.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -51,26 +51,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.1.0",
+    "@react-navigation/elements": "^2.1.1",
     "color": "^4.2.3"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@react-navigation/native": "^7.0.3",
-    "@testing-library/react-native": "^12.4.3",
+    "@react-navigation/native": "^7.0.4",
+    "@testing-library/react-native": "^12.8.1",
     "@types/color": "^3.0.6",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
     "del-cli": "^5.1.0",
-    "react": "18.2.0",
-    "react-native": "0.74.5",
+    "react": "18.3.1",
+    "react-native": "0.76.2",
     "react-native-builder-bob": "^0.29.0",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "~4.0.0",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "^4.3.0",
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.3",
+    "@react-navigation/native": "^7.0.4",
     "react": ">= 18.2.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
@@ -102,5 +102,5 @@
       ]
     ]
   },
-  "gitHead": "5da190167882859bb3356a84de42be3ca540ef99"
+  "gitHead": "046ed593f82d1e5ecfe411c6db6bf25c5e04ff7b"
 }

package/src/views/Stack/Card.tsx

@@ -34,6 +34,7 @@ import { CardSheet, type CardSheetRef } from './CardSheet';
 
 type Props = ViewProps & {
   interpolationIndex: number;
+  opening: boolean;
   closing: boolean;
   next?: Animated.AnimatedInterpolation<number>;
   current: Animated.AnimatedInterpolation<number>;
@@ -115,7 +116,8 @@ export class Card extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { direction, layout, gestureDirection, closing } = this.props;
+    const { gesture, direction, layout, gestureDirection, opening, closing } =
+      this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -143,6 +145,14 @@ export class Card extends React.Component<Props> {
       // When route was closed due to a gesture, the animation would've happened already
       // It's still important to trigger the animation so that `onClose` is called
       // If `onClose` is not called, cleanup step won't be performed for gestures
+      this.animate({ closing });
+    } else if (opening && !prevProps.opening) {
+      // This can happen when screen somewhere below in the stack comes into focus via rearranging
+      // Also reset the animated value to make sure that the animation starts from the beginning
+      gesture.setValue(
+        getDistanceForDirection(layout, gestureDirection, direction === 'rtl')
+      );
+
       this.animate({ closing });
     }
   }

package/src/views/Stack/CardContainer.tsx

@@ -24,6 +24,7 @@ type Props = {
   index: number;
   active: boolean;
   focused: boolean;
+  opening: boolean;
   closing: boolean;
   modal: boolean;
   layout: Layout;
@@ -64,6 +65,7 @@ function CardContainerInner({
   interpolationIndex,
   index,
   active,
+  opening,
   closing,
   gesture,
   focused,
@@ -240,6 +242,7 @@ function CardContainerInner({
       gesture={gesture}
       current={scene.progress.current}
       next={scene.progress.next}
+      opening={opening}
       closing={closing}
       onOpen={handleOpen}
       onClose={handleClose}

package/src/views/Stack/CardStack.tsx

@@ -1,5 +1,4 @@
 import {
-  Background,
   getDefaultHeaderHeight,
   SafeAreaProviderCompat,
 } from '@react-navigation/elements';
@@ -15,6 +14,7 @@ import {
   type LayoutChangeEvent,
   Platform,
   StyleSheet,
+  View,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
@@ -569,6 +569,7 @@ export class CardStack extends React.Component<Props, State> {
       insets,
       state,
       routes,
+      openingRouteKeys,
       closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
@@ -660,7 +661,7 @@ export class CardStack extends React.Component<Props, State> {
     );
 
     return (
-      <Background>
+      <View style={styles.container}>
         {isFloatHeaderAbsolute ? null : floatingHeader}
         <MaybeScreenContainer
           enabled={detachInactiveScreens}
@@ -762,6 +763,7 @@ export class CardStack extends React.Component<Props, State> {
                   modal={isModal}
                   active={index === routes.length - 1}
                   focused={focused}
+                  opening={openingRouteKeys.includes(route.key)}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
                   gesture={gesture}
@@ -795,7 +797,7 @@ export class CardStack extends React.Component<Props, State> {
           })}
         </MaybeScreenContainer>
         {isFloatHeaderAbsolute ? floatingHeader : null}
-      </Background>
+      </View>
     );
   }
 }

package/src/views/Stack/StackView.tsx

@@ -158,9 +158,35 @@ export 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) &&
@@ -217,31 +243,6 @@ export 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