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

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

@@ -0,0 +1,64 @@
+interface CloseInterceptionState {
+	enabled: boolean;
+	ownsAction: boolean;
+	ancestorDismissing: boolean;
+	routeIndex: number;
+	focusedIndex: number;
+}
+
+interface NavigationRouteLike {
+	key: string;
+	state?: NavigationStateLike;
+}
+
+interface NavigationStateLike {
+	key?: string;
+	routes: NavigationRouteLike[];
+}
+
+interface NavigationActionLike {
+	source?: unknown;
+	target?: unknown;
+}
+
+const containsRouteKey = (
+	routes: NavigationRouteLike[],
+	routeKey: string,
+): boolean =>
+	routes.some(
+		(route) =>
+			route.key === routeKey ||
+			(route.state ? containsRouteKey(route.state.routes, routeKey) : false),
+	);
+
+export const doesNavigatorOwnCloseAction = ({
+	state,
+	action,
+}: {
+	state: NavigationStateLike;
+	action: NavigationActionLike;
+}): boolean => {
+	if (typeof action.target === "string") {
+		return action.target === state.key;
+	}
+
+	if (typeof action.source === "string") {
+		return containsRouteKey(state.routes, action.source);
+	}
+
+	return true;
+};
+
+/** Only the focused removable route owns a stack close transition. */
+export const shouldInterceptClose = ({
+	enabled,
+	ownsAction,
+	ancestorDismissing,
+	routeIndex,
+	focusedIndex,
+}: CloseInterceptionState) =>
+	enabled &&
+	ownsAction &&
+	!ancestorDismissing &&
+	routeIndex > 0 &&
+	routeIndex === focusedIndex;

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

@@ -0,0 +1,25 @@
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+export const useCloseCompletion = ({
+	closing,
+	animationProgress,
+	onComplete,
+}: {
+	closing: SharedValue<number>;
+	animationProgress: SharedValue<number>;
+	onComplete: () => void;
+}) => {
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return !!closing.get() && animationProgress.get() <= 0;
+		},
+		(complete, previouslyComplete) => {
+			"worklet";
+			if (complete && !previouslyComplete) {
+				scheduleOnRN(onComplete);
+			}
+		},
+	);
+};

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

@@ -1,75 +1,37 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per navigator */
 import { useLayoutEffect, useMemo, useRef } from "react";
+import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import useStableCallback from "../../../hooks/use-stable-callback";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../../providers/screen/descriptors";
+import { hasTransitionsEnabled } from "../../../providers/screen/animation/helpers/has-transitions-enabled";
+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 {
-	LifecycleTransitionRequestKind,
-	type SystemStoreActions,
-	type SystemStoreMap,
-} from "../../../stores/system.store";
-import { StackType } from "../../../types/stack.types";
+	dispatchCloseAction,
+	isCloseActionReplay,
+} from "../../../utils/navigation/close-action-replay";
+import {
+	doesNavigatorOwnCloseAction,
+	shouldInterceptClose,
+} from "./helpers/close-interception-rules";
 import { resetStoresForScreen } from "./helpers/reset-stores-for-screen";
 
-interface CloseHookParams {
-	current: BaseDescriptor;
-	requestLifecycleTransition: SystemStoreActions["requestLifecycleTransition"];
-	resetStores: () => void;
-}
-
-const useBlankStackClose = ({
-	current,
-	requestLifecycleTransition,
-	resetStores,
-}: CloseHookParams) => {
+export function useCloseTransitionIntent(current: BaseDescriptor): {
+	completeClose: () => void;
+} {
+	const routeKey = current.route.key;
+	const transitionsAlwaysOn = useStackCoreStore(
+		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
+	);
 	const handleCloseRoute = useBlankStackStore(
-		(store) => store?.handleCloseRoute,
+		(store) => store.handleCloseRoute,
 	);
-	const isClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[current.route.key]?.activity === "closing",
-	);
-
-	useLayoutEffect(() => {
-		if (!isClosing) {
-			return;
-		}
-
-		requestLifecycleTransition(
-			LifecycleTransitionRequestKind.BlankStackClose,
-			0,
-		);
-	}, [isClosing, requestLifecycleTransition]);
-
-	const handleBlankStackCloseEnd = useStableCallback((finished: boolean) => {
-		if (!finished) return;
-		if (!handleCloseRoute) {
-			throw new Error("Blank stack close handler was not found.");
-		}
-		handleCloseRoute({ route: current.route });
-		requestAnimationFrame(() => {
-			resetStores();
-		});
-	});
-
-	return { handleBlankStackCloseEnd };
-};
-
-/**
- * Native stack close - listens to beforeRemove navigation event.
- */
-const useNativeStackClose = ({
-	current,
-	requestLifecycleTransition,
-	resetStores,
-}: CloseHookParams) => {
-	const parentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.parentScreenKey,
+	const isBlankStackClosing = useBlankStackStore(
+		(store) => store.scenesByKey[routeKey]?.activity === "closing",
 	);
+	const { parentScreenKey } = useCurrentScreenRelationships();
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const pendingActionRef = useRef<any>(null);
 
 	const nearestAncestorDismissing = useMemo(() => {
@@ -78,76 +40,71 @@ const useNativeStackClose = ({
 		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
 	}, [parentScreenKey]);
 
-	const handleNativeCloseEnd = useStableCallback((finished: boolean) => {
-		if (!finished || !pendingActionRef.current) {
-			pendingActionRef.current = null;
-			return;
+	useLayoutEffect(() => {
+		if (isBlankStackClosing) {
+			requestDismiss();
 		}
+	}, [isBlankStackClosing, requestDismiss]);
 
-		current.navigation.dispatch(pendingActionRef.current);
+	const completeClose = useStableCallback(() => {
+		const pendingAction = pendingActionRef.current;
 		pendingActionRef.current = null;
-		requestAnimationFrame(() => {
-			resetStores();
-		});
+
+		if (pendingAction) {
+			dispatchCloseAction(pendingAction, (action) => {
+				current.navigation.dispatch(action);
+			});
+		} else if (handleCloseRoute) {
+			handleCloseRoute({ route: current.route });
+		} else {
+			dismissScreen();
+		}
+
+		resetStoresForScreen(routeKey);
 	});
 
-	const handleBeforeRemove = useStableCallback((e: any) => {
-		const options = current.options as { enableTransitions?: boolean };
-		const isEnabled = options.enableTransitions;
-		const navigation = current.navigation;
-		const routeKey = current.route.key;
-		const state = navigation.getState();
+	const handleBeforeRemove = useStableCallback((event: any) => {
+		if (isCloseActionReplay(event.data.action)) {
+			return;
+		}
+
+		const state = current.navigation.getState();
 		const routeIndex = state.routes.findIndex(
 			(route) => route.key === routeKey,
 		);
-		const isFirstScreen = routeIndex <= 0;
+		const action = event.data.action;
+		const ownsAction = doesNavigatorOwnCloseAction({
+			state,
+			action,
+		});
+		const shouldIntercept = shouldInterceptClose({
+			enabled: hasTransitionsEnabled(current.options, transitionsAlwaysOn),
+			ownsAction,
+			ancestorDismissing: !!nearestAncestorDismissing?.get(),
+			routeIndex,
+			focusedIndex: state.index,
+		});
 
-		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
-			resetStores();
+		if (!shouldIntercept) {
 			return;
 		}
 
-		e.preventDefault();
-		pendingActionRef.current = e.data.action;
-		requestLifecycleTransition(LifecycleTransitionRequestKind.NativeClose, 0);
-	});
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: navigation listener should only rebind when the navigator instance changes
-	useLayoutEffect(() => {
-		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
-	}, [current.navigation]);
-
-	return { handleNativeCloseEnd };
-};
-
-/**
- * Handles close transition intent and returns finish callbacks for cleanup.
- */
-export function useCloseTransitionIntent(
-	current: BaseDescriptor,
-	system: SystemStoreMap,
-): {
-	handleBlankStackCloseEnd?: (finished: boolean) => void;
-	handleNativeCloseEnd?: (finished: boolean) => void;
-} {
-	const routeKey = current.route.key;
-	const stackType = useStackCoreStore((store) => store.flags.STACK_TYPE);
-	const isNativeStack = stackType === StackType.NATIVE;
-	const { requestLifecycleTransition } = system.actions;
+		pendingActionRef.current ??= event.data.action;
+		if (!requestDismiss()) {
+			pendingActionRef.current = null;
+			return;
+		}
 
-	const resetStores = useStableCallback(() => {
-		resetStoresForScreen(routeKey);
+		event.preventDefault();
 	});
 
-	const closeParams: CloseHookParams = {
-		current,
-		requestLifecycleTransition,
-		resetStores,
-	};
+	useLayoutEffect(() => {
+		if (handleCloseRoute) {
+			return;
+		}
 
-	if (isNativeStack) {
-		return useNativeStackClose(closeParams);
-	}
+		return current.navigation.addListener?.("beforeRemove", handleBeforeRemove);
+	}, [current.navigation, handleBeforeRemove, handleCloseRoute]);
 
-	return useBlankStackClose(closeParams);
+	return { completeClose };
 }

package/src/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -12,14 +12,10 @@ export const useTransitionStartController = ({
 	current,
 	animations,
 	system,
-	onBlankStackCloseFinish,
-	onNativeCloseFinish,
 }: {
 	current: BaseDescriptor;
 	animations: AnimationStoreMap;
 	system: SystemStoreMap;
-	onBlankStackCloseFinish?: (finished: boolean) => void;
-	onNativeCloseFinish?: (finished: boolean) => void;
 }) => {
 	const {
 		targetProgress,
@@ -53,13 +49,6 @@ export const useTransitionStartController = ({
 				return;
 			}
 
-			const onAnimationFinish =
-				kind === LifecycleTransitionRequestKind.BlankStackClose
-					? onBlankStackCloseFinish
-					: kind === LifecycleTransitionRequestKind.NativeClose
-						? onNativeCloseFinish
-						: undefined;
-
 			animateToProgress({
 				target,
 				spec: transitionSpec,
@@ -69,7 +58,6 @@ export const useTransitionStartController = ({
 				animations,
 				targetProgress,
 				animationProgress,
-				onAnimationFinish,
 				isDragging,
 			});
 

package/src/components/screen-lifecycle/index.tsx

@@ -2,6 +2,7 @@ import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import { AnimationStore } from "../../stores/animation.store";
 import { SystemStore } from "../../stores/system.store";
 import { useScreenHistory } from "./hooks/history/use-screen-history";
+import { useCloseCompletion } from "./hooks/use-close-completion";
 import { useCloseTransitionIntent } from "./hooks/use-close-transition-intent";
 import { useOpenTransitionIntent } from "./hooks/use-open-transition-intent";
 import { useTransitionStartController } from "./hooks/use-transition-start-controller";
@@ -21,8 +22,7 @@ export const ScreenLifecycle = ({ children }: Props) => {
 	const animations = AnimationStore.getBag(current.route.key);
 	const system = SystemStore.getBag(current.route.key);
 
-	const { handleBlankStackCloseEnd, handleNativeCloseEnd } =
-		useCloseTransitionIntent(current, system);
+	const { completeClose } = useCloseTransitionIntent(current);
 
 	useOpenTransitionIntent(current, animations, system);
 
@@ -30,8 +30,12 @@ export const ScreenLifecycle = ({ children }: Props) => {
 		current,
 		animations,
 		system,
-		onBlankStackCloseFinish: handleBlankStackCloseEnd,
-		onNativeCloseFinish: handleNativeCloseEnd,
+	});
+
+	useCloseCompletion({
+		closing: animations.closing,
+		animationProgress: system.animationProgress,
+		onComplete: completeClose,
 	});
 
 	useScreenHistory(current, previous, animations);

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,

package/src/constants.ts

@@ -13,13 +13,6 @@ import type {
 } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
-/**
- * Masked view integration
- * @deprecated No longer in use. Use {@link NAVIGATION_MASK_ELEMENT_STYLE_ID} and {@link NAVIGATION_MASK_CONTAINER_STYLE_ID} instead.
- */
-export const MASK_STYLE_ID = "_ROOT_MASKED";
-export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
-
 /**
  * Navigation mask integration
  */
@@ -65,20 +58,11 @@ const DEFAULT_GESTURE_VALUES = {
 		pinchOriginY: 0,
 		raw: DEFAULT_RAW_GESTURE_VALUES,
 		active: null,
-		direction: null,
 	},
 	dismissing: 0,
 	dragging: 0,
 	settling: 0,
-	active: null,
 	initiator: "none",
-	direction: null,
-
-	// Deprecated aliases
-	normalizedX: 0,
-	normalizedY: 0,
-	isDismissing: 0,
-	isDragging: 0,
 } as const;
 
 const createDefaultGestureValues = () => ({
@@ -107,7 +91,6 @@ export const createScreenTransitionState = (
 	animating: 0,
 	willAnimate: 0,
 	settled: 1,
-	logicallySettled: 1,
 	entering: 0,
 	gesture: createDefaultGestureValues(),
 	route,
@@ -134,7 +117,6 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		animating: 0,
 		willAnimate: 0,
 		settled: 1,
-		logicallySettled: 1,
 		entering: 0,
 		gesture: createDefaultGestureValues(),
 		route: {} as RouteProp<ParamListBase>,