react-native-screen-transitions 3.7.0 → 3.8.0-alpha.0

package/src/shared/providers/screen/options/helpers.ts

@@ -14,7 +14,9 @@ import type {
 	ActivationArea,
 	GestureActivationArea,
 	GestureDirection,
-	ScreenTransitionOptions,
+	GestureDirectionActivationArea,
+	GestureDirectionEntry,
+	ScreenTransitionConfig,
 	TransitionInterpolatedStyle,
 } from "../../../types";
 import type { BackdropBehavior } from "../../../types/screen.types";
@@ -31,22 +33,6 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-const cloneGestureDirection = (
-	direction: RequiredScreenOption<"gestureDirection">,
-) => {
-	"worklet";
-	return Array.isArray(direction) ? [...direction] : direction;
-};
-
-const cloneGestureActivationArea = (
-	activationArea: RequiredScreenOption<"gestureActivationArea">,
-) => {
-	"worklet";
-	return typeof activationArea === "object" && activationArea !== null
-		? { ...activationArea }
-		: activationArea;
-};
-
 const resolveBooleanOption = <T extends boolean | undefined>(
 	value: unknown,
 	fallback: T,
@@ -78,18 +64,68 @@ const isGestureDirection = (value: unknown): value is GestureDirection => {
 	);
 };
 
+const isGestureDirectionActivationArea = (
+	value: unknown,
+): value is GestureDirectionActivationArea => {
+	"worklet";
+	return (
+		value === "edge" ||
+		value === "screen" ||
+		(typeof value === "number" && Number.isFinite(value) && value >= 0)
+	);
+};
+
+const isGestureDirectionEntry = (
+	value: unknown,
+): value is GestureDirectionEntry => {
+	"worklet";
+	if (isGestureDirection(value)) {
+		return true;
+	}
+
+	if (typeof value !== "object" || value === null || Array.isArray(value)) {
+		return false;
+	}
+
+	const config = value as Record<string, unknown>;
+	return (
+		isGestureDirection(config.gesture) &&
+		(config.area === undefined || isGestureDirectionActivationArea(config.area))
+	);
+};
+
+const cloneGestureDirectionEntry = (
+	entry: GestureDirectionEntry,
+): GestureDirectionEntry => {
+	"worklet";
+	if (typeof entry === "string") {
+		return entry;
+	}
+
+	return entry.area === undefined
+		? { gesture: entry.gesture }
+		: { gesture: entry.gesture, area: entry.area };
+};
+
 const resolveGestureDirectionOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"gestureDirection">,
 ): RequiredScreenOption<"gestureDirection"> => {
 	"worklet";
-	if (isGestureDirection(value)) {
-		return value;
+	if (isGestureDirectionEntry(value)) {
+		return cloneGestureDirectionEntry(value);
 	}
-	if (Array.isArray(value) && value.every(isGestureDirection)) {
-		return [...value];
+	if (Array.isArray(value)) {
+		const entries: GestureDirectionEntry[] = [];
+		for (const entry of value) {
+			if (!isGestureDirectionEntry(entry)) {
+				return fallback;
+			}
+			entries.push(cloneGestureDirectionEntry(entry));
+		}
+		return entries;
 	}
-	return cloneGestureDirection(fallback);
+	return fallback;
 };
 
 const isActivationArea = (value: unknown): value is ActivationArea => {
@@ -114,7 +150,7 @@ const resolveGestureActivationAreaOption = (
 			(area.bottom === undefined || isActivationArea(area.bottom));
 		return isValid ? (area as GestureActivationArea) : fallback;
 	}
-	return cloneGestureActivationArea(fallback);
+	return fallback;
 };
 
 const resolveSheetScrollGestureBehaviorOption = (
@@ -193,17 +229,37 @@ const areGestureActivationAreasEqual = (
 	);
 };
 
+const areGestureDirectionEntriesEqual = (
+	left: GestureDirectionEntry,
+	right: GestureDirectionEntry,
+) => {
+	"worklet";
+	if (left === right) return true;
+
+	if (typeof left === "string" || typeof right === "string") {
+		return false;
+	}
+
+	return left.gesture === right.gesture && left.area === right.area;
+};
+
 const areGestureDirectionsEqual = (
 	left: RequiredScreenOption<"gestureDirection">,
 	right: RequiredScreenOption<"gestureDirection">,
 ) => {
 	"worklet";
-	if (left === right) return true;
+	if (
+		!Array.isArray(left) &&
+		!Array.isArray(right) &&
+		areGestureDirectionEntriesEqual(left, right)
+	) {
+		return true;
+	}
 	if (!Array.isArray(left) || !Array.isArray(right)) return false;
 	if (left.length !== right.length) return false;
 
 	for (let i = 0; i < left.length; i++) {
-		if (left[i] !== right[i]) {
+		if (!areGestureDirectionEntriesEqual(left[i], right[i])) {
 			return false;
 		}
 	}
@@ -235,12 +291,13 @@ const areScreenOptionsEqual = (
 		left.gestureSnapLocked === right.gestureSnapLocked &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
+		left.transitionSpec === right.transitionSpec &&
 		left.baseOptions === right.baseOptions
 	);
 };
 
 export const resolveBaseScreenOptions = (
-	options: ScreenTransitionOptions,
+	options: ScreenTransitionConfig,
 ): ScreenOptionsSnapshot => {
 	const gestureProgressMode = resolveGestureProgressModeOption(
 		options.gestureProgressMode,
@@ -301,6 +358,7 @@ export const resolveBaseScreenOptions = (
 			options.backdropBehavior,
 			undefined,
 		),
+		transitionSpec: options.transitionSpec,
 	};
 };
 
@@ -311,10 +369,6 @@ export const syncScreenOptionsBase = (
 	"worklet";
 	const next = {
 		...base,
-		gestureDirection: cloneGestureDirection(base.gestureDirection),
-		gestureActivationArea: cloneGestureActivationArea(
-			base.gestureActivationArea,
-		),
 		baseOptions: base,
 	};
 
@@ -386,6 +440,7 @@ export const syncScreenOptionsOverrides = (
 			options?.backdropBehavior,
 			base.backdropBehavior,
 		),
+		transitionSpec: base.transitionSpec,
 		baseOptions: base,
 	};
 

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

@@ -1,12 +1,12 @@
 import type { ReactNode } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { ScreenTransitionOptions } from "../../../types";
+import type { ScreenTransitionConfig } from "../../../types";
 
 export type RuntimeOption<T> = SharedValue<T>;
-export type RequiredScreenOption<K extends keyof ScreenTransitionOptions> =
-	NonNullable<ScreenTransitionOptions[K]>;
-export type OptionalScreenOption<K extends keyof ScreenTransitionOptions> =
-	ScreenTransitionOptions[K];
+export type RequiredScreenOption<K extends keyof ScreenTransitionConfig> =
+	NonNullable<ScreenTransitionConfig[K]>;
+export type OptionalScreenOption<K extends keyof ScreenTransitionConfig> =
+	ScreenTransitionConfig[K];
 
 export type ScreenOptionsSnapshot = {
 	navigationMaskEnabled: OptionalScreenOption<"navigationMaskEnabled">;
@@ -24,6 +24,7 @@ export type ScreenOptionsSnapshot = {
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;
+	transitionSpec: OptionalScreenOption<"transitionSpec">;
 };
 
 export type ScreenOptionsState = ScreenOptionsSnapshot & {

package/src/shared/providers/screen/styles/components/{maybe-floating-container.tsx → floating-overlay-layer.tsx}

@@ -1,15 +1,15 @@
 import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 
-interface MaybeFloatingContainerProps {
+interface FloatingOverlayLayerProps {
 	children: React.ReactNode;
-	isFloatingOverlay?: boolean;
+	enabled?: boolean;
 }
-export const MaybeFloatingContainer = memo(function MaybeFloatingContainer({
+export const FloatingOverlayLayer = memo(function FloatingOverlayLayer({
 	children,
-	isFloatingOverlay,
-}: MaybeFloatingContainerProps) {
-	if (!isFloatingOverlay) {
+	enabled,
+}: FloatingOverlayLayerProps) {
+	if (!enabled) {
 		return children;
 	}
 	return (

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

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
-import { MaybeFloatingContainer } from "./components/maybe-floating-container";
+import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
 import { useInterpolatedStylesMap } from "./hooks/use-interpolated-style-maps";
 import { useMaybeBlockVisibility } from "./hooks/use-maybe-block-visibility";
 import { useResolvedStylesMap } from "./hooks/use-resolved-slot-style-map";
@@ -41,14 +41,14 @@ export const {
 			stylesMap,
 		},
 		children: (
-			<MaybeFloatingContainer isFloatingOverlay={isFloatingOverlay}>
+			<FloatingOverlayLayer enabled={isFloatingOverlay}>
 				<Animated.View
 					style={[styles.container, animatedStyle]}
 					animatedProps={animatedProps}
 				>
 					{children}
 				</Animated.View>
-			</MaybeFloatingContainer>
+			</FloatingOverlayLayer>
 		),
 	};
 });

package/src/shared/providers/stack/{helpers/managed-stack-state/managed-stack-controller.ts → blank-stack-state/blank-stack-controller.ts}

@@ -1,42 +1,42 @@
 import { StackActions } from "@react-navigation/native";
-import type { ManagedStackProps } from "../../../../types/providers/managed-stack.types";
+import type { BlankStackProviderProps } from "../../../types/providers/blank-stack-provider.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
 	BaseStackRoute,
-} from "../../../../types/stack.types";
-import { buildManagedStackState } from "./helpers/build-managed-stack-state";
-import { deriveManagedStackState } from "./helpers/derive-managed-stack-state";
+} from "../../../types/stack.types";
+import { buildBlankStackState } from "./helpers/build-blank-stack-state";
+import { deriveBlankStackState } from "./helpers/derive-blank-stack-state";
 import type {
-	ManagedDescriptorSources,
-	ManagedStackControllerSnapshot,
-	ManagedStackController as ManagedStackControllerType,
+	BlankStackControllerSnapshot,
+	BlankStackController as BlankStackControllerType,
+	BlankStackDescriptorSources,
 } from "./helpers/types";
 
-export type { ManagedStackController } from "./helpers/types";
+export type { BlankStackController } from "./helpers/types";
 
 /**
- * Maintains the stack-local route snapshot used while managed transitions run.
+ * Maintains the stack-local route snapshot used while blank stack transitions run.
  *
  * React Navigation remains the source of truth for settled routes, but it can
  * remove descriptors before our close animation has finished. This controller
  * keeps those closing routes locally until their lifecycle reports completion.
  */
-export const createManagedStackController = <
+export const createBlankStackController = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
 >(
-	initialProps: ManagedStackProps<TDescriptor, TNavigation>,
-): ManagedStackControllerType<TDescriptor, TNavigation> => {
+	initialProps: BlankStackProviderProps<TDescriptor, TNavigation>,
+): BlankStackControllerType<TDescriptor, TNavigation> => {
 	const closingRouteKeys = new Set<string>();
 	let props = initialProps;
 	let previousRoutesSnapshot = initialProps.state.routes;
-	let snapshot: ManagedStackControllerSnapshot<TDescriptor> = {
-		state: buildManagedStackState({
+	let snapshot: BlankStackControllerSnapshot<TDescriptor> = {
+		state: buildBlankStackState({
 			props,
 			routes: initialProps.state.routes,
 			descriptors:
-				initialProps.descriptors as ManagedDescriptorSources<TDescriptor>,
+				initialProps.descriptors as BlankStackDescriptorSources<TDescriptor>,
 			closingRouteKeys,
 		}),
 	};
@@ -55,15 +55,17 @@ export const createManagedStackController = <
 		};
 	};
 
-	const getSnapshot = (): ManagedStackControllerSnapshot<TDescriptor> => {
+	const getSnapshot = (): BlankStackControllerSnapshot<TDescriptor> => {
 		return snapshot;
 	};
 
-	const update = (nextProps: ManagedStackProps<TDescriptor, TNavigation>) => {
+	const update = (
+		nextProps: BlankStackProviderProps<TDescriptor, TNavigation>,
+	) => {
 		const lastRoutesSnapshot = previousRoutesSnapshot;
 		props = nextProps;
 
-		const nextState = deriveManagedStackState({
+		const nextState = deriveBlankStackState({
 			props,
 			current: snapshot.state,
 			previousRoutesSnapshot: lastRoutesSnapshot,
@@ -111,7 +113,7 @@ export const createManagedStackController = <
 		delete nextDescriptors[route.key];
 
 		snapshot = {
-			state: buildManagedStackState({
+			state: buildBlankStackState({
 				props,
 				routes: nextRoutes,
 				descriptors: nextDescriptors,
@@ -138,7 +140,7 @@ export const createManagedStackController = <
 
 		closingRouteKeys.add(route.key);
 		snapshot = {
-			state: buildManagedStackState({
+			state: buildBlankStackState({
 				props,
 				routes: current.routes,
 				descriptors: current.sourceDescriptors,

package/src/shared/providers/stack/{helpers/managed-stack-state/helpers/build-managed-stack-state.ts → blank-stack-state/helpers/build-blank-stack-state.ts}

@@ -1,13 +1,13 @@
-import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type { BlankStackProviderProps } from "../../../../types/providers/blank-stack-provider.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
 	BaseStackScene,
 	StackDescriptorSource,
 	StackSceneActivity,
-} from "../../../../../types/stack.types";
-import { resolveSceneNeighbors } from "../../../../../utils/navigation/resolve-scene-neighbors";
-import { isOverlayVisible } from "../../../../../utils/overlay/visibility";
+} from "../../../../types/stack.types";
+import { isOverlayVisible } from "../../../../utils/overlay/visibility";
+import { resolveSceneNeighbors } from "./navigation/resolve-scene-neighbors";
 import {
 	areDescriptorSourcesEquivalent,
 	areDescriptorsEqual,
@@ -15,22 +15,22 @@ import {
 	getRouteChildState,
 	routeKeyListsAreEqual,
 	setsAreEqual,
-} from "./helpers";
+} from "./state-equality";
 import type {
+	BlankStackDescriptorSources,
+	BlankStackDescriptors,
+	BlankStackRoutes,
 	LocalRoutesState,
-	ManagedDescriptorSources,
-	ManagedDescriptors,
-	ManagedRoutes,
 	SceneActivityWindow,
 } from "./types";
 
-type BuildManagedStackStateParams<
+type BuildBlankStackStateParams<
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
 > = {
-	props: ManagedStackProps<TDescriptor, TNavigation>;
-	routes: ManagedRoutes<TDescriptor>;
-	descriptors: ManagedDescriptorSources<TDescriptor>;
+	props: BlankStackProviderProps<TDescriptor, TNavigation>;
+	routes: BlankStackRoutes<TDescriptor>;
+	descriptors: BlankStackDescriptorSources<TDescriptor>;
 	closingRouteKeys: ReadonlySet<string>;
 	previousState?: LocalRoutesState<TDescriptor>;
 };
@@ -83,7 +83,7 @@ const getSceneActivity = ({
 };
 
 const getNonClosingSceneIndices = <TDescriptor extends BaseStackDescriptor>(
-	routes: ManagedRoutes<TDescriptor>,
+	routes: BlankStackRoutes<TDescriptor>,
 	closingRouteKeys: ReadonlySet<string>,
 ) => {
 	const indices: number[] = [];
@@ -105,7 +105,7 @@ const getSceneActivityWindow = <
 	props,
 	routes,
 	closingRouteKeys,
-}: BuildManagedStackStateParams<
+}: BuildBlankStackStateParams<
 	TDescriptor,
 	TNavigation
 >): SceneActivityWindow => {
@@ -161,14 +161,14 @@ const buildBaseScenes = <
 	closingRouteKeys,
 	previousState,
 	activityWindow,
-}: BuildManagedStackStateParams<TDescriptor, TNavigation> & {
+}: BuildBlankStackStateParams<TDescriptor, TNavigation> & {
 	activityWindow: SceneActivityWindow;
 }) => {
 	const routeKeys: string[] = [];
 	const scenes: BaseStackScene<TDescriptor>[] = [];
 	const routeChildStates: Record<string, unknown> = {};
-	const sourceDescriptors = {} as ManagedDescriptorSources<TDescriptor>;
-	const managedDescriptors = {} as ManagedDescriptors<TDescriptor>;
+	const sourceDescriptors = {} as BlankStackDescriptorSources<TDescriptor>;
+	const blankStackDescriptors = {} as BlankStackDescriptors<TDescriptor>;
 	let shouldShowFloatOverlay = false;
 
 	for (let sceneIndex = 0; sceneIndex < routes.length; sceneIndex++) {
@@ -215,7 +215,7 @@ const buildBaseScenes = <
 		routeKeys.push(route.key);
 		routeChildStates[route.key] = routeChildState;
 		sourceDescriptors[route.key] = sourceDescriptor;
-		managedDescriptors[route.key] = descriptor;
+		blankStackDescriptors[route.key] = descriptor;
 
 		if (!shouldShowFloatOverlay) {
 			shouldShowFloatOverlay = isOverlayVisible(sourceDescriptor?.options);
@@ -231,7 +231,7 @@ const buildBaseScenes = <
 		scenes,
 		routeChildStates,
 		sourceDescriptors,
-		descriptors: managedDescriptors,
+		descriptors: blankStackDescriptors,
 		routeKeys,
 		shouldShowFloatOverlay,
 	};
@@ -244,7 +244,7 @@ const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
 	previousState,
 }: {
 	scenes: BaseStackScene<TDescriptor>[];
-	sourceDescriptors: ManagedDescriptorSources<TDescriptor>;
+	sourceDescriptors: BlankStackDescriptorSources<TDescriptor>;
 	closingRouteKeys: ReadonlySet<string>;
 	previousState?: LocalRoutesState<TDescriptor>;
 }): BaseStackScene<TDescriptor>[] => {
@@ -308,11 +308,11 @@ const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
 	return nextScenes;
 };
 
-export const buildManagedStackState = <
+export const buildBlankStackState = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
 >(
-	params: BuildManagedStackStateParams<TDescriptor, TNavigation>,
+	params: BuildBlankStackStateParams<TDescriptor, TNavigation>,
 ): LocalRoutesState<TDescriptor> => {
 	const activityWindow = getSceneActivityWindow(params);
 	const focusedRouteKey =
@@ -322,7 +322,7 @@ export const buildManagedStackState = <
 		scenes: baseScenes,
 		routeChildStates,
 		sourceDescriptors,
-		descriptors: managedDescriptors,
+		descriptors: blankStackDescriptors,
 		routeKeys,
 		shouldShowFloatOverlay,
 	} = buildBaseScenes({
@@ -343,9 +343,12 @@ export const buildManagedStackState = <
 		routes: params.routes,
 		descriptors:
 			params.previousState &&
-			areDescriptorsEqual(params.previousState.descriptors, managedDescriptors)
+			areDescriptorsEqual(
+				params.previousState.descriptors,
+				blankStackDescriptors,
+			)
 				? params.previousState.descriptors
-				: managedDescriptors,
+				: blankStackDescriptors,
 		sourceDescriptors:
 			params.previousState &&
 			areDescriptorsEqual(

package/src/shared/providers/stack/{helpers/managed-stack-state/helpers/derive-managed-stack-state.ts → blank-stack-state/helpers/derive-blank-stack-state.ts}

@@ -1,10 +1,11 @@
-import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type { BlankStackProviderProps } from "../../../../types/providers/blank-stack-provider.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
 	RouteWithKey,
-} from "../../../../../types/stack.types";
-import { buildManagedStackState } from "./build-managed-stack-state";
+} from "../../../../types/stack.types";
+import { buildBlankStackState } from "./build-blank-stack-state";
+import { reconcileBlankStackRoutes } from "./reconcile-blank-stack-routes";
 import {
 	areDescriptorSourceMapsEquivalent,
 	areDescriptorsEqual,
@@ -12,17 +13,16 @@ import {
 	getRouteChildStateMap,
 	routesHaveSameKeys,
 	setsAreEqual,
-} from "./helpers";
-import { reconcileManagedRoutes } from "./reconcile-managed-routes";
-import type { LocalRoutesState, ManagedRoutes } from "./types";
+} from "./state-equality";
+import type { BlankStackRoutes, LocalRoutesState } from "./types";
 
-type DeriveManagedStackStateParams<
+type DeriveBlankStackStateParams<
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
 > = {
-	props: ManagedStackProps<TDescriptor, TNavigation>;
+	props: BlankStackProviderProps<TDescriptor, TNavigation>;
 	current: LocalRoutesState<TDescriptor>;
-	previousRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	previousRoutesSnapshot: BlankStackRoutes<TDescriptor>;
 	closingRouteKeys: Set<string>;
 };
 
@@ -36,7 +36,7 @@ const routesAreIdentical = <Route extends RouteWithKey>(
 	return a.every((route, index) => route === b[index]);
 };
 
-export const deriveManagedStackState = <
+export const deriveBlankStackState = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
 >({
@@ -44,7 +44,7 @@ export const deriveManagedStackState = <
 	current,
 	previousRoutesSnapshot,
 	closingRouteKeys,
-}: DeriveManagedStackStateParams<
+}: DeriveBlankStackStateParams<
 	TDescriptor,
 	TNavigation
 >): LocalRoutesState<TDescriptor> => {
@@ -87,7 +87,7 @@ export const deriveManagedStackState = <
 		return current;
 	}
 
-	const result = reconcileManagedRoutes({
+	const result = reconcileBlankStackRoutes({
 		current,
 		previousRoutesSnapshot,
 		nextRoutesSnapshot,
@@ -109,7 +109,7 @@ export const deriveManagedStackState = <
 		return current;
 	}
 
-	return buildManagedStackState({
+	return buildBlankStackState({
 		props,
 		routes: routesChanged ? result.routes : current.routes,
 		descriptors: descriptorsChanged

package/src/shared/{utils → providers/stack/blank-stack-state/helpers}/navigation/compose-descriptors.ts

@@ -1,4 +1,4 @@
-import type { RouteWithKey } from "../../types/stack.types";
+import type { RouteWithKey } from "../../../../../types/stack.types";
 
 export const composeDescriptors = <
 	Route extends RouteWithKey,

package/src/shared/{utils → providers/stack/blank-stack-state/helpers}/navigation/sync-routes-with-removed.ts

@@ -1,9 +1,6 @@
-import type { useClosingRouteKeys } from "../../hooks/navigation/use-closing-route-keys";
-import type { RouteWithKey } from "../../types/stack.types";
+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>,
@@ -12,36 +9,7 @@ type SyncRoutesWithRemovedParams<
 	prevDescriptors: DescriptorMap;
 	nextRoutes: Route[];
 	nextDescriptors: DescriptorMap;
-	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;
+	closingRouteKeys: Set<string>;
 };
 
 /**
@@ -91,16 +59,16 @@ export const syncRoutesWithRemoved = <
 
 		if (nextRouteWasPresent && !previousRouteStillPresent) {
 			// Previous route was removed, mark as closing
-			addClosingRouteKey(closingRouteKeys, previousFocusedRoute.key);
+			closingRouteKeys.add(previousFocusedRoute.key);
 
 			derivedRoutes.push(previousFocusedRoute);
 		} else {
 			// Next route is now active, not closing
-			deleteClosingRouteKey(closingRouteKeys, nextFocusedRoute.key);
+			closingRouteKeys.delete(nextFocusedRoute.key);
 
 			if (!previousRouteStillPresent) {
 				// Previous route needs to be inserted for transition
-				deleteClosingRouteKey(closingRouteKeys, previousFocusedRoute.key);
+				closingRouteKeys.delete(previousFocusedRoute.key);
 
 				const insertIndex = Math.max(derivedRoutes.length - 1, 0);
 				derivedRoutes.splice(insertIndex, 0, previousFocusedRoute);
@@ -108,14 +76,14 @@ export const syncRoutesWithRemoved = <
 		}
 	} else if (nextFocusedRoute) {
 		// Same focused route, ensure it's not marked as closing
-		deleteClosingRouteKey(closingRouteKeys, nextFocusedRoute.key);
+		closingRouteKeys.delete(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(getClosingRouteKeyValues(closingRouteKeys))) {
+	for (const key of Array.from(closingRouteKeys)) {
 		if (!activeKeys.has(key)) {
-			deleteClosingRouteKey(closingRouteKeys, key);
+			closingRouteKeys.delete(key);
 		}
 	}