@react-navigation/stack 7.12.0 → 7.12.2

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

@@ -1 +1 @@
-{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACV,KAAK,SAAS,EAEd,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,gBAAa,CAAC;AASrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CACR,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAC/B,WAAW,EAAE,OAAO,KACjB,eAAe,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,aAAa,EAAE,oBAAoB,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC;IAE/D,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1D,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;IAqQxB,KAAK,EAAE,KAAK,CAOV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAuDrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CAoDP"}
+{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACV,KAAK,SAAS,EAEd,KAAK,oBAAoB,EAE1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,gBAAa,CAAC;AASrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CACR,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAC/B,WAAW,EAAE,OAAO,KACjB,eAAe,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,aAAa,EAAE,oBAAoB,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC;IAE/D,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1D,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;IA8QxB,KAAK,EAAE,KAAK,CAOV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAuDrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CA6DP"}

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.12.0",
+  "version": "7.12.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,28 +45,28 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.9.44",
+    "@react-navigation/elements": "^2.9.46",
     "color": "^4.2.3",
     "use-latest-callback": "^0.2.4"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^7.5.0",
+    "@jest/globals": "^30.5.2",
+    "@react-navigation/native": "^7.5.2",
     "@testing-library/react-native": "^13.2.1",
     "@types/color": "^4.2.0",
-    "@types/react": "~19.2.4",
-    "del-cli": "^6.0.0",
-    "react": "19.2.3",
-    "react-native": "0.85.3",
-    "react-native-builder-bob": "^0.42.1",
-    "react-native-gesture-handler": "~2.31.1",
-    "react-native-safe-area-context": "~5.10.0",
-    "react-native-screens": "^4.26.2",
-    "react-test-renderer": "19.2.3",
+    "@types/react": "~19.3.0",
+    "del-cli": "^8.0.1",
+    "react": "19.3.0",
+    "react-native": "0.88.1",
+    "react-native-builder-bob": "^0.44.1",
+    "react-native-gesture-handler": "^3.5.0",
+    "react-native-safe-area-context": "~5.11.1",
+    "react-native-screens": "^4.30.1",
+    "react-test-renderer": "19.3.0",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.5.0",
+    "@react-navigation/native": "^7.5.2",
     "react": ">= 18.2.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "47f787dc7580c092238e17af8a86cad32573bd32"
+  "gitHead": "77fad70cd6d9ed492d7ce30177efa923e95294cb"
 }

package/src/types.tsx

@@ -435,14 +435,28 @@ export type TransitionSpec =
       animation: 'spring';
       config: Omit<
         Animated.SpringAnimationConfig,
-        'toValue' | keyof Animated.AnimationConfig
+        | 'toValue'
+        | 'useNativeDriver'
+        | 'isInteraction'
+        | 'iterations'
+        | 'isLooping'
+        | 'onComplete'
+        | 'platformConfig'
+        | 'debugID'
       >;
     }
   | {
       animation: 'timing';
       config: Omit<
         Animated.TimingAnimationConfig,
-        'toValue' | keyof Animated.AnimationConfig
+        | 'toValue'
+        | 'useNativeDriver'
+        | 'isInteraction'
+        | 'iterations'
+        | 'isLooping'
+        | 'onComplete'
+        | 'platformConfig'
+        | 'debugID'
       >;
     };
 

package/src/utils/gestureActivationCriteria.tsx

@@ -1,4 +1,5 @@
 import type { LocaleDirection } from '@react-navigation/native';
+import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
 
 import type { GestureDirection, Layout } from '../types';
 import { getInvertedMultiplier } from './getInvertedMultiplier';
@@ -19,7 +20,7 @@ export const gestureActivationCriteria = ({
   gestureDirection: GestureDirection;
   gestureResponseDistance?: number;
   layout: Layout;
-}) => {
+}): PanGestureHandlerProperties => {
   const enableTrackpadTwoFingerGesture = true;
 
   const distance =
@@ -30,17 +31,20 @@ export const gestureActivationCriteria = ({
         ? GESTURE_RESPONSE_DISTANCE_VERTICAL
         : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
+  const failOffsetX: [number, number] = [-15, 15];
+  const failOffsetY: [number, number] = [-20, 20];
+
   if (gestureDirection === 'vertical') {
     return {
-      maxDeltaX: 15,
-      minOffsetY: 5,
+      failOffsetX,
+      activeOffsetY: 5,
       hitSlop: { bottom: -layout.height + distance },
       enableTrackpadTwoFingerGesture,
     };
   } else if (gestureDirection === 'vertical-inverted') {
     return {
-      maxDeltaX: 15,
-      minOffsetY: -5,
+      failOffsetX,
+      activeOffsetY: -5,
       hitSlop: { top: -layout.height + distance },
       enableTrackpadTwoFingerGesture,
     };
@@ -53,15 +57,15 @@ export const gestureActivationCriteria = ({
 
     if (invertedMultiplier === 1) {
       return {
-        minOffsetX: 5,
-        maxDeltaY: 20,
+        activeOffsetX: 5,
+        failOffsetY,
         hitSlop: { right: hitSlop },
         enableTrackpadTwoFingerGesture,
       };
     } else {
       return {
-        minOffsetX: -5,
-        maxDeltaY: 20,
+        activeOffsetX: -5,
+        failOffsetY,
         hitSlop: { left: hitSlop },
         enableTrackpadTwoFingerGesture,
       };

package/src/utils/useKeyboardManager.tsx

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import { type HostInstance, Keyboard, TextInput } from 'react-native';
+import { type HostInstance, Keyboard, Platform, TextInput } from 'react-native';
+
+import { viewIsDescendantOf } from './viewIsDescendantOf';
 
 export function useKeyboardManager({
+  active,
   enabled,
   focused,
+  contentRef,
 }: {
+  active: boolean;
   enabled: boolean;
   focused: boolean;
+  contentRef: React.RefObject<HostInstance | null>;
 }) {
-  // Numeric id of the previously focused text input
-  // When a gesture didn't change the tab, we can restore the focused input with this
   const previouslyFocusedTextInputRef = React.useRef<HostInstance>(undefined);
+  const unfocusedScreenTextInputRef = React.useRef<HostInstance>(undefined);
+  const closingGestureRef = React.useRef(false);
   const startTimestampRef = React.useRef<number>(0);
   const keyboardTimeoutRef = React.useRef<NodeJS.Timeout>(undefined);
   const enabledRef = React.useRef(enabled);
+  const focusedRef = React.useRef(focused);
 
   const clearKeyboardTimeout = React.useCallback(() => {
     if (keyboardTimeoutRef.current !== undefined) {
@@ -23,12 +30,18 @@ export function useKeyboardManager({
   }, []);
 
   const onPageChangeStart = React.useCallback(() => {
-    if (!enabledRef.current) {
+    if (!enabledRef.current || !focusedRef.current) {
       return;
     }
 
     clearKeyboardTimeout();
 
+    // On Android, back button hides keyboard without blurring input,
+    // so we need to check if the keyboard is actually visible.
+    if (Platform.OS === 'android' && !Keyboard.isVisible()) {
+      return;
+    }
+
     const input = TextInput.State.currentlyFocusedInput();
 
     // When a page change begins, blur the currently focused input
@@ -42,7 +55,7 @@ export function useKeyboardManager({
   }, [clearKeyboardTimeout]);
 
   const onPageChangeCancel = React.useCallback(() => {
-    if (!enabledRef.current) {
+    if (!enabledRef.current || !focusedRef.current) {
       return;
     }
 
@@ -81,11 +94,19 @@ export function useKeyboardManager({
       active: boolean;
       closing: boolean;
     }) => {
-      if (!enabledRef.current) {
+      if (!enabledRef.current || !focusedRef.current) {
         return;
       }
 
       if (!closing) {
+        // If the screen was reopened without losing focus,
+        // e.g. the swipe was blocked by preventing removal
+        // We should clear the saved input to avoid refocusing it incorrectly later.
+        if (closingGestureRef.current) {
+          unfocusedScreenTextInputRef.current = undefined;
+          closingGestureRef.current = false;
+        }
+
         onPageChangeCancel();
         return;
       }
@@ -105,6 +126,15 @@ export function useKeyboardManager({
         input?.blur();
       }
 
+      // If a closing swipe already blurred the input,
+      // we can't get it using currentlyFocusedInput() anymore.
+      // So we need to use the input that was saved before the blur.
+      if (gesture) {
+        unfocusedScreenTextInputRef.current =
+          previouslyFocusedTextInputRef.current;
+        closingGestureRef.current = true;
+      }
+
       // Cleanup the ID on successful page change
       previouslyFocusedTextInputRef.current = undefined;
     },
@@ -115,13 +145,119 @@ export function useKeyboardManager({
   // This handles the "navigate forward" case so we don't dismiss the new screen's
   // auto-focused input from handleTransition.
   React.useLayoutEffect(() => {
-    if (enabledRef.current && !focused) {
+    let cancelled = false;
+
+    if (
+      enabledRef.current &&
+      // Check the previous focus value so we only dismiss when focus is lost,
+      // and not if the effect re-runs (e.g. because of StrictMode, Activity etc.)
+      focusedRef.current &&
+      !focused
+    ) {
+      closingGestureRef.current = false;
+
+      if (
+        Platform.OS !== 'web' &&
+        // On Android, back button hides keyboard without blurring input,
+        // so we need to check if the keyboard is actually visible.
+        (Platform.OS !== 'android' || Keyboard.isVisible())
+      ) {
+        const input = TextInput.State.currentlyFocusedInput();
+
+        const content = contentRef.current;
+
+        if (input && content) {
+          viewIsDescendantOf(input, content, (isDescendant) => {
+            if (isDescendant && !cancelled && enabledRef.current) {
+              unfocusedScreenTextInputRef.current = input;
+            }
+          });
+        }
+      }
+
       Keyboard.dismiss();
     }
-  }, [focused]);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [contentRef, enabled, focused]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    if (Platform.OS !== 'web' && focused && active) {
+      const input = unfocusedScreenTextInputRef.current;
+      const content = contentRef.current;
+
+      if (enabledRef.current && input && content) {
+        viewIsDescendantOf(input, content, (isDescendant) => {
+          if (
+            isDescendant &&
+            !cancelled &&
+            enabledRef.current &&
+            !TextInput.State.currentlyFocusedInput()
+          ) {
+            input.focus();
+          }
+        });
+      }
+
+      unfocusedScreenTextInputRef.current = undefined;
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [active, contentRef, enabled, focused]);
+
+  // Dismiss keyboard if native focus is restored to an input in an unfocused screen.
+  // This can happen after dismissing a native alert when `autoFocus` is used on iOS.
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const blurInputInScreen = () => {
+      if (focusedRef.current || !enabledRef.current) {
+        return;
+      }
+
+      const input = TextInput.State.currentlyFocusedInput();
+
+      const content = contentRef.current;
+
+      if (input && content) {
+        viewIsDescendantOf(input, content, (isDescendant) => {
+          if (
+            isDescendant &&
+            !cancelled &&
+            !focusedRef.current &&
+            enabledRef.current &&
+            TextInput.State.currentlyFocusedInput() === input
+          ) {
+            input.blur();
+          }
+        });
+      }
+    };
+
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', blurInputInScreen),
+      Keyboard.addListener('keyboardDidShow', blurInputInScreen),
+    ];
+
+    return () => {
+      cancelled = true;
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [contentRef]);
 
   React.useLayoutEffect(() => {
+    if (!enabled) {
+      unfocusedScreenTextInputRef.current = undefined;
+    }
+
     enabledRef.current = enabled;
+    focusedRef.current = focused;
   });
 
   React.useEffect(() => {

package/src/utils/viewIsDescendantOf.tsx

@@ -0,0 +1,33 @@
+import { findNodeHandle, type HostInstance, UIManager } from 'react-native';
+
+export function viewIsDescendantOf(
+  view: HostInstance,
+  ancestor: HostInstance,
+  callback: (isDescendant: boolean) => void
+) {
+  if (typeof ancestor.contains === 'function') {
+    callback(ancestor.contains(view));
+    return;
+  }
+
+  if (view.isConnected === false || ancestor.isConnected === false) {
+    callback(false);
+    return;
+  }
+
+  const viewTag = findNodeHandle(view);
+  const ancestorTag = findNodeHandle(ancestor);
+
+  if (viewTag == null || ancestorTag == null) {
+    callback(false);
+    return;
+  }
+
+  UIManager.viewIsDescendantOf(
+    viewTag,
+    ancestorTag,
+    (result: boolean | boolean[]) => {
+      callback(Array.isArray(result) ? result[0] : result);
+    }
+  );
+}

package/src/views/GestureHandler.tsx

@@ -9,7 +9,7 @@ const Dummy: any = ({ children }: { children: React.ReactNode }) => (
 export const PanGestureHandler =
   Dummy as React.ComponentType<PanGestureHandlerProperties>;
 
-export const GestureHandlerRootView = View;
+export const GestureHandlerRootView: typeof View = View;
 
 export const GestureState = {
   UNDETERMINED: 0,

package/src/views/Header/Header.tsx

@@ -29,7 +29,7 @@ export const Header = React.memo(function Header({
     previousTitle = back.title;
   }
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
   const goBack = React.useCallback(
     throttle(() => {
       if (navigation.isFocused() && navigation.canGoBack()) {

package/src/views/InteractionManager.tsx

@@ -9,6 +9,7 @@ type InteractionManagerType = {
 let InteractionManager: InteractionManagerType | undefined;
 
 try {
+  // @ts-expect-error `InteractionManager` is removed from the types in newer React Native versions
   InteractionManager = ReactNative.InteractionManager;
 } catch (e) {
   // On newer React Native versions, accessing InteractionManager throws an error

package/src/views/Screens.tsx

@@ -29,7 +29,7 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
+  active: 0 | 1 | 2 | Animated.AnimatedInterpolation<0 | 1 | 2>;
   children: React.ReactNode;
   freezeOnBlur?: boolean;
   shouldFreeze: boolean;

package/src/views/Stack/Card.tsx

@@ -84,7 +84,11 @@ const hasOpacityStyle = (
   if (style) {
     const flattenedStyle = StyleSheet.flatten(style);
 
-    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
+    return (
+      flattenedStyle != null &&
+      'opacity' in flattenedStyle &&
+      flattenedStyle.opacity != null
+    );
   }
 
   return false;
@@ -167,7 +171,7 @@ function Card({
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const pendingOnCloseCallbackRef =
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const initialAnimationHandleRef = React.useRef<number | undefined>(undefined);
 
   const [isClosing] = React.useState(() => new Animated.Value(FALSE));
 
@@ -410,13 +414,23 @@ function Card({
       gesture.stopAnimation();
       onEndInteraction();
 
+      // In development, StrictMode re-runs effects without unmounting,
+      // e.g. when the card moves to a new position after rearranging.
+      // The stopped animation didn't reach its value, so reset the state,
+      // to make sure that `maybeAnimate` restarts it when effects re-run.
+      isAnimatingRef.current = false;
+      lastToValueRef.current = undefined;
+
       if (animationHandleRef.current) {
         cancelAnimationFrame(animationHandleRef.current);
       }
 
       clearTimeout(pendingGestureCallbackRef.current);
       clearTimeout(pendingOnCloseCallbackRef.current);
-      clearTimeout(timeoutRef.current);
+
+      if (initialAnimationHandleRef.current !== undefined) {
+        cancelAnimationFrame(initialAnimationHandleRef.current);
+      }
     };
   }, [gesture, onEndInteraction]);
 
@@ -426,16 +440,20 @@ function Card({
 
     if (!didInitiallyAnimate.current) {
       // Animate the card in on initial mount
-      // Wrap in setTimeout to ensure animation starts after
-      // rending of the screen is done. This is especially important
-      // in the new architecture
+      // Wait after the next frame to ensure animation starts after mount.
+      // Otherwise, the animation can drop frames.
+      // This is especially important in the new architecture
       // cf., https://github.com/react-navigation/react-navigation/issues/12401
-      clearTimeout(timeoutRef.current);
+      if (initialAnimationHandleRef.current !== undefined) {
+        cancelAnimationFrame(initialAnimationHandleRef.current);
+      }
 
-      timeoutRef.current = setTimeout(() => {
-        didInitiallyAnimate.current = true;
-        animate({ closing });
-      }, 0);
+      initialAnimationHandleRef.current = requestAnimationFrame(() => {
+        initialAnimationHandleRef.current = requestAnimationFrame(() => {
+          didInitiallyAnimate.current = true;
+          animate({ closing });
+        });
+      });
     } else {
       const previousOpening = previousPropsRef.current?.opening;
       const previousToValue = previousPropsRef.current
@@ -561,7 +579,7 @@ function Card({
     [gesture, gestureDirection, gestureEnabled]
   );
 
-  const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
+  const backgroundColor = StyleSheet.flatten(contentStyle)?.backgroundColor;
 
   const isTransparent =
     typeof backgroundColor === 'string'

package/src/views/Stack/CardContainer.tsx

@@ -102,10 +102,11 @@ function CardContainerInner({
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const { options } = scene.descriptor;
-  const enabled = focused && options.keyboardHandlingEnabled !== false;
+  const enabled = options.keyboardHandlingEnabled !== false;
+  const contentRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager({ enabled, focused });
+    useKeyboardManager({ active, enabled, focused, contentRef });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -289,7 +290,7 @@ function CardContainerInner({
           cardStyle,
         ]}
       >
-        <View style={styles.container}>
+        <View ref={contentRef} collapsable={false} style={styles.container}>
           <ModalPresentationContext.Provider value={modal}>
             {headerMode !== 'float'
               ? renderHeader({

package/src/views/Stack/CardContent.tsx

@@ -55,7 +55,7 @@ export function CardContent({ enabled, layout, style, ...rest }: Props) {
         document.head.appendChild(style);
       }
 
-      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
+      // eslint-disable-next-line @eslint-react/web-api-no-leaked-event-listener
       window.addEventListener('resize', updateStyle);
 
       unsubscribe = () => {
@@ -67,7 +67,7 @@ export function CardContent({ enabled, layout, style, ...rest }: Props) {
       document.getElementById(id)?.remove();
     }
 
-    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setFill(width === layout.width && height === layout.height);
 
     return unsubscribe;

package/src/views/Stack/CardStack.tsx

@@ -90,7 +90,7 @@ type State = {
   scenes: (Scene & { __memo: unknown[] })[];
   gestures: GestureValues;
   layout: Layout;
-  activeStates: (0 | 1 | Animated.AnimatedInterpolation<0 | 1>)[];
+  activeStates: (0 | 1 | 2 | Animated.AnimatedInterpolation<0 | 1 | 2>)[];
   headerHeights: Record<string, number>;
 };
 
@@ -178,10 +178,10 @@ const getHeaderHeights = (
       headerStyle,
     } = curr.descriptor.options;
 
-    const style = StyleSheet.flatten(headerStyle || {});
+    const style = StyleSheet.flatten(headerStyle);
 
     const height =
-      'height' in style && typeof style.height === 'number'
+      style != null && 'height' in style && typeof style.height === 'number'
         ? style.height
         : previous[curr.route.key];
 
@@ -287,7 +287,7 @@ export class CardStack extends React.Component<Props, State> {
         new Animated.Value(
           (props.openingRouteKeys.includes(curr.key) &&
             getAnimationEnabled(animation)) ||
-          props.state.preloadedRoutes.includes(curr)
+            props.state.preloadedRoutes.includes(curr)
             ? getDistanceFromOptions(
                 state.layout,
                 descriptor?.options,
@@ -383,9 +383,10 @@ export class CardStack extends React.Component<Props, State> {
             ? transitionPreset.cardStyleInterpolator
             : forNoAnimationCard,
           headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
-          cardOverlayEnabled = (Platform.OS !== 'ios' &&
-            optionsForTransitionConfig.presentation !== 'transparentModal') ||
-            getIsModalPresentation(cardStyleInterpolator),
+          cardOverlayEnabled = descriptor.options.presentation !==
+            'transparentModal' &&
+            (Platform.OS !== 'ios' ||
+              getIsModalPresentation(cardStyleInterpolator)),
         } = optionsForTransitionConfig;
 
         const headerMode: StackHeaderMode =
@@ -471,7 +472,10 @@ export class CardStack extends React.Component<Props, State> {
 
     let activeStates = state.activeStates;
 
-    if (props.routes.length !== state.routes.length) {
+    if (
+      props.routes.length !== state.routes.length ||
+      props.routes.some((route, i) => route.key !== state.routes[i].key)
+    ) {
       let activeScreensLimit = 1;
 
       for (let i = props.routes.length - 1; i >= 0; i--) {
@@ -517,12 +521,31 @@ export class CardStack extends React.Component<Props, State> {
           | 1
           | 2;
 
-        const lastActiveState = state.activeStates[index];
         const activeAfterTransition = index >= self.length - activeScreensLimit;
 
-        if (lastActiveState === STATE_INACTIVE && !activeAfterTransition) {
-          // screen was inactive before and it will still be inactive after the transition
+        if (
+          index < self.length - activeScreensLimit - 1 &&
+          !props.openingRouteKeys.includes(self[index + 1].key)
+        ) {
+          // screen should be inactive because it is too deep in the stack
+          // activating it during the transition makes the screen container re-attach
+          // all screens above it to keep the order, which can show a blank frame on Android
           activityState = STATE_INACTIVE;
+        } else if (index < self.length - activeScreensLimit - 1) {
+          // When a card is pushed before the previous one finishes opening,
+          // the screen below the previous card is still visible
+          // So it needs to stay active until the card above it finishes opening
+          activityState = scenes[index + 1].progress.current.interpolate({
+            inputRange: [0, 1 - EPSILON, 1],
+            outputRange: [1, 1, STATE_INACTIVE],
+            extrapolate: 'clamp',
+          });
+        } else if (Platform.OS === 'android' && index === self.length - 1) {
+          // On Android, the screen container switches all screens to hardware layers
+          // when no screen is on top, i.e. during the transition
+          // Doing this at the start of a transition can show a blank frame
+          // So we keep the topmost screen on top during the transition
+          activityState = STATE_ON_TOP;
         } else {
           const sceneForActivity = scenes[self.length - 1];
           const outputValue =