react-native-screen-transitions 3.6.0-beta.0 → 3.7.0-alpha.0

package/src/shared/types/screen.types.ts

@@ -43,6 +43,31 @@ export type SnapPoint = number | "auto";
 
 export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
 
+/**
+ * Controls how an inactive screen is retained after it is no longer active.
+ *
+ * - `keep`
+ *   keep inactive screen mounted, attached, visible, not interactive
+ *   RNS: activityState=1, visible=true
+ *   React Activity: mode="visible"
+ *
+ * - `freeze`
+ *   keep last painted UI visible but stop/suspend inactive work where platform allows
+ *   RNS: activityState=1, visible=true, maybe freezeOnBlur/shouldFreeze later
+ *   React Activity: mode="hidden" with paint preserved
+ *
+ * - `detach`
+ *   remove inactive screen from native/view presentation after safe paint
+ *   RNS: activityState=0, visible=false
+ *   React Activity: mode="hidden" + display none, or equivalent
+ *
+ * - `unmount`
+ *   actually remove React subtree when the inactive screen is safe to remove
+ *   RNS native: only after safe paint for non-nested screens
+ *   web: return null
+ */
+export type InactiveBehavior = "keep" | "freeze" | "detach" | "unmount";
+
 export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	/**
 	 * Connects this component to custom animated styles defined in screenStyleInterpolator.

package/src/shared/types/stack.types.ts

@@ -18,6 +18,8 @@ export interface BaseStackRoute {
 	params?: object;
 }
 
+export type StackSceneActivity = "active" | "inert" | "inactive" | "closing";
+
 /**
  * Base navigation interface - minimal contract for gesture handling.
  * Both React Navigation helpers and ComponentNavigation satisfy this.
@@ -45,9 +47,16 @@ export interface BaseStackDescriptor<
 	route: TRoute;
 	navigation: TNavigation;
 	options: TOptions;
+	activity?: StackSceneActivity;
 	render?: () => React.JSX.Element | null;
 }
 
+export type StackDescriptorSource<
+	TDescriptor extends BaseStackDescriptor = BaseStackDescriptor,
+> = Omit<TDescriptor, "activity"> & {
+	activity?: StackSceneActivity;
+};
+
 /**
  * Base scene interface - route + descriptor pair.
  * Used by all stack views to iterate over screens.
@@ -57,6 +66,8 @@ export interface BaseStackScene<
 > {
 	route: TDescriptor["route"];
 	descriptor: TDescriptor;
+	previousDescriptor?: TDescriptor;
+	nextDescriptor?: TDescriptor;
 }
 
 /**

package/src/shared/utils/bounds/navigation/zoom/build.ts

@@ -1,7 +1,6 @@
 import { interpolate } from "react-native-reanimated";
 import {
 	EPSILON,
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	VISIBLE_STYLE,
 } from "../../../../constants";
@@ -18,6 +17,10 @@ import {
 	resolveDirectionalDragScale,
 	resolveOpacityRangeTuple,
 } from "../math";
+import {
+	resolveDismissScaleHandoff,
+	resolveRevealGestureHandoff,
+} from "../reveal/math";
 import {
 	ZOOM_DISMISS_SCALE_ORBIT_DEPTH,
 	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
@@ -39,71 +42,30 @@ import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
 
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 
-function resolveZoomGestureHandoff(rawDrag: number) {
-	"worklet";
-
-	const gestureSensitivity = interpolate(rawDrag, [0, 1], [0.7, 0.1], "clamp");
-	const releaseBoost = interpolate(rawDrag, [0, 1], [1, 1.4], "clamp");
-	const releaseSensitivity = interpolate(
-		gestureSensitivity,
-		[0.28, 0.9],
-		[0.7, 1],
-		"clamp",
-	);
-
-	return {
-		gestureSensitivity,
-		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
-	};
-}
-
 function resolveZoomGestureOptions({
 	rawDrag,
-	activeOptions,
+	maxSensitivity,
+	gestureProgressMode,
 }: {
 	rawDrag: number;
-	activeOptions: ScreenTransitionOptions;
+	maxSensitivity: number;
+	gestureProgressMode: ScreenTransitionOptions["gestureProgressMode"];
 }) {
 	"worklet";
 
 	const { gestureSensitivity, gestureReleaseVelocityScale } =
-		resolveZoomGestureHandoff(rawDrag);
+		resolveRevealGestureHandoff({
+			rawDrag,
+			maxSensitivity,
+		});
 
 	return {
-		gestureProgressMode: activeOptions.gestureProgressMode ?? "freeform",
-		gestureSensitivity: activeOptions.gestureSensitivity ?? gestureSensitivity,
-		gestureReleaseVelocityScale:
-			activeOptions.gestureReleaseVelocityScale ?? gestureReleaseVelocityScale,
+		gestureProgressMode,
+		gestureSensitivity,
+		gestureReleaseVelocityScale,
 	};
 }
 
-function resolveZoomDismissScaleHandoff({
-	progress,
-	releaseScale,
-	targetScale,
-	rawDrag,
-}: {
-	progress: number;
-	releaseScale: number;
-	targetScale: number;
-	rawDrag: number;
-}) {
-	"worklet";
-
-	const closeProgress = 1 - progress;
-	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
-	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
-	const orbitDepth = interpolate(
-		rawDrag,
-		[0, 1],
-		[0, ZOOM_DISMISS_SCALE_ORBIT_DEPTH],
-		"clamp",
-	);
-	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
-
-	return baseScale * orbitScale;
-}
-
 /* -------------------------------------------------------------------------- */
 /*                             BUILD ZOOM STYLES                              */
 /* -------------------------------------------------------------------------- */
@@ -168,9 +130,11 @@ export function buildZoomStyles({
 			style: VISIBLE_STYLE,
 		},
 	} satisfies TransitionInterpolatedStyle;
-	const focusedContentSlot = props.current.options.navigationMaskEnabled
-		? NAVIGATION_MASK_CONTAINER_STYLE_ID
-		: "content";
+	const navigationMaskEnabled = props.current.options.navigationMaskEnabled;
+	const maxSensitivity = zoomOptions?.maxSensitivity ?? 0.8;
+	const velocityDepth =
+		zoomOptions?.velocityDepth ?? ZOOM_DISMISS_SCALE_ORBIT_DEPTH;
+	const gestureProgressMode = zoomOptions?.gestureProgressMode ?? "freeform";
 
 	/* --------------------------- Gesture / Drag Values ------------------------- */
 
@@ -238,16 +202,18 @@ export function buildZoomStyles({
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 	const dragScale = combineScales(dragXScale, dragYScale);
 	const handoffDragScale = props.active.gesture.dismissing
-		? resolveZoomDismissScaleHandoff({
+		? resolveDismissScaleHandoff({
 				progress: props.active.progress,
 				releaseScale: dragScale,
 				targetScale: 1,
-				rawDrag,
+				velocity: props.active.gesture.velocity,
+				velocityDepth,
 			})
 		: dragScale;
 	const zoomGestureOptions = resolveZoomGestureOptions({
 		rawDrag,
-		activeOptions: props.active.options,
+		maxSensitivity,
+		gestureProgressMode,
 	});
 
 	/* ----------------------------- Focused Screen ----------------------------- */
@@ -301,11 +267,32 @@ export function buildZoomStyles({
 		const maskWidth = Math.max(1, toNumber(maskRaw.width) + left + right);
 		const maskHeight = Math.max(1, toNumber(maskRaw.height) + top + bottom);
 
-		const contentTranslateX = toNumber(contentRaw.translateX) + dragX;
-		const contentTranslateY = toNumber(contentRaw.translateY) + dragY;
-		const contentScale = contentRaw.scale * handoffDragScale;
-		const maskTranslateX = maskRaw.translateX + dragX - left;
-		const maskTranslateY = maskRaw.translateY + dragY - top;
+		const contentBaseTranslateX = toNumber(contentRaw.translateX);
+		const contentBaseTranslateY = toNumber(contentRaw.translateY);
+		const contentBaseScale = toNumber(contentRaw.scale, 1);
+		const safeContentBaseScale =
+			Math.abs(contentBaseScale) > EPSILON ? contentBaseScale : 1;
+		const contentTranslateX = contentBaseTranslateX + dragX;
+		const contentTranslateY = contentBaseTranslateY + dragY;
+		const contentScale = contentBaseScale * handoffDragScale;
+
+		const maskBaseTranslateX = toNumber(maskRaw.translateX) - left;
+		const maskBaseTranslateY = toNumber(maskRaw.translateY) - top;
+		const maskCenterX = maskWidth / 2;
+		const maskCenterY = maskHeight / 2;
+		const contentCenterX = screenLayout.width / 2;
+		const contentCenterY = screenLayout.height / 2;
+		const compensatedMaskTranslateX =
+			(maskBaseTranslateX -
+				contentBaseTranslateX +
+				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+			safeContentBaseScale;
+		const compensatedMaskTranslateY =
+			(maskBaseTranslateY -
+				contentBaseTranslateY +
+				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+			safeContentBaseScale;
+		const compensatedMaskScale = 1 / safeContentBaseScale;
 
 		const focusedContentStyle = {
 			opacity: zoomOptions?.debug ? 0.5 : focusedFade,
@@ -314,27 +301,31 @@ export function buildZoomStyles({
 				{ translateY: contentTranslateY },
 				{ scale: contentScale },
 			],
-			borderRadius: focusedMaskBorderRadius,
-			overflow: "hidden" as const,
+			...(navigationMaskEnabled
+				? {}
+				: {
+						borderRadius: focusedMaskBorderRadius,
+						overflow: "hidden" as const,
+					}),
 		};
 
 		const focusedStyles: ZoomInterpolatedStyle = {
-			[focusedContentSlot]: {
+			content: {
 				style: focusedContentStyle,
 			},
 			...sourceVisibilityStyle,
 		};
 
-		if (props.current.options.navigationMaskEnabled) {
+		if (navigationMaskEnabled) {
 			focusedStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] = {
 				style: {
 					width: maskWidth,
 					height: maskHeight,
 					borderRadius: focusedMaskBorderRadius,
 					transform: [
-						{ translateX: maskTranslateX },
-						{ translateY: maskTranslateY },
-						{ scale: handoffDragScale },
+						{ translateX: compensatedMaskTranslateX },
+						{ translateY: compensatedMaskTranslateY },
+						{ scale: compensatedMaskScale },
 					],
 				},
 			};

package/src/shared/utils/bounds/navigation/zoom/config.ts

@@ -9,7 +9,7 @@ export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
 export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
-export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.8;
+export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const ZOOM_BACKGROUND_SCALE = 0.9375;
 export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.5, 0, 1] as const;
 export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [0.6, 1, 0, 1] as const;

package/src/shared/utils/create-provider.tsx

@@ -6,12 +6,82 @@
 import {
 	createContext,
 	type ReactNode,
+	useCallback,
 	useContext,
+	useLayoutEffect,
 	useMemo,
 	useRef,
+	useSyncExternalStore,
 } from "react";
 
-type InnerProviderComponent = (props: { children: ReactNode }) => ReactNode;
+type InnerProviderComponent = React.FC<{ children: ReactNode }>;
+
+type ProviderSnapshot<
+	ContextValue,
+	Guarded extends boolean,
+> = Guarded extends true ? ContextValue : ContextValue | null;
+
+type ProviderSelector<ContextValue, Guarded extends boolean, Selected> = (
+	value: ProviderSnapshot<ContextValue, Guarded>,
+) => Selected;
+
+type ProviderStoreHook<ContextValue, Guarded extends boolean> = {
+	(): ProviderSnapshot<ContextValue, Guarded>;
+	<Selected>(
+		selector: ProviderSelector<ContextValue, Guarded, Selected>,
+	): Selected;
+};
+
+type ProviderOptionalStoreHook<ContextValue> = {
+	(): ContextValue | null;
+	<Selected>(selector: (value: ContextValue | null) => Selected): Selected;
+};
+
+export interface ProviderStoreApi<ContextValue> {
+	getSnapshot: () => ContextValue | null;
+	subscribe: (listener: () => void) => () => void;
+}
+
+interface MutableProviderStoreApi<ContextValue>
+	extends ProviderStoreApi<ContextValue> {
+	notify: () => void;
+	setSnapshot: (snapshot: ContextValue | null) => boolean;
+}
+
+const NullProviderStore: ProviderStoreApi<never> = {
+	getSnapshot: () => null,
+	subscribe: () => () => {},
+};
+
+const createProviderStore = <ContextValue,>(
+	initialSnapshot: ContextValue | null,
+): MutableProviderStoreApi<ContextValue> => {
+	let snapshot = initialSnapshot;
+	const listeners = new Set<() => void>();
+
+	return {
+		getSnapshot: () => snapshot,
+		notify: () => {
+			for (const listener of listeners) {
+				listener();
+			}
+		},
+		setSnapshot: (nextSnapshot) => {
+			if (Object.is(snapshot, nextSnapshot)) {
+				return false;
+			}
+
+			snapshot = nextSnapshot;
+			return true;
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+	};
+};
 
 export default function createProvider<
 	ProviderName extends string,
@@ -31,10 +101,17 @@ export default function createProvider<
 		},
 	) => {
 		const { guarded = true } = options ?? {};
+		const providerDisplayName = `${name}Provider`;
+		const innerProviderDisplayName = `${name}InnerProvider`;
 
 		const Context = createContext<ContextValue | null>(null);
 		Context.displayName = name;
 
+		const StoreContext = createContext<ProviderStoreApi<ContextValue> | null>(
+			null,
+		);
+		StoreContext.displayName = `${name}Store`;
+
 		const Provider: React.FC<ProviderProps> = (props) => {
 			const {
 				children = (props as { children?: ReactNode }).children,
@@ -53,20 +130,46 @@ export default function createProvider<
 				[enabled, value],
 			);
 
+			const storeRef = useRef<MutableProviderStoreApi<ContextValue> | null>(
+				null,
+			);
+			const pendingNotifyRef = useRef(false);
+
+			if (storeRef.current === null) {
+				storeRef.current = createProviderStore<ContextValue>(memoValue);
+			}
+			const store = storeRef.current;
+
+			pendingNotifyRef.current =
+				store.setSnapshot(memoValue) || pendingNotifyRef.current;
+
+			useLayoutEffect(() => {
+				if (!pendingNotifyRef.current) {
+					return;
+				}
+
+				pendingNotifyRef.current = false;
+				store.notify();
+			});
+
 			// Per-instance ref ensures InnerProvider reads latest value while keeping
 			// a stable component reference.
 			const valueRef = useRef<ContextValue | null>(memoValue);
 			valueRef.current = memoValue;
 
-			const InnerProvider = useMemo(
-				(): InnerProviderComponent =>
-					({ children }) => (
+			const InnerProvider = useMemo((): InnerProviderComponent => {
+				const NamedInnerProvider: InnerProviderComponent = ({ children }) => (
+					<StoreContext.Provider value={store}>
 						<Context.Provider value={valueRef.current}>
 							{children}
 						</Context.Provider>
-					),
-				[],
-			);
+					</StoreContext.Provider>
+				);
+
+				NamedInnerProvider.displayName = innerProviderDisplayName;
+
+				return NamedInnerProvider;
+			}, [store]);
 
 			if (typeof children === "function") {
 				return children({
@@ -74,8 +177,13 @@ export default function createProvider<
 				} as { [K in ProviderName as `${K}Provider`]: InnerProviderComponent });
 			}
 
-			return <Context.Provider value={memoValue}>{children}</Context.Provider>;
+			return (
+				<StoreContext.Provider value={store}>
+					<Context.Provider value={memoValue}>{children}</Context.Provider>
+				</StoreContext.Provider>
+			);
 		};
+		Provider.displayName = providerDisplayName;
 
 		const useEnhancedContext = (): ContextValue | null => {
 			const context = useContext(Context);
@@ -89,18 +197,85 @@ export default function createProvider<
 			return context;
 		};
 
+		const useStoreSelector = <Selected,>(
+			selector?: (value: ContextValue | null) => Selected,
+		): Selected | ContextValue | null => {
+			const store = useContext(StoreContext);
+			const resolvedStore =
+				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
+			const selectorRef = useRef<typeof selector>(selector);
+			selectorRef.current = selector;
+
+			const getSelectedSnapshot = useCallback(() => {
+				if (guarded && store === null) {
+					throw new Error(
+						`${name} store must be used within a ${name}Provider`,
+					);
+				}
+
+				const snapshot = resolvedStore.getSnapshot();
+
+				if (guarded && snapshot === null) {
+					throw new Error(
+						`${name} store must be used within an enabled ${name}Provider`,
+					);
+				}
+
+				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
+			}, [resolvedStore, store]);
+
+			return useSyncExternalStore(
+				resolvedStore.subscribe,
+				getSelectedSnapshot,
+				getSelectedSnapshot,
+			);
+		};
+
+		const useOptionalStoreSelector = <Selected,>(
+			selector?: (value: ContextValue | null) => Selected,
+		): Selected | ContextValue | null => {
+			const store = useContext(StoreContext);
+			const resolvedStore =
+				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
+			const selectorRef = useRef<typeof selector>(selector);
+			selectorRef.current = selector;
+
+			const getSelectedSnapshot = useCallback(() => {
+				const snapshot = resolvedStore.getSnapshot();
+				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
+			}, [resolvedStore]);
+
+			return useSyncExternalStore(
+				resolvedStore.subscribe,
+				getSelectedSnapshot,
+				getSelectedSnapshot,
+			);
+		};
+
 		return {
 			[`${name}Context`]: Context,
+			[`${name}StoreContext`]: StoreContext,
 			[`${name}Provider`]: Provider,
 			[`use${name}Context`]: useEnhancedContext,
+			[`use${name}Store`]: useStoreSelector,
+			[`use${name}OptionalStore`]: useOptionalStoreSelector,
 		} as {
 			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
+		} & {
+			[P in ProviderName as `${P}StoreContext`]: React.Context<ProviderStoreApi<ContextValue> | null>;
 		} & {
 			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
 		} & {
 			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
 				? ContextValue
 				: ContextValue | null;
+		} & {
+			[P in ProviderName as `use${P}Store`]: ProviderStoreHook<
+				ContextValue,
+				Guarded
+			>;
+		} & {
+			[P in ProviderName as `use${P}OptionalStore`]: ProviderOptionalStoreHook<ContextValue>;
 		};
 	};
 }

package/src/shared/utils/navigation/resolve-scene-neighbors.ts

@@ -4,6 +4,7 @@ interface SceneWithKey {
 }
 
 type IsRouteClosing = (routeKey: string) => boolean;
+type GetRouteClosingOrder = (routeKey: string) => number | undefined;
 
 const findPreviousDescriptor = <T extends SceneWithKey>(
 	scenes: T[],
@@ -45,6 +46,7 @@ export function resolveSceneNeighbors<T extends SceneWithKey>(
 	scenes: T[],
 	sceneIndex: number,
 	isRouteClosing: IsRouteClosing,
+	getRouteClosingOrder?: GetRouteClosingOrder,
 ): {
 	previousDescriptor: T["descriptor"] | undefined;
 	nextDescriptor: T["descriptor"] | undefined;
@@ -69,7 +71,8 @@ export function resolveSceneNeighbors<T extends SceneWithKey>(
 	}
 
 	let nextDescriptor: T["descriptor"] | undefined;
-	let firstClosingAbove: T["descriptor"] | undefined;
+	let latestClosingAbove: T["descriptor"] | undefined;
+	let latestClosingAboveOrder = Number.NEGATIVE_INFINITY;
 
 	for (let i = sceneIndex + 1; i < scenes.length; i++) {
 		const candidate = scenes[i];
@@ -80,13 +83,15 @@ export function resolveSceneNeighbors<T extends SceneWithKey>(
 			break;
 		}
 
-		if (firstClosingAbove === undefined) {
-			firstClosingAbove = candidate.descriptor;
+		const closeOrder = getRouteClosingOrder?.(candidate.route.key) ?? i;
+		if (closeOrder >= latestClosingAboveOrder) {
+			latestClosingAbove = candidate.descriptor;
+			latestClosingAboveOrder = closeOrder;
 		}
 	}
 
 	if (nextDescriptor === undefined) {
-		nextDescriptor = firstClosingAbove;
+		nextDescriptor = latestClosingAbove;
 	}
 
 	const previousDescriptor = findPreviousDescriptor(

package/src/shared/utils/navigation/sync-routes-with-removed.ts

@@ -2,6 +2,8 @@ import type { useClosingRouteKeys } from "../../hooks/navigation/use-closing-rou
 import type { RouteWithKey } from "../../types/stack.types";
 import { composeDescriptors } from "./compose-descriptors";
 
+type ClosingRouteKeys = Set<string> | ReturnType<typeof useClosingRouteKeys>;
+
 type SyncRoutesWithRemovedParams<
 	Route extends RouteWithKey,
 	DescriptorMap extends Record<string, unknown>,
@@ -10,7 +12,36 @@ type SyncRoutesWithRemovedParams<
 	prevDescriptors: DescriptorMap;
 	nextRoutes: Route[];
 	nextDescriptors: DescriptorMap;
-	closingRouteKeys: ReturnType<typeof useClosingRouteKeys>;
+	closingRouteKeys: ClosingRouteKeys;
+};
+
+const addClosingRouteKey = (
+	closingRouteKeys: ClosingRouteKeys,
+	key: string,
+) => {
+	closingRouteKeys.add(key);
+};
+
+const deleteClosingRouteKey = (
+	closingRouteKeys: ClosingRouteKeys,
+	key: string,
+) => {
+	if (closingRouteKeys instanceof Set) {
+		closingRouteKeys.delete(key);
+		return;
+	}
+
+	closingRouteKeys.remove(key);
+};
+
+const getClosingRouteKeyValues = (
+	closingRouteKeys: ClosingRouteKeys,
+): Iterable<string> => {
+	if (closingRouteKeys instanceof Set) {
+		return closingRouteKeys;
+	}
+
+	return closingRouteKeys.ref.current;
 };
 
 /**
@@ -60,16 +91,16 @@ export const syncRoutesWithRemoved = <
 
 		if (nextRouteWasPresent && !previousRouteStillPresent) {
 			// Previous route was removed, mark as closing
-			closingRouteKeys.add(previousFocusedRoute.key);
+			addClosingRouteKey(closingRouteKeys, previousFocusedRoute.key);
 
 			derivedRoutes.push(previousFocusedRoute);
 		} else {
 			// Next route is now active, not closing
-			closingRouteKeys.remove(nextFocusedRoute.key);
+			deleteClosingRouteKey(closingRouteKeys, nextFocusedRoute.key);
 
 			if (!previousRouteStillPresent) {
 				// Previous route needs to be inserted for transition
-				closingRouteKeys.remove(previousFocusedRoute.key);
+				deleteClosingRouteKey(closingRouteKeys, previousFocusedRoute.key);
 
 				const insertIndex = Math.max(derivedRoutes.length - 1, 0);
 				derivedRoutes.splice(insertIndex, 0, previousFocusedRoute);
@@ -77,14 +108,14 @@ export const syncRoutesWithRemoved = <
 		}
 	} else if (nextFocusedRoute) {
 		// Same focused route, ensure it's not marked as closing
-		closingRouteKeys.remove(nextFocusedRoute.key);
+		deleteClosingRouteKey(closingRouteKeys, nextFocusedRoute.key);
 	}
 
 	// Clean up closing keys that are no longer in the route list
 	const activeKeys = new Set(derivedRoutes.map((route) => route.key));
-	for (const key of Array.from(closingRouteKeys.ref.current)) {
+	for (const key of Array.from(getClosingRouteKeyValues(closingRouteKeys))) {
 		if (!activeKeys.has(key)) {
-			closingRouteKeys.remove(key);
+			deleteClosingRouteKey(closingRouteKeys, key);
 		}
 	}
 

package/src/shared/utils/visibility-block-offset.ts

@@ -0,0 +1,4 @@
+export const getVisibilityBlockOffset = (viewportHeight: number): number => {
+	"worklet";
+	return viewportHeight * 2 + 1;
+};