react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.8

package/src/components/overlay/variations/float-overlay.tsx

@@ -1,14 +1,10 @@
-import { useMemo } from "react";
-import { snapDescriptorToIndex } from "../../../animation/snap-to";
-import { useStack } from "../../../hooks/navigation/use-stack";
-import { ScreenAnimationProvider } from "../../../providers/screen/animation";
-import type { BaseDescriptor } from "../../../providers/screen/descriptors";
-import { DescriptorsProvider } from "../../../providers/screen/descriptors";
-import { ScreenOptionsProvider } from "../../../providers/screen/options";
-import { ScreenSlotProvider } from "../../../providers/screen/styles";
-import type { OverlayScreenState } from "../../../types/overlay.types";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useStackCoreStore } from "../../../providers/stack/core.provider";
 
-import { getActiveFloatOverlay } from "../helpers/get-active-overlay";
+import {
+	getFloatOverlayStack,
+	getFloatOverlayTransitions,
+} from "../helpers/get-active-overlay";
 import { OverlayHost } from "./overlay-host";
 
 /**
@@ -16,65 +12,28 @@ import { OverlayHost } from "./overlay-host";
  * Gets routes and descriptors from stack context.
  */
 export function FloatOverlay() {
-	const { scenes, focusedIndex, flags, routes, routeKeys } = useStack();
-
-	const activeOverlay = useMemo(
-		() =>
-			getActiveFloatOverlay(scenes, focusedIndex, flags.TRANSITIONS_ALWAYS_ON),
-		[scenes, focusedIndex, flags.TRANSITIONS_ALWAYS_ON],
+	const scenes = useBlankStackStore((store) => store.scenes);
+	const transitionsAlwaysOn = useStackCoreStore(
+		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
 	);
 
-	const overlayData = useMemo(() => {
-		if (!activeOverlay) return null;
-
-		const { scene, overlayIndex } = activeOverlay;
-		const previous = scenes[overlayIndex - 1]?.descriptor;
-		const current = scene.descriptor;
-		const next = scenes[overlayIndex + 1]?.descriptor;
-		const focusedScene = scenes[focusedIndex] ?? scenes[scenes.length - 1];
-		const focusedDescriptor = focusedScene?.descriptor;
-
-		const overlayScreenState: OverlayScreenState<BaseDescriptor["navigation"]> =
-			{
-				index: routeKeys.indexOf(current.route.key),
-				options: focusedDescriptor?.options ?? {},
-				routes,
-				focusedRoute: focusedScene?.route ?? current.route,
-				focusedIndex,
-				meta: focusedDescriptor?.options?.meta,
-				navigation: current.navigation,
-				snapTo: (index: number) => {
-					snapDescriptorToIndex(current, index);
-				},
-			};
-
-		return {
-			scene,
-			previous,
-			current,
-			next,
-			overlayScreenState,
-		};
-	}, [activeOverlay, scenes, focusedIndex, routeKeys, routes]);
-
-	if (!overlayData) {
+	const overlayStack = getFloatOverlayStack(scenes, transitionsAlwaysOn);
+	if (overlayStack.length === 0) {
 		return null;
 	}
 
-	const { scene, previous, current, next, overlayScreenState } = overlayData;
-
-	return (
-		<DescriptorsProvider current={current} previous={previous} next={next}>
-			<ScreenOptionsProvider>
-				<ScreenAnimationProvider>
-					<ScreenSlotProvider isFloatingOverlay>
-						<OverlayHost
-							scene={scene}
-							overlayScreenState={overlayScreenState}
-						/>
-					</ScreenSlotProvider>
-				</ScreenAnimationProvider>
-			</ScreenOptionsProvider>
-		</DescriptorsProvider>
+	const overlayTransitions = getFloatOverlayTransitions(overlayStack, scenes);
+
+	return overlayTransitions.map(
+		({ scene, activity, driverScene }, layerIndex) => (
+			<OverlayHost
+				key={scene.route.key}
+				scene={scene}
+				driverScene={driverScene}
+				previousOverlayScene={overlayTransitions[layerIndex - 1]?.scene}
+				activity={activity}
+				layerIndex={layerIndex}
+			/>
+		),
 	);
 }

package/src/components/overlay/variations/overlay-host.tsx

@@ -1,52 +1,164 @@
-import { memo, useMemo } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { useDerivedValue } from "react-native-reanimated";
-import type { StackScene } from "../../../hooks/navigation/use-stack";
+import { memo, useMemo, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { useDerivedValue } from "react-native-reanimated";
+import { snapDescriptorToIndex } from "../../../animation/snap-to";
 import { NavigationScreenProvider } from "../../../providers/navigation/navigation-host.provider";
-import { useScreenAnimation } from "../../../providers/screen/animation";
-import type { BaseDescriptor } from "../../../providers/screen/descriptors";
+import { useOptionalScreenAnimationStore } from "../../../providers/screen/animation";
+import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
+import {
+	type ScreenSlotContextValue,
+	useOptionalScreenSlotStore,
+} from "../../../providers/screen/styles/slot.provider";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import type { OverlayProps } from "../../../types/overlay.types";
 import type {
-	OverlayProps,
-	OverlayScreenState,
-} from "../../../types/overlay.types";
+	FloatOverlayActivity,
+	FloatOverlayEntry,
+} from "../helpers/get-active-overlay";
+import {
+	type ReadyOverlayResources,
+	retainReadyOverlayResources,
+} from "../helpers/retain-ready-overlay-resources";
+import { useOverlaySlot } from "../hooks/use-overlay-slot";
 
 type OverlayHostProps = {
-	scene: StackScene;
-	overlayScreenState: OverlayScreenState<BaseDescriptor["navigation"]>;
+	scene: FloatOverlayEntry["scene"];
+	driverScene: FloatOverlayEntry["scene"];
+	previousOverlayScene?: FloatOverlayEntry["scene"];
+	activity: FloatOverlayActivity;
+	layerIndex: number;
 };
 
 export const OverlayHost = memo(function OverlayHost({
 	scene,
-	overlayScreenState,
+	driverScene,
+	previousOverlayScene,
+	activity,
+	layerIndex,
 }: OverlayHostProps) {
-	const OverlayComponent = scene.descriptor.options.overlay;
+	const overlayAnimationStore = useOptionalScreenAnimationStore(
+		scene.route.key,
+	);
+	const driverAnimationStore = useOptionalScreenAnimationStore(
+		driverScene.route.key,
+	);
+	const previousOverlayAnimationStore = useOptionalScreenAnimationStore(
+		previousOverlayScene?.route.key ?? scene.route.key,
+	);
+	const driverSlots = useOptionalScreenSlotStore(driverScene.route.key);
+	const overlayComponentRef = useRef(scene.descriptor.options.overlay);
+	const OverlayComponent = overlayComponentRef.current;
+	const readyResourcesRef = useRef<ReadyOverlayResources | null>(null);
+	readyResourcesRef.current = retainReadyOverlayResources(
+		readyResourcesRef.current,
+		overlayAnimationStore,
+		driverScene,
+		driverAnimationStore,
+		driverSlots,
+	);
+	const readyResources = readyResourcesRef.current;
+
+	if (!OverlayComponent || !readyResources) {
+		return null;
+	}
+
+	return (
+		<ReadyOverlayHost
+			scene={scene}
+			driverScene={readyResources.driverScene}
+			activity={activity}
+			layerIndex={layerIndex}
+			overlayAnimationStore={readyResources.overlayAnimationStore}
+			driverAnimationStore={readyResources.driverAnimationStore}
+			previousOverlayAnimationStore={
+				previousOverlayScene ? previousOverlayAnimationStore : undefined
+			}
+			driverSlots={readyResources.driverSlots}
+			OverlayComponent={OverlayComponent}
+		/>
+	);
+});
+
+type ReadyOverlayHostProps = OverlayHostProps & {
+	overlayAnimationStore: ScreenAnimationContextValue;
+	driverAnimationStore: ScreenAnimationContextValue;
+	previousOverlayAnimationStore?: ScreenAnimationContextValue | null;
+	driverSlots: ScreenSlotContextValue;
+	OverlayComponent: NonNullable<
+		FloatOverlayEntry["scene"]["descriptor"]["options"]["overlay"]
+	>;
+};
 
-	const screenAnimation = useScreenAnimation();
+function ReadyOverlayHost({
+	scene,
+	driverScene,
+	activity,
+	layerIndex,
+	overlayAnimationStore,
+	driverAnimationStore,
+	previousOverlayAnimationStore,
+	driverSlots,
+	OverlayComponent,
+}: ReadyOverlayHostProps) {
+	const { scenes, focusedIndex, routeKeys, routes } = useBlankStackStore();
+	const descriptor = scene.descriptor;
+	const focusedScene = scenes[focusedIndex] ?? scenes[scenes.length - 1];
+	const focusedDescriptor = focusedScene?.descriptor;
+	const { animatedProps, animatedStyle } = useOverlaySlot({
+		overlayAnimationStore,
+		overlayInterpolator: scene.descriptor.options.screenStyleInterpolator,
+		driverAnimationStore,
+		previousOverlayAnimationStore: previousOverlayAnimationStore ?? undefined,
+		driverInterpolator: driverScene.descriptor.options.screenStyleInterpolator,
+		interpolatorReady: driverSlots.interpolatorReady,
+		isIncoming: scene.route.key === driverScene.route.key,
+	});
 	const relativeProgress = useDerivedValue(() => {
 		"worklet";
-		return screenAnimation.get().stackProgress;
+		overlayAnimationStore.screenInterpolatorPropsRevision.get();
+		return overlayAnimationStore.screenInterpolatorProps.get().stackProgress;
 	});
 
-	const overlayProps: OverlayProps<BaseDescriptor["navigation"]> = useMemo(
+	const overlayProps: OverlayProps = useMemo(
 		() => ({
-			...overlayScreenState,
+			route: scene.route,
+			index: routeKeys.indexOf(scene.route.key),
+			options: focusedDescriptor?.options ?? {},
+			routes,
+			focusedRoute: focusedScene?.route ?? scene.route,
+			focusedIndex,
+			meta: focusedDescriptor?.options?.meta,
+			navigation: scene.descriptor.navigation,
+			snapTo: (index: number) => {
+				snapDescriptorToIndex(scene.descriptor, index);
+			},
 			progress: relativeProgress,
 		}),
-		[relativeProgress, overlayScreenState],
+		[
+			scene,
+			focusedDescriptor?.options,
+			focusedIndex,
+			focusedScene?.route,
+			relativeProgress,
+			routeKeys,
+			routes,
+		],
 	);
-
-	if (!OverlayComponent) {
-		return null;
-	}
-
 	return (
 		<Animated.View
-			pointerEvents="box-none"
-			style={[styles.container, styles.floating, StyleSheet.absoluteFill]}
+			animatedProps={animatedProps}
+			pointerEvents={activity === "active" ? "box-none" : "none"}
+			style={[
+				styles.container,
+				styles.floating,
+				StyleSheet.absoluteFill,
+				{ zIndex: 1000 + layerIndex },
+				animatedStyle,
+			]}
 		>
 			<NavigationScreenProvider
-				navigation={scene.descriptor.navigation}
-				route={scene.route}
+				navigation={descriptor.navigation}
+				route={descriptor.route}
 			>
 				<View
 					pointerEvents="box-none"
@@ -57,7 +169,7 @@ export const OverlayHost = memo(function OverlayHost({
 			</NavigationScreenProvider>
 		</Animated.View>
 	);
-});
+}
 
 const styles = StyleSheet.create({
 	overlay: {

package/src/components/screen-container/hooks/use-backdrop-pointer-events.ts

@@ -3,9 +3,7 @@ import { useAnimatedReaction } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import { useScreenOptionsStore } from "../../../providers/screen/options";
-import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import type { BackdropBehavior } from "../../../types/screen.types";
-import { StackType } from "../../../types/stack.types";
 
 interface BackdropPointerEventsResult {
 	pointerEvents: "box-none" | undefined;
@@ -18,15 +16,13 @@ interface BackdropPointerEventsResult {
  *
  * - Runtime interpolator `backdropBehavior` takes precedence
  * - Explicit descriptor `backdropBehavior` option is next
- * - Component stacks default to 'passthrough' (box-none)
- * - Other stacks default to 'block' (undefined = normal touch handling)
+ * - Otherwise defaults to 'block' (undefined = normal touch handling)
  */
 export function useBackdropPointerEvents(): BackdropPointerEventsResult {
 	const screenOptions = useScreenOptionsStore();
 	const descriptorBackdropBehavior = useDescriptorsStore(
 		(store) => store.options.backdropBehavior,
 	);
-	const stackType = useStackCoreStore((store) => store.flags.STACK_TYPE);
 	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
 		BackdropBehavior | undefined
 	>(undefined);
@@ -42,11 +38,8 @@ export function useBackdropPointerEvents(): BackdropPointerEventsResult {
 		[screenOptions],
 	);
 
-	const isComponentStack = stackType === StackType.COMPONENT;
 	const backdropBehavior: BackdropBehavior =
-		runtimeBackdropBehavior ??
-		descriptorBackdropBehavior ??
-		(isComponentStack ? "passthrough" : "block");
+		runtimeBackdropBehavior ?? descriptorBackdropBehavior ?? "block";
 
 	const pointerEvents =
 		backdropBehavior === "passthrough" ? "box-none" : undefined;

package/src/components/screen-container/layers/backdrop.tsx

@@ -24,7 +24,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { isRemovePrevented, requestDismiss } = useNavigationHelpers();
+	const { requestDismiss } = useNavigationHelpers();
 
 	const routeKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -38,7 +38,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	const isGestureDismissEnabled = useDescriptorsStore(
 		(store) => store.options.gestureEnabled !== false,
 	);
-	const canDismiss = isGestureDismissEnabled && !isRemovePrevented;
+	const canDismiss = isGestureDismissEnabled;
 	const transitionSpec = useDescriptorsStore(
 		(store) => store.options.transitionSpec,
 	);

package/src/components/screen-container/layers/content.tsx

@@ -1,17 +1,15 @@
-/** biome-ignore-all lint/style/noNonNullAssertion: <Screen gesture is under the gesture context, so this will always exist.> */
 import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useGestureStore } from "../../../providers/screen/gestures";
+import { useScreenGestureStore } from "../../../providers/screen/gestures";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import type { ScreenContentComponentProps } from "../../../types";
 import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-portal/components/host";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { usesLayerRenderProps } from "./render-component";
-import { SurfaceContainer } from "./surface-container";
 
 type Props = {
 	children: React.ReactNode;
@@ -21,7 +19,7 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const gestureContext = useGestureStore();
+		const gestureContext = useScreenGestureStore();
 		const ContentComponent = useDescriptorsStore(
 			(store) => store.options.contentComponent,
 		);
@@ -57,21 +55,19 @@ export const ContentLayer = memo(
 				pointerEvents={contentPointerEvents}
 				enabled={isNavigationMaskEnabled}
 			>
-				<SurfaceContainer pointerEvents={contentPointerEvents}>
-					{hasAutoSnapPoint ? (
-						<View collapsable={false} onLayout={handleContentLayout}>
-							{children}
-						</View>
-					) : (
-						children
-					)}
-					<ScreenFallbackHost />
-				</SurfaceContainer>
+				{hasAutoSnapPoint ? (
+					<View collapsable={false} onLayout={handleContentLayout}>
+						{children}
+					</View>
+				) : (
+					children
+				)}
+				<ScreenFallbackHost />
 			</MaybeMaskedNavigationContainer>
 		);
 
 		return (
-			<GestureDetector gesture={gestureContext!.detectorGesture}>
+			<GestureDetector gesture={gestureContext.detectorGesture}>
 				{AnimatedContentComponent ? (
 					<AnimatedContentComponent
 						style={contentStyles}

package/src/components/screen-lifecycle/hooks/helpers/close-interception-rules.ts

@@ -34,11 +34,9 @@ const containsRouteKey = (
 export const doesNavigatorOwnCloseAction = ({
 	state,
 	action,
-	isNested,
 }: {
 	state: NavigationStateLike;
 	action: NavigationActionLike;
-	isNested: boolean;
 }): boolean => {
 	if (typeof action.target === "string") {
 		return action.target === state.key;
@@ -48,7 +46,7 @@ export const doesNavigatorOwnCloseAction = ({
 		return containsRouteKey(state.routes, action.source);
 	}
 
-	return !isNested;
+	return true;
 };
 
 /** Only the focused removable route owns a stack close transition. */

package/src/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -2,14 +2,11 @@ import { useLayoutEffect, useMemo, useRef } from "react";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import useStableCallback from "../../../hooks/use-stable-callback";
 import { hasTransitionsEnabled } from "../../../providers/screen/animation/helpers/has-transitions-enabled";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../../providers/screen/descriptors";
+import type { BaseDescriptor } from "../../../providers/screen/descriptors";
+import { useCurrentScreenRelationships } from "../../../providers/screen/use-current-screen-relationships";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import { GestureStore } from "../../../stores/gesture.store";
-import { StackType } from "../../../types/stack.types";
 import {
 	dispatchCloseAction,
 	isCloseActionReplay,
@@ -24,18 +21,16 @@ export function useCloseTransitionIntent(current: BaseDescriptor): {
 	completeClose: () => void;
 } {
 	const routeKey = current.route.key;
-	const { STACK_TYPE: stackType, TRANSITIONS_ALWAYS_ON: transitionsAlwaysOn } =
-		useStackCoreStore((store) => store.flags);
+	const transitionsAlwaysOn = useStackCoreStore(
+		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
+	);
 	const handleCloseRoute = useBlankStackStore(
-		(store) => store?.handleCloseRoute,
+		(store) => store.handleCloseRoute,
 	);
 	const isBlankStackClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[routeKey]?.activity === "closing",
-	);
-	const ancestorKeys = useDescriptorsStore(
-		(store) => store.derivations.ancestorKeys,
+		(store) => store.scenesByKey[routeKey]?.activity === "closing",
 	);
-	const parentScreenKey = ancestorKeys[0];
+	const { parentScreenKey } = useCurrentScreenRelationships();
 	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const pendingActionRef = useRef<any>(null);
 
@@ -59,7 +54,7 @@ export function useCloseTransitionIntent(current: BaseDescriptor): {
 			dispatchCloseAction(pendingAction, (action) => {
 				current.navigation.dispatch(action);
 			});
-		} else if (stackType !== StackType.NATIVE && handleCloseRoute) {
+		} else if (handleCloseRoute) {
 			handleCloseRoute({ route: current.route });
 		} else {
 			dismissScreen();
@@ -81,7 +76,6 @@ export function useCloseTransitionIntent(current: BaseDescriptor): {
 		const ownsAction = doesNavigatorOwnCloseAction({
 			state,
 			action,
-			isNested: ancestorKeys.length > 0,
 		});
 		const shouldIntercept = shouldInterceptClose({
 			enabled: hasTransitionsEnabled(current.options, transitionsAlwaysOn),
@@ -104,10 +98,13 @@ export function useCloseTransitionIntent(current: BaseDescriptor): {
 		event.preventDefault();
 	});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: navigation listener should only rebind when the navigator instance changes
 	useLayoutEffect(() => {
+		if (handleCloseRoute) {
+			return;
+		}
+
 		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
-	}, [current.navigation]);
+	}, [current.navigation, handleBeforeRemove, handleCloseRoute]);
 
 	return { completeClose };
 }

package/src/components/stack-view.tsx

@@ -1,10 +1,5 @@
-import {
-	NavigationContext,
-	type NavigationProp,
-	NavigationRouteContext,
-	type ParamListBase,
-} from "@react-navigation/native";
 import { memo, type ReactNode } from "react";
+import { NavigationScreenProvider } from "../providers/navigation/navigation-host.provider";
 import { ScreenComposer } from "../providers/screen/screen-composer";
 import {
 	BlankStackProvider,
@@ -14,10 +9,6 @@ import {
 	type StackCoreConfig,
 	StackCoreProvider,
 } from "../providers/stack/core.provider";
-import type {
-	BlankStackDescriptor,
-	BlankStackNavigationHelpers,
-} from "../types/blank-stack.types";
 import type { BlankStackProviderProps } from "../types/providers/blank-stack-provider.types";
 import { ActivityContainer, ActivityScreen } from "./activity";
 import { PortalProvider } from "./boundary/portal";
@@ -32,10 +23,10 @@ const BlankNavigationProvider = memo(function BlankNavigationProvider({
 	routeKey,
 }: RouteKeyProps & { children: ReactNode }) {
 	const navigation = useBlankStackStore(
-		(store) => store?.scenesByKey[routeKey]?.descriptor.navigation,
-	) as NavigationProp<ParamListBase> | undefined;
+		(store) => store.scenesByKey[routeKey]?.descriptor.navigation,
+	);
 	const route = useBlankStackStore(
-		(store) => store?.scenesByKey[routeKey]?.route,
+		(store) => store.scenesByKey[routeKey]?.route,
 	);
 
 	if (!navigation || !route) {
@@ -43,11 +34,9 @@ const BlankNavigationProvider = memo(function BlankNavigationProvider({
 	}
 
 	return (
-		<NavigationContext.Provider value={navigation}>
-			<NavigationRouteContext.Provider value={route}>
-				{children}
-			</NavigationRouteContext.Provider>
-		</NavigationContext.Provider>
+		<NavigationScreenProvider navigation={navigation} route={route}>
+			{children}
+		</NavigationScreenProvider>
 	);
 });
 
@@ -79,13 +68,10 @@ const StackViewContent = memo(function StackViewContent() {
 	const routeKeys = useBlankStackStore(
 		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
 	);
-	const shouldShowFloatOverlay = useBlankStackStore(
-		(store) => store?.shouldShowFloatOverlay ?? false,
-	);
 
 	return (
 		<PortalProvider>
-			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+			<Overlay.Float />
 
 			<ActivityContainer>
 				{routeKeys.map((routeKey) => (
@@ -96,17 +82,10 @@ const StackViewContent = memo(function StackViewContent() {
 	);
 });
 
-type StackViewProps = BlankStackProviderProps<
-	BlankStackDescriptor,
-	BlankStackNavigationHelpers
-> &
-	StackCoreConfig;
+type StackViewProps = BlankStackProviderProps & StackCoreConfig;
 
 export const StackView = memo(function StackView({
-	DISABLE_NATIVE_SCREENS,
-	DISABLE_NATIVE_SCREEN_CONTAINER,
 	TRANSITIONS_ALWAYS_ON,
-	STACK_TYPE,
 	state,
 	navigation,
 	descriptors,
@@ -116,9 +95,6 @@ export const StackView = memo(function StackView({
 		<StackCoreProvider
 			config={{
 				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
-				STACK_TYPE,
-				DISABLE_NATIVE_SCREENS: DISABLE_NATIVE_SCREENS ?? false,
-				DISABLE_NATIVE_SCREEN_CONTAINER,
 			}}
 		>
 			<BlankStackProvider

package/src/configs/presets.ts

@@ -281,7 +281,7 @@ export const SharedIGImage = ({
 					id,
 				}).navigation.zoom() ?? {};
 
-			// Extract raw style values from bounds result (legacy format)
+			// Read the bound-specific slots before normalizing the full result.
 			const sourceStyle = navigationStyles[id] as
 				| Record<string, unknown>
 				| undefined;
@@ -292,10 +292,9 @@ export const SharedIGImage = ({
 				| Record<string, unknown>
 				| undefined;
 
-			// Normalize bounds result to new slot format for spreading
 			const normalizedNav = normalizeInterpolatedStyle(
 				navigationStyles as Record<string, any>,
-			).result;
+			);
 
 			if (focused) {
 				return {
@@ -405,8 +404,7 @@ export const SharedAppleMusic = ({
 
 			const normX = active.gesture.handoff.normX;
 			const normY = active.gesture.handoff.normY;
-			const initialGesture =
-				active.gesture.handoff.active ?? active.gesture.handoff.direction;
+			const initialGesture = active.gesture.handoff.active;
 
 			/**
 			 * ===============================
@@ -622,10 +620,9 @@ export const SharedXImage = ({
 				| Record<string, unknown>
 				| undefined;
 
-			// Normalize bounds result to new slot format for spreading
 			const normalizedNav = normalizeInterpolatedStyle(
 				navigationStyles as Record<string, any>,
-			).result;
+			);
 
 			const dragY = interpolate(
 				current.gesture.normY,