react-native-screen-transitions 4.0.0 → 4.1.0-alpha.0

package/src/providers/screen/screen-composer.tsx

@@ -2,44 +2,33 @@ import type React from "react";
 import { ScreenContainer } from "../../components/screen-container";
 import { ScreenLifecycle } from "../../components/screen-lifecycle";
 import { ScreenAnimationProvider } from "./animation";
-import { type BaseDescriptor, DescriptorsProvider } from "./descriptors";
+import { DescriptorsProvider } from "./descriptors";
 import { ScreenGestureProvider } from "./gestures";
 import { ScreenOptionsProvider } from "./options";
 import { ScreenSlotProvider } from "./styles";
+import { ScreenTopologyProvider } from "./topology";
 
 type Props = {
-	previous?: BaseDescriptor;
-	current?: BaseDescriptor;
-	next?: BaseDescriptor;
-	routeKey?: string;
+	routeKey: string;
 	children: React.ReactNode;
 };
 
-export function ScreenComposer({
-	previous,
-	current,
-	next,
-	routeKey,
-	children,
-}: Props) {
+export function ScreenComposer({ routeKey, children }: Props) {
 	return (
-		<DescriptorsProvider
-			previous={previous}
-			current={current}
-			next={next}
-			routeKey={routeKey}
-		>
-			<ScreenLifecycle>
-				<ScreenOptionsProvider>
-					<ScreenGestureProvider>
-						<ScreenAnimationProvider>
-							<ScreenSlotProvider>
-								<ScreenContainer>{children}</ScreenContainer>
-							</ScreenSlotProvider>
-						</ScreenAnimationProvider>
-					</ScreenGestureProvider>
-				</ScreenOptionsProvider>
-			</ScreenLifecycle>
+		<DescriptorsProvider routeKey={routeKey}>
+			<ScreenTopologyProvider>
+				<ScreenLifecycle>
+					<ScreenOptionsProvider>
+						<ScreenGestureProvider>
+							<ScreenAnimationProvider>
+								<ScreenSlotProvider>
+									<ScreenContainer>{children}</ScreenContainer>
+								</ScreenSlotProvider>
+							</ScreenAnimationProvider>
+						</ScreenGestureProvider>
+					</ScreenOptionsProvider>
+				</ScreenLifecycle>
+			</ScreenTopologyProvider>
 		</DescriptorsProvider>
 	);
 }

package/src/providers/screen/styles/helpers/create-interpolator-scope.ts

@@ -1,7 +1,4 @@
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionAccessor,
-} from "../../../../types/animation.types";
+import type { ScreenInterpolationProps } from "../../../../types/animation.types";
 import { createBoundsAccessor } from "../../../../utils/bounds";
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 import type { SelectedInterpolatorFrame } from "./select-interpolator-frame";
@@ -9,11 +6,9 @@ import type { SelectedInterpolatorFrame } from "./select-interpolator-frame";
 export const createInterpolatorScope = ({
 	frame,
 	selectedFrame,
-	transition,
 }: {
 	frame: ScreenInterpolatorFrame;
 	selectedFrame: SelectedInterpolatorFrame;
-	transition: ScreenTransitionAccessor;
 }): ScreenInterpolationProps => {
 	"worklet";
 
@@ -21,25 +16,11 @@ export const createInterpolatorScope = ({
 		...frame,
 		...selectedFrame,
 	};
-	let scope: ScreenInterpolationProps;
-	const scopedTransition: ScreenTransitionAccessor = (target) => {
-		"worklet";
-
-		if ((target?.depth ?? 0) === 0) {
-			return scope;
-		}
-
-		return transition(target);
-	};
-
-	scope = {
+	return {
 		...selectedProps,
 		bounds: createBoundsAccessor(() => {
 			"worklet";
 			return selectedProps;
 		}),
-		transition: scopedTransition,
 	};
-
-	return scope;
 };

package/src/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import {
 	type SharedValue,
 	useAnimatedReaction,
@@ -18,16 +17,13 @@ import type {
 } from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationStore } from "../../animation";
-import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
-import { readScreenAnimationRevisions } from "../../animation/helpers/read-screen-animation-revisions";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorsStore } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
 	useScreenOptionsStore,
 } from "../../options";
-import { collectInterpolatorSharedValues } from "../helpers/collect-interpolator-shared-values";
 import { createInterpolatorScope } from "../helpers/create-interpolator-scope";
 import { normalizeSlots } from "../helpers/normalize-slots";
 import { resolveInterpolatorStyleHandoff } from "../helpers/resolve-interpolator-style-handoff";
@@ -55,7 +51,6 @@ type RunInterpolatorParams = {
 	interpolator: ScreenStyleInterpolator | undefined;
 	props: ScreenInterpolatorFrame;
 	selectedFrame: SelectedInterpolatorFrame;
-	transition: Parameters<ScreenStyleInterpolator>[0]["transition"];
 };
 
 const normalizeRawStyleMap = (
@@ -76,7 +71,6 @@ const runInterpolator = ({
 	interpolator,
 	props,
 	selectedFrame,
-	transition,
 }: RunInterpolatorParams): InterpolatorResult | undefined => {
 	"worklet";
 
@@ -89,7 +83,6 @@ const runInterpolator = ({
 			createInterpolatorScope({
 				frame: props,
 				selectedFrame,
-				transition,
 			}),
 		);
 
@@ -157,16 +150,6 @@ export const useInterpolatedStylesMap = ({
 	const currentInterpolator = useScreenAnimationStore(
 		(store) => store.currentInterpolator,
 	);
-	const transitionSources = useScreenAnimationStore(
-		(store) => store.transitionSources,
-	);
-	const transitionOriginIndex = useScreenAnimationStore(
-		(store) => store.transitionOriginIndex,
-	);
-	const transition = useBuildTransitionAccessor({
-		transitionSources,
-		transitionOriginIndex,
-	});
 	const hasCurrentInterpolator = !!currentInterpolator;
 	const { closing: currentClosing, entering: currentEntering } =
 		AnimationStore.getBag(currentScreenKey);
@@ -194,14 +177,6 @@ export const useInterpolatedStylesMap = ({
 			: 0;
 	});
 
-	// In some cases, a user may want to use external shared values to drive animations in the interpoaltor.
-	// We can now support this by collecting those shared values and reading them here to trigger an update.
-	const interpolatorSharedValues = useMemo(
-		() =>
-			collectInterpolatorSharedValues([currentInterpolator, nextInterpolator]),
-		[currentInterpolator, nextInterpolator],
-	);
-
 	const activeScreenKey = nextScreenKey ?? currentScreenKey;
 	const { closing: activeClosing, entering: activeEntering } =
 		AnimationStore.getBag(activeScreenKey);
@@ -236,8 +211,6 @@ export const useInterpolatedStylesMap = ({
 	);
 
 	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
-		"worklet";
-		readScreenAnimationRevisions(transitionSources, interpolatorSharedValues);
 		const props = screenInterpolatorProps.get();
 
 		const { current, next } = props;
@@ -298,7 +271,6 @@ export const useInterpolatedStylesMap = ({
 			interpolator: currentInterpolator,
 			props,
 			selectedFrame: currentSelectedFrame,
-			transition,
 		});
 
 		const initialDestinationStyleGate = resolveInitialDestinationStyleGate({
@@ -335,7 +307,6 @@ export const useInterpolatedStylesMap = ({
 			interpolator: nextInterpolator,
 			props,
 			selectedFrame: nextSelectedFrame,
-			transition,
 		});
 
 		syncSelectedInterpolatorOptions(

package/src/{factories/screen-topology → providers/screen/topology/helpers}/create-screen-topology.ts

@@ -3,28 +3,35 @@ import type {
 	ScreenRelationships,
 	ScreenTopology,
 	ScreenTopologyRegistration,
-} from "./types";
+} from "../types";
 
 type ScreenNode = {
+	registered: boolean;
+	navigatorKey: string | null;
 	parentScreenKey: string | null;
 	activeChildScreenKeys: string[];
+	transitionKey: string | null;
 };
 
 const EMPTY_RELATIONSHIPS: ScreenRelationships = {
 	parentScreenKey: null,
 	activeChildScreenKey: null,
+	activeChildNavigatorKey: null,
 };
 
 const areRelationshipsEqual = (
 	left: ScreenRelationships,
 	right: ScreenRelationships,
-): boolean =>
+) =>
 	left.parentScreenKey === right.parentScreenKey &&
-	left.activeChildScreenKey === right.activeChildScreenKey;
+	left.activeChildScreenKey === right.activeChildScreenKey &&
+	left.activeChildNavigatorKey === right.activeChildNavigatorKey;
 
 export const createScreenTopology = (): ScreenTopology => {
 	const nodes = new Map<string, ScreenNode>();
+	const screenKeyByTransitionKey = new Map<string, string>();
 	const listenersByScreenKey = new Map<string, Set<() => void>>();
+	const resolutionListeners = new Set<() => void>();
 	const relationshipCache = new Map<string, ScreenRelationships>();
 
 	const getNode = (screenKey: string) => nodes.get(screenKey);
@@ -33,8 +40,11 @@ export const createScreenTopology = (): ScreenTopology => {
 		if (existing) return existing;
 
 		const node: ScreenNode = {
+			registered: false,
+			navigatorKey: null,
 			parentScreenKey: null,
 			activeChildScreenKeys: [],
+			transitionKey: null,
 		};
 		nodes.set(screenKey, node);
 		return node;
@@ -44,6 +54,7 @@ export const createScreenTopology = (): ScreenTopology => {
 		const node = getNode(screenKey);
 		if (
 			node &&
+			!node.registered &&
 			!node.parentScreenKey &&
 			node.activeChildScreenKeys.length === 0
 		) {
@@ -53,27 +64,30 @@ export const createScreenTopology = (): ScreenTopology => {
 
 	const getParent = (screenKey: string) =>
 		getNode(screenKey)?.parentScreenKey ?? null;
-
 	const getActiveChild = (screenKey: string) => {
-		const activeChildScreenKeys = getNode(screenKey)?.activeChildScreenKeys;
-		return activeChildScreenKeys?.[activeChildScreenKeys.length - 1] ?? null;
+		const children = getNode(screenKey)?.activeChildScreenKeys;
+		return children?.[children.length - 1] ?? null;
 	};
 
 	const materializeRelationships = (screenKey: string): ScreenRelationships => {
 		const parentScreenKey = getParent(screenKey);
 		const activeChildScreenKey = getActiveChild(screenKey);
+		const activeChildNavigatorKey = activeChildScreenKey
+			? (getNode(activeChildScreenKey)?.navigatorKey ?? null)
+			: null;
 
-		if (!parentScreenKey && !activeChildScreenKey) {
-			return EMPTY_RELATIONSHIPS;
-		}
+		if (!parentScreenKey && !activeChildScreenKey) return EMPTY_RELATIONSHIPS;
 
-		return { parentScreenKey, activeChildScreenKey };
+		return {
+			parentScreenKey,
+			activeChildScreenKey,
+			activeChildNavigatorKey,
+		};
 	};
 
 	const getRelationships = (screenKey: string) => {
 		const cached = relationshipCache.get(screenKey);
 		if (cached) return cached;
-
 		const relationships = materializeRelationships(screenKey);
 		relationshipCache.set(screenKey, relationships);
 		return relationships;
@@ -93,83 +107,110 @@ export const createScreenTopology = (): ScreenTopology => {
 		}
 
 		for (const [screenKey, previous] of previousRelationships) {
-			const listeners = listenersByScreenKey.get(screenKey);
-			if (!listeners) continue;
-
 			const next = getRelationships(screenKey);
 			if (areRelationshipsEqual(previous, next)) {
 				relationshipCache.set(screenKey, previous);
 				continue;
 			}
-
-			for (const listener of listeners) listener();
+			for (const listener of listenersByScreenKey.get(screenKey) ?? []) {
+				listener();
+			}
 		}
+
+		for (const listener of resolutionListeners) listener();
 	};
 
 	const register = ({
 		screenKey,
+		navigatorKey,
 		parentScreenKey,
+		transitionKey,
 	}: ScreenTopologyRegistration) => {
+		const transitionKeyOwner = transitionKey
+			? screenKeyByTransitionKey.get(transitionKey)
+			: undefined;
+		if (transitionKeyOwner && transitionKeyOwner !== screenKey) {
+			throw new Error(
+				`Transition key "${transitionKey}" is already registered by screen "${transitionKeyOwner}".`,
+			);
+		}
+
 		mutate(new Set([screenKey]), () => {
-			ensureNode(screenKey).parentScreenKey = parentScreenKey ?? null;
+			const node = ensureNode(screenKey);
+			if (
+				node.transitionKey &&
+				node.transitionKey !== transitionKey &&
+				screenKeyByTransitionKey.get(node.transitionKey) === screenKey
+			) {
+				screenKeyByTransitionKey.delete(node.transitionKey);
+			}
+
+			node.registered = true;
+			node.navigatorKey = navigatorKey ?? null;
+			node.parentScreenKey = parentScreenKey ?? null;
+			node.transitionKey = transitionKey ?? null;
+			if (transitionKey) screenKeyByTransitionKey.set(transitionKey, screenKey);
 		});
 	};
 
 	const unregister = (screenKey: string) => {
 		const node = getNode(screenKey);
 		if (!node) return;
-
 		const affectedScreenKeys = new Set([screenKey]);
-		if (node.parentScreenKey) {
-			affectedScreenKeys.add(node.parentScreenKey);
-		}
+		if (node.parentScreenKey) affectedScreenKeys.add(node.parentScreenKey);
 
 		mutate(affectedScreenKeys, () => {
+			if (
+				node.transitionKey &&
+				screenKeyByTransitionKey.get(node.transitionKey) === screenKey
+			) {
+				screenKeyByTransitionKey.delete(node.transitionKey);
+			}
+
 			if (node.parentScreenKey) {
 				const parent = getNode(node.parentScreenKey);
 				if (parent) {
 					parent.activeChildScreenKeys = parent.activeChildScreenKeys.filter(
-						(activeScreenKey) => activeScreenKey !== screenKey,
+						(childScreenKey) => childScreenKey !== screenKey,
 					);
 				}
 				removeNodeIfEmpty(node.parentScreenKey);
 			}
-
 			nodes.delete(screenKey);
 		});
 	};
 
-	const activate = (registration: ActiveScreenRegistration) => {
-		if (getParent(registration.screenKey) !== registration.parentScreenKey) {
+	const activate = ({
+		screenKey,
+		parentScreenKey,
+	}: ActiveScreenRegistration) => {
+		if (getParent(screenKey) !== parentScreenKey) {
 			throw new Error(
 				"Screen topology can only activate a direct containment child.",
 			);
 		}
 
-		const affectedScreenKeys = new Set([registration.parentScreenKey]);
-		mutate(affectedScreenKeys, () => {
-			const parent = ensureNode(registration.parentScreenKey);
-			parent.activeChildScreenKeys = [
-				...parent.activeChildScreenKeys.filter(
-					(screenKey) => screenKey !== registration.screenKey,
-				),
-				registration.screenKey,
-			];
+		mutate(new Set([parentScreenKey]), () => {
+			const parent = ensureNode(parentScreenKey);
+			// A closing screen remains the active owner until it unmounts.
+			if (parent.activeChildScreenKeys.includes(screenKey)) return;
+			parent.activeChildScreenKeys.push(screenKey);
 		});
+	};
 
-		return () => {
-			const parent = getNode(registration.parentScreenKey);
-			if (!parent?.activeChildScreenKeys.includes(registration.screenKey)) {
-				return;
-			}
+	const resolve = (screenKey: string, depth: number) => {
+		if (!Number.isInteger(depth)) return null;
 
-			mutate(affectedScreenKeys, () => {
-				parent.activeChildScreenKeys = parent.activeChildScreenKeys.filter(
-					(screenKey) => screenKey !== registration.screenKey,
-				);
-				removeNodeIfEmpty(registration.parentScreenKey);
-			});
-		};
+		let resolvedScreenKey: string | null = screenKey;
+		for (let step = 0; step < Math.abs(depth); step += 1) {
+			resolvedScreenKey =
+				depth < 0
+					? getParent(resolvedScreenKey)
+					: getActiveChild(resolvedScreenKey);
+			if (!resolvedScreenKey) return null;
+		}
+
+		return getNode(resolvedScreenKey)?.registered ? resolvedScreenKey : null;
 	};
 
 	return {
@@ -177,22 +218,25 @@ export const createScreenTopology = (): ScreenTopology => {
 		unregister,
 		activate,
 		getRelationships,
+		resolve,
+		resolveTransitionKey: (key) => {
+			const screenKey = screenKeyByTransitionKey.get(key) ?? key;
+			return getNode(screenKey)?.registered ? screenKey : null;
+		},
 		subscribe: (screenKey, listener) => {
 			const listeners =
 				listenersByScreenKey.get(screenKey) ?? new Set<() => void>();
 			listeners.add(listener);
 			listenersByScreenKey.set(screenKey, listeners);
-
 			return () => {
 				listeners.delete(listener);
-				if (listeners.size === 0) {
-					listenersByScreenKey.delete(screenKey);
-					if (!getNode(screenKey)) {
-						relationshipCache.delete(screenKey);
-					}
-				}
+				if (listeners.size === 0) listenersByScreenKey.delete(screenKey);
 			};
 		},
+		subscribeResolution: (listener) => {
+			resolutionListeners.add(listener);
+			return () => resolutionListeners.delete(listener);
+		},
 	};
 };
 

package/src/providers/screen/topology/hooks/use-resolved-transition-key.ts

@@ -0,0 +1,29 @@
+import { useCallback, useSyncExternalStore } from "react";
+import type { ScreenTransitionTarget } from "../../../../types/animation.types";
+import { screenTopology } from "../helpers/create-screen-topology";
+
+export const useResolvedTransitionKey = (
+	screenKey: string | null,
+	target?: ScreenTransitionTarget,
+) => {
+	const depth = typeof target === "string" ? null : (target?.depth ?? 0);
+	const requiresResolution = typeof target === "string" || depth !== 0;
+	const subscribe = useCallback(
+		(listener: () => void) =>
+			requiresResolution
+				? screenTopology.subscribeResolution(listener)
+				: () => {},
+		[requiresResolution],
+	);
+	const getSnapshot = useCallback(
+		() =>
+			typeof target === "string"
+				? screenTopology.resolveTransitionKey(target)
+				: requiresResolution && screenKey
+					? screenTopology.resolve(screenKey, depth ?? 0)
+					: screenKey,
+		[depth, requiresResolution, screenKey, target],
+	);
+
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};

package/src/{factories/screen-topology → providers/screen/topology/hooks}/use-screen-relationships.ts

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from "react";
-import { screenTopology } from "./create-screen-topology";
+import { screenTopology } from "../helpers/create-screen-topology";
 
 export const useScreenRelationships = (screenKey: string) => {
 	const subscribe = useCallback(

package/src/providers/screen/topology/index.ts

@@ -0,0 +1,16 @@
+export {
+	createScreenTopology,
+	screenTopology,
+} from "./helpers/create-screen-topology";
+export { useResolvedTransitionKey } from "./hooks/use-resolved-transition-key";
+export { useScreenRelationships } from "./hooks/use-screen-relationships";
+export {
+	ScreenTopologyProvider,
+	useScreenTopologyStore,
+} from "./topology.provider";
+export type {
+	ActiveScreenRegistration,
+	ScreenRelationships,
+	ScreenTopology,
+	ScreenTopologyRegistration,
+} from "./types";

package/src/providers/screen/topology/topology.provider.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode, useLayoutEffect, useMemo } from "react";
+import createProvider from "../../../utils/create-provider";
+import { useBlankStackStore } from "../../stack/blank-stack.provider";
+import { useDescriptorsStore } from "../descriptors";
+import { screenTopology } from "./helpers/create-screen-topology";
+
+type Props = {
+	children: ReactNode;
+};
+
+type ScreenTopologyContextValue = {
+	screenKey: string;
+};
+
+const {
+	ScreenTopologyProvider,
+	useOptionalScreenTopologyStore,
+	useScreenTopologyStore,
+} = createProvider("ScreenTopology")<Props, ScreenTopologyContextValue>(
+	({ children }) => {
+		const screenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const transitionKey = useDescriptorsStore(
+			(store) => store.options.transitionKey,
+		);
+		const parentScreenKey = useOptionalScreenTopologyStore(
+			(store) => store?.screenKey,
+		);
+		const navigatorKey = useBlankStackStore((store) => store.navigatorKey);
+		const isActiveScreen = useBlankStackStore((store) => {
+			const focusedScene = store.scenes[store.focusedIndex];
+			return (
+				focusedScene?.route.key === screenKey &&
+				focusedScene.activity === "active"
+			);
+		});
+		useLayoutEffect(() => {
+			screenTopology.register({
+				screenKey,
+				navigatorKey,
+				parentScreenKey,
+				transitionKey,
+			});
+		}, [screenKey, navigatorKey, parentScreenKey, transitionKey]);
+
+		useLayoutEffect(() => {
+			if (!isActiveScreen || !parentScreenKey) return;
+
+			screenTopology.activate({
+				screenKey,
+				parentScreenKey,
+			});
+		}, [isActiveScreen, parentScreenKey, screenKey]);
+
+		useLayoutEffect(
+			() => () => {
+				screenTopology.unregister(screenKey);
+			},
+			[screenKey],
+		);
+
+		const value = useMemo(() => ({ screenKey }), [screenKey]);
+
+		return {
+			value,
+			children,
+		};
+	},
+);
+
+export { ScreenTopologyProvider, useScreenTopologyStore };

package/src/{factories/screen-topology → providers/screen/topology}/types.ts

@@ -1,6 +1,8 @@
 export type ScreenTopologyRegistration = {
 	screenKey: string;
+	navigatorKey?: string;
 	parentScreenKey?: string;
+	transitionKey?: string;
 };
 
 export type ActiveScreenRegistration = {
@@ -11,12 +13,16 @@ export type ActiveScreenRegistration = {
 export type ScreenRelationships = Readonly<{
 	parentScreenKey: string | null;
 	activeChildScreenKey: string | null;
+	activeChildNavigatorKey: string | null;
 }>;
 
 export type ScreenTopology = {
 	register(registration: ScreenTopologyRegistration): void;
 	unregister(screenKey: string): void;
-	activate(registration: ActiveScreenRegistration): () => void;
+	activate(registration: ActiveScreenRegistration): void;
 	getRelationships(screenKey: string): ScreenRelationships;
+	resolve(screenKey: string, depth: number): string | null;
+	resolveTransitionKey(key: string): string | null;
 	subscribe(screenKey: string, listener: () => void): () => void;
+	subscribeResolution(listener: () => void): () => void;
 };

package/src/providers/screen/use-current-screen-relationships.ts

@@ -1,5 +1,5 @@
-import { useScreenRelationships } from "../../factories/screen-topology";
 import { useDescriptorsStore } from "./descriptors";
+import { useScreenRelationships } from "./topology";
 
 export const useCurrentScreenRelationships = () => {
 	const screenKey = useDescriptorsStore(

package/src/providers/stack/blank-stack-state/helpers/build-blank-stack-state.ts

@@ -189,6 +189,7 @@ const buildBaseScenes = ({
 			childStateUnchanged &&
 			previousDescriptor.route === descriptorRoute &&
 			previousDescriptor.navigation === props.navigation &&
+			previousDescriptor.render === sourceDescriptor.render &&
 			previousDescriptor.options === sourceDescriptor.options
 				? previousDescriptor
 				: ({

package/src/providers/stack/blank-stack-state/helpers/state-equality.ts

@@ -132,9 +132,12 @@ export const areDescriptorSourcesEquivalent = (
 	previous: BlankStackDescriptorSource,
 	next: BlankStackDescriptorSource,
 ): boolean => {
-	return areRecordsShallowEqual(
-		previous.options as unknown as Record<string, unknown>,
-		next.options as unknown as Record<string, unknown>,
+	return (
+		previous.render === next.render &&
+		areRecordsShallowEqual(
+			previous.options as unknown as Record<string, unknown>,
+			next.options as unknown as Record<string, unknown>,
+		)
 	);
 };
 

package/src/providers/stack/stack-transition/index.ts

@@ -0,0 +1,5 @@
+export { StackTransitionProvider } from "./stack-transition.provider";
+export {
+	type StackTransition,
+	useStackTransition,
+} from "./use-stack-transition";