react-native-screen-transitions 3.2.0-beta.0 → 3.2.0-beta.1

package/src/shared/components/overlay/helpers/get-active-overlay.ts

@@ -36,29 +36,3 @@ export function getActiveFloatOverlay(
 
 	return null;
 }
-
-/**
- * Find the active container overlay from scenes.
- * Scans from the bottom of the stack upward to find the first screen
- * with overlayMode="container" and overlayShown=true.
- */
-export function getActiveContainerOverlay(
-	scenes: StackScene[],
-	transitionsAlwaysOn: boolean,
-): { scene: StackScene; overlayIndex: number } | null {
-	for (let i = 0; i < scenes.length; i++) {
-		const scene = scenes[i];
-		const options = scene?.descriptor?.options;
-
-		// Skip screens without enableTransitions (native-stack only)
-		if (!transitionsAlwaysOn && !options?.enableTransitions) {
-			continue;
-		}
-
-		if (options?.overlayMode === "container" && options?.overlayShown) {
-			return { scene, overlayIndex: i };
-		}
-	}
-
-	return null;
-}

package/src/shared/components/overlay/index.ts

@@ -1,9 +1,7 @@
-import { ContainerOverlay } from "./variations/container-overlay";
 import { FloatOverlay } from "./variations/float-overlay";
 import { ScreenOverlay } from "./variations/screen-overlay";
 
 export const Overlay = {
 	Float: FloatOverlay,
 	Screen: ScreenOverlay,
-	Container: ContainerOverlay,
 };

package/src/shared/constants.ts

@@ -1,4 +1,5 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { Platform } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
 import type { ScreenTransitionState } from "./types/animation.types";
 import type { ActivationArea } from "./types/gesture.types";
@@ -73,3 +74,5 @@ export const DEFAULT_GESTURE_DIRECTION = "horizontal";
 export const DEFAULT_GESTURE_ENABLED = false;
 export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
+
+export const IS_WEB = Platform.OS === "web";

package/src/{blank-stack/controllers/blank-stack-lifecycle.tsx → shared/controller/managed-lifecycle.tsx}

@@ -1,13 +1,13 @@
 import { useLayoutEffect } from "react";
 import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import { useHighRefreshRate } from "../../shared/hooks/animation/use-high-refresh-rate";
-import useStableCallback from "../../shared/hooks/use-stable-callback";
-import { useKeys } from "../../shared/providers/screen/keys.provider";
-import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
-import { AnimationStore } from "../../shared/stores/animation.store";
-import { startScreenTransition } from "../../shared/utils/animation/start-screen-transition";
-import { resetStoresForScreen } from "../../shared/utils/reset-stores-for-screen";
-import type { BlankStackDescriptor } from "../types";
+import type { BlankStackDescriptor } from "../../blank-stack/types";
+import { useHighRefreshRate } from "../hooks/animation/use-high-refresh-rate";
+import useStableCallback from "../hooks/use-stable-callback";
+import { useKeys } from "../providers/screen/keys.provider";
+import { useManagedStackContext } from "../providers/stack/managed.provider";
+import { AnimationStore } from "../stores/animation.store";
+import { startScreenTransition } from "../utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../utils/reset-stores-for-screen";
 
 interface Props {
 	children: React.ReactNode;
@@ -16,7 +16,7 @@ interface Props {
 /**
  * Lifecycle controller built out for Blank Stack implementation.
  */
-export const BlankStackScreenLifecycleController = ({ children }: Props) => {
+export const ManagedLifecycle = ({ children }: Props) => {
 	const { current } = useKeys<BlankStackDescriptor>();
 	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
 
@@ -35,16 +35,15 @@ export const BlankStackScreenLifecycleController = ({ children }: Props) => {
 		});
 	});
 
-	const handleCleanup = useStableCallback(() => {
-		resetStoresForScreen(current);
-	});
-
 	const handleCloseEnd = useStableCallback((finished: boolean) => {
-		deactivateHighRefreshRate();
 		if (!finished) {
 			return;
 		}
 		handleCloseRoute({ route: current.route });
+		requestAnimationFrame(() => {
+			deactivateHighRefreshRate();
+			resetStoresForScreen(current);
+		});
 	});
 
 	useAnimatedReaction(
@@ -68,10 +67,7 @@ export const BlankStackScreenLifecycleController = ({ children }: Props) => {
 
 	useLayoutEffect(() => {
 		handleInitialize();
-		return () => {
-			handleCleanup();
-		};
-	}, [handleInitialize, handleCleanup]);
+	}, [handleInitialize]);
 
 	return children;
 };

package/src/shared/hooks/animation/use-high-refresh-rate.tsx

@@ -2,8 +2,14 @@ import { useFrameCallback } from "react-native-reanimated";
 import type { BaseDescriptor } from "../../providers/screen/keys.provider";
 import useStableCallback from "../use-stable-callback";
 
+/**
+ * Maintainer Notes:
+ * Marking as experimental for now since, I'll be honest, I'm not sure if this does much. This was taken
+ * right from this https://github.com/software-mansion/react-native-reanimated/issues/4738
+ *
+ * Not noticing much of a difference in prod.
+ */
 export const useHighRefreshRate = (current: BaseDescriptor) => {
-	// Force display to run at max refresh rate during transitions only
 	const enableHighRefreshRate =
 		current.options.experimental_enableHighRefreshRate ?? false;
 

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -164,9 +164,11 @@ export function _useScreenAnimation() {
 	const currentInterpolator =
 		currentDescriptor?.options.screenStyleInterpolator;
 
-	const screenStyleInterpolator = nextInterpolator ?? currentInterpolator;
-
-	return { screenInterpolatorProps, screenStyleInterpolator };
+	return {
+		screenInterpolatorProps,
+		nextInterpolator,
+		currentInterpolator,
+	};
 }
 
 export function useScreenAnimation() {

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -35,6 +35,7 @@ import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
 import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
 import { velocity } from "../../utils/gesture/velocity";
+import { useStack } from "../navigation/use-stack";
 import useStableCallbackValue from "../use-stable-callback-value";
 
 interface BuildGesturesHookProps {
@@ -52,7 +53,11 @@ export const useBuildGestures = ({
 	gestureAnimationValues: GestureStoreMap;
 } => {
 	const dimensions = useWindowDimensions();
+
 	const { current } = useKeys();
+	const navState = current.navigation.getState();
+	const isFirstScreen =
+		navState.routes.findIndex((r) => r.key === current.route.key) === 0;
 
 	const initialTouch = useSharedValue({
 		x: 0,
@@ -73,7 +78,6 @@ export const useBuildGestures = ({
 
 	const {
 		gestureDirection = DEFAULT_GESTURE_DIRECTION,
-		gestureEnabled = DEFAULT_GESTURE_ENABLED,
 		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
 		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
 		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
@@ -81,6 +85,10 @@ export const useBuildGestures = ({
 		transitionSpec,
 	} = current.options;
 
+	const gestureEnabled = Boolean(
+		isFirstScreen ? false : current.options.gestureEnabled,
+	);
+
 	const directions = useMemo(() => {
 		const directionsArray = Array.isArray(gestureDirection)
 			? gestureDirection

package/src/shared/hooks/navigation/use-stack.tsx

@@ -1,11 +1,8 @@
 import type { Route } from "@react-navigation/native";
 import { createContext, useContext } from "react";
 import type { DerivedValue } from "react-native-reanimated";
-import type {
-	ContainerOverlayProps,
-	OverlayMode,
-	OverlayProps,
-} from "../../types/overlay.types";
+import type { StackCoreContextValue } from "../../providers/stack/core.provider";
+import type { OverlayMode, OverlayProps } from "../../types/overlay.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
@@ -22,9 +19,7 @@ export interface StackDescriptor<
 	TNavigation extends BaseStackNavigation = BaseStackNavigation,
 > extends BaseStackDescriptor<TRoute, TNavigation> {
 	options: BaseStackDescriptor["options"] & {
-		overlay?:
-			| ((props: OverlayProps) => React.ReactNode)
-			| ((props: ContainerOverlayProps) => React.ReactNode);
+		overlay?: (props: OverlayProps) => React.ReactNode;
 		overlayMode?: OverlayMode;
 		overlayShown?: boolean;
 		meta?: Record<string, unknown>;
@@ -42,13 +37,7 @@ export type StackScene<TDescriptor extends StackDescriptor = StackDescriptor> =
  * Common stack context value that both managed and direct stack providers populate.
  * Used by overlays and shared components that need stack progress info.
  */
-export interface StackContextValue {
-	/**
-	 * Stack flags.
-	 */
-	flags: {
-		TRANSITIONS_ALWAYS_ON: boolean;
-	};
+export interface StackContextValue extends StackCoreContextValue {
 	/**
 	 * Route keys for all routes in the stack.
 	 */

package/src/shared/hooks/reanimated/use-shared-value-state.ts

@@ -5,6 +5,7 @@ import {
 	type SharedValue,
 	useAnimatedReaction,
 } from "react-native-reanimated";
+import { IS_WEB } from "../../constants";
 
 /**
  * Derives React state from a Reanimated SharedValue.
@@ -12,6 +13,10 @@ import {
  */
 export function useSharedValueState<T>(sharedValue: SharedValue<T>): T {
 	const [state, setState] = useState<T>(() => {
+		if (IS_WEB) {
+			// Web fallback - executeOnUIRuntimeSync not available
+			return sharedValue.value;
+		}
 		const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
 			"worklet";
 			return sv.value;

package/src/shared/index.ts

@@ -25,11 +25,12 @@ export type {
 	AnimationConfig,
 	BoundEntry,
 	BoundsLink,
-	ContainerOverlayProps,
 	OverlayInterpolationProps,
 	OverlayMode,
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionConfig,
+	TransitionInterpolatedStyle,
+	TransitionSpec,
 } from "./types";

package/src/shared/providers/layout-anchor.provider.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { useWindowDimensions, type View } from "react-native";
+import {
+	type AnimatedRef,
+	type MeasuredDimensions,
+	measure,
+} from "react-native-reanimated";
+import createProvider from "../utils/create-provider";
+
+interface LayoutAnchorProviderProps {
+	anchorRef: AnimatedRef<View>;
+	children: ReactNode;
+}
+
+interface LayoutAnchorContextValue {
+	/**
+	 * Corrects measured dimensions for parent transforms (translation and scale).
+	 * The anchor should be at (0, 0) with full screen dimensions - any difference
+	 * is from parent transforms. This function reverses those transforms to yield
+	 * the true layout position and dimensions.
+	 */
+	correctMeasurement: (measured: MeasuredDimensions) => MeasuredDimensions;
+}
+
+/**
+ * Provides a reference point for correcting bounds measurements.
+ *
+ * When a parent view has transforms applied (e.g., during screen transitions),
+ * `measure()` returns visual positions that include those transforms. This provider
+ * establishes an anchor point (typically the screen container at 0,0) and exposes
+ * a `correctMeasurement` function that reverses translation and scale transforms
+ * to yield the true layout position and dimensions.
+ *
+ * ## How it works
+ *
+ * 1. **Translation**: Subtract anchor's pageX/pageY offset
+ * 2. **Scale**: Compare anchor's measured size to expected (screen) size to compute
+ *    scale factor, then divide positions and dimensions by that factor
+ */
+const { LayoutAnchorProvider, useLayoutAnchorContext } = createProvider(
+	"LayoutAnchor",
+	{ guarded: false },
+)<LayoutAnchorProviderProps, LayoutAnchorContextValue>(
+	({ anchorRef, children }) => {
+		const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+		const correctMeasurement = (
+			measured: MeasuredDimensions,
+		): MeasuredDimensions => {
+			"worklet";
+			const anchor = measure(anchorRef);
+			if (!anchor) return measured;
+
+			// Compute scale factor by comparing anchor size to expected screen size.
+			// Anchor should be full-screen (absoluteFill), so any difference is from scale.
+			const scaleX = anchor.width > 0 ? anchor.width / screenWidth : 1;
+			const scaleY = anchor.height > 0 ? anchor.height / screenHeight : 1;
+
+			// Get element position relative to anchor (removes translation)
+			const relativeX = measured.pageX - anchor.pageX;
+			const relativeY = measured.pageY - anchor.pageY;
+
+			// Reverse scale: divide relative position and dimensions by scale factor
+			return {
+				x: measured.x,
+				y: measured.y,
+				width: scaleX !== 1 ? measured.width / scaleX : measured.width,
+				height: scaleY !== 1 ? measured.height / scaleY : measured.height,
+				pageX: scaleX !== 1 ? relativeX / scaleX : relativeX,
+				pageY: scaleY !== 1 ? relativeY / scaleY : relativeY,
+			};
+		};
+
+		return {
+			value: { correctMeasurement },
+			children,
+		};
+	},
+);
+
+export { LayoutAnchorProvider, useLayoutAnchorContext };

package/src/shared/providers/register-bounds.provider.tsx

@@ -17,6 +17,7 @@ import { AnimationStore } from "../stores/animation.store";
 import { BoundStore } from "../stores/bounds.store";
 import { prepareStyleForBounds } from "../utils/bounds/helpers/styles";
 import createProvider from "../utils/create-provider";
+import { useLayoutAnchorContext } from "./layout-anchor.provider";
 import { type BaseDescriptor, useKeys } from "./screen/keys.provider";
 
 interface MaybeMeasureAndStoreParams {
@@ -51,7 +52,7 @@ const getAncestorKeys = (current: BaseDescriptor): string[] => {
 	const ancestors: string[] = [];
 	const nav = current.navigation as any;
 
-	// Safety check for component-stack which doesn't have getParent
+	// Safety check for navigators without getParent
 	if (typeof nav?.getParent !== "function") {
 		return ancestors;
 	}
@@ -208,6 +209,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		const { current } = useKeys();
 		const currentScreenKey = current.route.key;
 		const ancestorKeys = useMemo(() => getAncestorKeys(current), [current]);
+		const layoutAnchor = useLayoutAnchorContext();
 
 		// Context & signals
 		const parentContext: RegisterBoundsContextValue | null =
@@ -241,12 +243,17 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 				const measured = measure(animatedRef);
 				if (!measured) return;
 
+				// Correct for parent transforms (e.g., when parent screen is animating)
+				const correctedMeasured = layoutAnchor
+					? layoutAnchor.correctMeasurement(measured)
+					: measured;
+
 				emitUpdate();
 
 				BoundStore.registerSnapshot(
 					sharedBoundTag,
 					currentScreenKey,
-					measured,
+					correctedMeasured,
 					preparedStyles,
 					ancestorKeys,
 				);
@@ -273,7 +280,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 					BoundStore.setLinkSource(
 						sharedBoundTag,
 						currentScreenKey,
-						measured,
+						correctedMeasured,
 						preparedStyles,
 						ancestorKeys,
 					);
@@ -284,7 +291,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 					BoundStore.setLinkDestination(
 						sharedBoundTag,
 						currentScreenKey,
-						measured,
+						correctedMeasured,
 						preparedStyles,
 						ancestorKeys,
 					);

package/src/shared/providers/screen/keys.provider.tsx

@@ -18,8 +18,8 @@ export type { BaseStackRoute as BaseRoute };
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
- * This allows component-stack, blank-stack, and native-stack to all
- * work with the shared providers without tight coupling to React Navigation.
+ * This allows blank-stack and native-stack to work with the shared
+ * providers without tight coupling to React Navigation.
  */
 export type BaseDescriptor = BaseStackDescriptor;
 

package/src/shared/providers/screen/styles.provider.tsx

@@ -1,5 +1,9 @@
 import { createContext, useContext, useMemo } from "react";
-import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import {
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
 import { NO_STYLES } from "../../constants";
 import { _useScreenAnimation } from "../../hooks/animation/use-screen-animation";
 import type { TransitionInterpolatedStyle } from "../../types/animation.types";
@@ -21,17 +25,58 @@ const ScreenStylesContext = createContext<ScreenStylesContextValue | null>(
 export function ScreenStylesProvider({ children }: Props) {
 	const parentCtx = useContext(ScreenStylesContext);
 
-	const { screenInterpolatorProps, screenStyleInterpolator } =
+	const { screenInterpolatorProps, nextInterpolator, currentInterpolator } =
 		_useScreenAnimation();
 
+	// Track when a gesture is triggered while another screen is closing
+	const hasTriggeredGestureWhileInFlight = useSharedValue(false);
+
 	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
 		"worklet";
 		const props = screenInterpolatorProps.value;
 		const bounds = createBounds(props);
+
+		// Detect when user starts gesture on current screen while next screen is closing
+		if (props.current.gesture.isDragging && props.next?.closing) {
+			hasTriggeredGestureWhileInFlight.value = true;
+		}
+
+		// Reset the flag when no longer dragging and next screen is done closing
+		if (
+			!props.current.gesture.isDragging &&
+			!props.next?.closing &&
+			hasTriggeredGestureWhileInFlight.value
+		) {
+			hasTriggeredGestureWhileInFlight.value = false;
+		}
+
+		// Use current interpolator when gesture triggered while in-flight,
+		// otherwise use next interpolator if available (normal case)
+		const shouldUseCurrentInterpolator =
+			props.current.gesture.isDragging ||
+			hasTriggeredGestureWhileInFlight.value;
+
+		const interpolator = shouldUseCurrentInterpolator
+			? currentInterpolator
+			: (nextInterpolator ?? currentInterpolator);
+
+		/**
+		 * Maintainer Note:
+		 * To avoid unnecessary jumps in off directions, we have to snap back to the currents progress.
+		 * While this still introduces a 'snap back' animation, it's still very rare that a user would encounter this unless
+		 * they're spamming things out. Not ideal, but this is the best way to go about dealing with fast rapid gestures.
+		 *
+		 * The alternative was preventing users from actually being able to drag back while animation was still in flight. But there was a significant delay
+		 * when waiting for gestures to register again.
+		 */
+		const effectiveProps = shouldUseCurrentInterpolator
+			? { ...props, progress: props.current.progress, next: undefined }
+			: props;
+
 		try {
-			if (!screenStyleInterpolator) return NO_STYLES;
-			return screenStyleInterpolator({
-				...props,
+			if (!interpolator) return NO_STYLES;
+			return interpolator({
+				...effectiveProps,
 				bounds,
 			});
 		} catch (err) {

package/src/shared/providers/stack/core.provider.tsx

@@ -1,11 +1,14 @@
 import { SafeAreaProviderCompat } from "@react-navigation/elements";
-import * as React from "react";
+import type * as React from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { StackType } from "../../types/stack.types";
 import createProvider from "../../utils/create-provider";
 
-interface StackCoreConfig {
+export interface StackCoreConfig {
 	TRANSITIONS_ALWAYS_ON?: boolean;
+	STACK_TYPE?: StackType;
+	DISABLE_NATIVE_SCREENS?: boolean;
 }
 
 interface StackCoreProviderProps {
@@ -13,47 +16,65 @@ interface StackCoreProviderProps {
 	children: React.ReactNode;
 }
 
-interface StackCoreContextValue {
+export interface StackCoreContextValue {
 	flags: {
 		TRANSITIONS_ALWAYS_ON: boolean;
+		STACK_TYPE?: StackType;
+		DISABLE_NATIVE_SCREENS: boolean;
 	};
 }
 
-const { StackCoreProvider: InternalStackCoreProvider } = createProvider(
-	"StackCore",
-	{ guarded: true },
-)<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
-	const { TRANSITIONS_ALWAYS_ON = false } = config;
+const { StackCoreProvider: InternalStackCoreProvider, useStackCoreContext } =
+	createProvider("StackCore", { guarded: true })<
+		StackCoreProviderProps,
+		StackCoreContextValue
+	>(({ config, children }) => {
+		const {
+			TRANSITIONS_ALWAYS_ON = false,
+			DISABLE_NATIVE_SCREENS = false,
+			STACK_TYPE = StackType.BLANK,
+		} = config;
 
-	const value = React.useMemo(
-		() => ({
-			flags: { TRANSITIONS_ALWAYS_ON },
-		}),
-		[TRANSITIONS_ALWAYS_ON],
-	);
-
-	return {
-		value,
-		children: (
-			<GestureHandlerRootView style={styles.container}>
-				<SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
-			</GestureHandlerRootView>
-		),
-	};
-});
+		return {
+			value: {
+				flags: {
+					TRANSITIONS_ALWAYS_ON,
+					STACK_TYPE,
+					DISABLE_NATIVE_SCREENS,
+				},
+			},
+			children: (
+				<GestureHandlerRootView style={styles.container}>
+					<SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
+				</GestureHandlerRootView>
+			),
+		};
+	});
 
 /**
  * HOC that wraps a component with the StackCore provider.
  * Just a simple open gate
  */
 export function withStackCore<TProps extends object>(
-	config: StackCoreConfig,
+	defaultConfig: StackCoreConfig,
 	Component: React.ComponentType<TProps>,
-): React.FC<TProps> {
-	return function StackCoreWrapper(props: TProps) {
+): React.FC<TProps & StackCoreConfig> {
+	return function StackCoreWrapper({
+		DISABLE_NATIVE_SCREENS,
+		TRANSITIONS_ALWAYS_ON,
+		STACK_TYPE,
+		...props
+	}: TProps & StackCoreConfig) {
+		// User props first, then defaultConfig overrides (config takes priority)
+		const config: StackCoreConfig = {
+			...(DISABLE_NATIVE_SCREENS !== undefined && { DISABLE_NATIVE_SCREENS }),
+			...(TRANSITIONS_ALWAYS_ON !== undefined && { TRANSITIONS_ALWAYS_ON }),
+			...(STACK_TYPE !== undefined && { STACK_TYPE }),
+			...defaultConfig,
+		};
 		return (
 			<InternalStackCoreProvider config={config}>
-				<Component {...props} />
+				<Component {...(props as TProps)} />
 			</InternalStackCoreProvider>
 		);
 	};
@@ -62,3 +83,5 @@ export function withStackCore<TProps extends object>(
 const styles = StyleSheet.create({
 	container: { flex: 1 },
 });
+
+export { useStackCoreContext };

package/src/shared/providers/stack/direct.provider.tsx

@@ -16,6 +16,7 @@ import {
 	type StackContextValue,
 } from "../../hooks/navigation/use-stack";
 import { AnimationStore } from "../../stores/animation.store";
+import { useStackCoreContext } from "./core.provider";
 
 export interface DirectStackScene {
 	route: StackNavigationState<ParamListBase>["routes"][number];
@@ -67,6 +68,7 @@ function useDirectStackValue(
 	props: DirectStackProps,
 ): DirectStackContextValue & { stackContextValue: StackContextValue } {
 	const { state, navigation, descriptors, describe } = props;
+	const { flags } = useStackCoreContext();
 
 	const preloadedDescriptors = useMemo(() => {
 		return state.preloadedRoutes.reduce<NativeStackDescriptorMap>(
@@ -156,7 +158,7 @@ function useDirectStackValue(
 
 	const stackContextValue = useMemo<StackContextValue>(
 		() => ({
-			flags: { TRANSITIONS_ALWAYS_ON: false },
+			flags,
 			routeKeys,
 			routes: allRoutes,
 			descriptors: allDescriptors,
@@ -173,6 +175,7 @@ function useDirectStackValue(
 			focusedIndex,
 			stackProgress,
 			optimisticFocusedIndex,
+			flags,
 		],
 	);