react-native-screen-transitions 3.11.1 → 3.11.3

package/src/shared/components/boundary/providers/boundary-root.provider.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
-import { useAnimatedRef } from "react-native-reanimated";
+import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import {
 	useComposedSlotStyles,
@@ -19,7 +19,7 @@ import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helper
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
-import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import { BoundaryLifecycle } from "../components/boundary-lifecycle";
 import {
 	type BoundaryPortalRuntime,
 	resolveBoundaryPortal,
@@ -27,6 +27,8 @@ import {
 import type {
 	BoundaryConfigProps,
 	BoundaryId,
+	BoundaryLocalMeasurement,
+	BoundaryLocalMeasurementValue,
 	BoundaryOwnProps,
 } from "../types";
 
@@ -44,6 +46,7 @@ export type BoundaryRootRenderState = {
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	measurementRef: AnimatedRef<View>;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
@@ -96,7 +99,9 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 			(s) => s.derivations.currentScreenKey,
 		);
 		const isCurrentScreenClosing = useBlankStackStore(
-			(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+			(store) =>
+				portalRuntime.handoff &&
+				store?.scenesByKey[currentScreenKey]?.activity === "closing",
 		);
 		const retainedBoundTagRef = useRef(requestedBoundTag);
 		const shouldRetainClosingBoundTag =
@@ -110,10 +115,6 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		}
 
 		const boundTag = retainedBoundTagRef.current;
-		const hasConfiguredInterpolator = useDescriptorsStore(
-			(s) => s.derivations.hasConfiguredInterpolator,
-		);
-		const runtimeEnabled = enabled && hasConfiguredInterpolator;
 		// Associated slot styles attach whenever the boundary is enabled,
 		// independent of whether an interpolator is configured for this transition.
 		const shouldAttachAssociatedStyles = enabled;
@@ -123,6 +124,9 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
 		const rootRef = useAnimatedRef<View>();
 		const measurementRef = useAnimatedRef<View>();
+		const localMeasurement = useSharedValue<BoundaryLocalMeasurement | null>(
+			null,
+		);
 
 		useLayoutEffect(() => {
 			if (__DEV__ && targetCount > 1) {
@@ -137,18 +141,6 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 
 		useImperativeHandle(forwardedRef, () => rootRef.current as any, [rootRef]);
 
-		useBoundaryMeasurement({
-			boundTag,
-			enabled,
-			runtimeEnabled,
-			currentScreenKey,
-			measuredRef,
-			style: hasTarget ? targetStyle : style,
-			handoff: portalRuntime.handoff,
-			escapeClipping: portalRuntime.escapeClipping,
-			config,
-		});
-
 		const shouldRenderBoundaryRootThroughPortal =
 			shouldEscapeBoundaryRootToScreenHost && !hasTarget;
 		const handoffEnabled = enabled && portalRuntime.handoff;
@@ -173,6 +165,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
+				localMeasurement,
 				measurementRef,
 				portalRuntime,
 				ref: rootRef,
@@ -185,6 +178,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 				currentScreenKey,
 				handoffEnabled,
 				hasTarget,
+				localMeasurement,
 				measurementRef,
 				portalRuntime,
 				rootRef,
@@ -194,7 +188,22 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 
 		return {
 			value,
-			children: children(value),
+			children: (
+				<>
+					{children(value)}
+					<BoundaryLifecycle
+						boundTag={boundTag}
+						config={config}
+						currentScreenKey={currentScreenKey}
+						enabled={enabled}
+						escapeClipping={portalRuntime.escapeClipping}
+						handoff={portalRuntime.handoff}
+						localMeasurement={localMeasurement}
+						measuredRef={measuredRef}
+						style={hasTarget ? targetStyle : style}
+					/>
+				</>
+			),
 		};
 	},
 );

package/src/shared/components/boundary/types.ts

@@ -1,3 +1,4 @@
+import type { MeasuredDimensions, SharedValue } from "react-native-reanimated";
 import type { ScreenPairKey } from "../../stores/bounds/types";
 import type { BoundsOptions } from "../../utils/bounds/types/options";
 
@@ -60,3 +61,11 @@ export type MeasureTarget =
 	  };
 
 export type MeasureBoundary = (target: MeasureTarget) => void;
+
+export type BoundaryLocalMeasurement = {
+	bounds: MeasuredDimensions;
+	pairKey: ScreenPairKey;
+};
+
+export type BoundaryLocalMeasurementValue =
+	SharedValue<BoundaryLocalMeasurement | null>;

package/src/shared/components/boundary/utils/refresh-signals.ts

@@ -34,6 +34,7 @@ export const getRefreshBoundarySignal = (params: {
 	linkId: string;
 	group?: string;
 	shouldRefresh: boolean;
+	settled?: boolean;
 	closing: boolean;
 	linkState?: LinkPairsState;
 }): RefreshBoundarySignal | null => {
@@ -46,13 +47,14 @@ export const getRefreshBoundarySignal = (params: {
 		linkId,
 		group,
 		shouldRefresh,
+		settled = false,
 		closing,
 		linkState,
 	} = params;
 
 	if (!enabled) return null;
 
-	if (!shouldRefresh) {
+	if (!shouldRefresh && (!group || !settled)) {
 		return null;
 	}
 
@@ -95,16 +97,33 @@ export const getRefreshBoundarySignal = (params: {
 	// Source side:
 	// When the activeId changes, trigger a refresh to ensure the source bounds are captured.
 	if (sourcePairKey) {
-		const activeId = linkState?.[sourcePairKey]?.groups?.[group]?.activeId;
+		const pair = linkState?.[sourcePairKey];
+		const groupState = pair?.groups?.[group];
+		const activeId = groupState?.activeId;
 
 		if (activeId !== linkId) {
 			return null;
 		}
 
+		// The opening member is captured by the initial handshake. A settled
+		// refresh is only needed after selection moves to another member.
+		if (
+			!shouldRefresh &&
+			(groupState?.initialId === undefined ||
+				activeId === groupState.initialId ||
+				!!pair?.links?.[linkId]?.source)
+		) {
+			return null;
+		}
+
 		return buildRefreshSignal(
 			"source",
 			sourcePairKey,
-			[group, linkId, closing ? "closing" : "settled"].join("|"),
+			[
+				group,
+				linkId,
+				shouldRefresh ? (closing ? "closing" : "settled") : "retarget",
+			].join("|"),
 		);
 	}
 
@@ -114,8 +133,9 @@ export const getRefreshBoundarySignal = (params: {
 
 	// Destination side:
 	// When the activeId changes, trigger a refresh to ensure the destination bounds are captured.
-	const activeId =
-		linkState?.[refreshDestinationPairKey]?.groups?.[group]?.activeId;
+	const pair = linkState?.[refreshDestinationPairKey];
+	const groupState = pair?.groups?.[group];
+	const activeId = groupState?.activeId;
 
 	// Destination retargeting should only measure a concrete member that already
 	// participates in the pair. Missing members fall back to initialId at resolve.
@@ -123,9 +143,22 @@ export const getRefreshBoundarySignal = (params: {
 		return null;
 	}
 
+	if (
+		!shouldRefresh &&
+		(groupState?.initialId === undefined ||
+			activeId === groupState.initialId ||
+			!!pair?.links?.[linkId]?.destination)
+	) {
+		return null;
+	}
+
 	return buildRefreshSignal(
 		"destination",
 		refreshDestinationPairKey,
-		[group, linkId, closing ? "closing" : "settled"].join("|"),
+		[
+			group,
+			linkId,
+			shouldRefresh ? (closing ? "closing" : "settled") : "retarget",
+		].join("|"),
 	);
 };

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

@@ -1,6 +1,6 @@
 import { type ComponentType, memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated, { runOnUI } from "react-native-reanimated";
+import Animated, { runOnJS, runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
@@ -23,7 +23,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { dismissScreen } = useNavigationHelpers();
+	const { isRemovePrevented, requestDismiss } = useNavigationHelpers();
 
 	const routeKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -34,9 +34,10 @@ export const BackdropLayer = memo(function BackdropLayer({
 	const rawSnapPoints = useDescriptorsStore(
 		(store) => store.options.snapPoints,
 	);
-	const canDismiss = useDescriptorsStore(
+	const isGestureDismissEnabled = useDescriptorsStore(
 		(store) => store.options.gestureEnabled !== false,
 	);
+	const canDismiss = isGestureDismissEnabled && !isRemovePrevented;
 	const transitionSpec = useDescriptorsStore(
 		(store) => store.options.transitionSpec,
 	);
@@ -56,14 +57,14 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const handleBackdropPress = useCallback(() => {
 		if (backdropBehavior === "dismiss") {
-			dismissScreen();
+			requestDismiss();
 			return;
 		}
 
 		if (backdropBehavior === "collapse") {
 			// No snap points → fallback to dismiss
 			if (!rawSnapPoints || rawSnapPoints.length === 0) {
-				dismissScreen();
+				requestDismiss();
 				return;
 			}
 
@@ -108,8 +109,11 @@ export const BackdropLayer = memo(function BackdropLayer({
 					animations,
 					targetProgress,
 					animationProgress,
-					onAnimationFinish: shouldDismiss ? dismissScreen : undefined,
 				});
+
+				if (shouldDismiss) {
+					runOnJS(requestDismiss)();
+				}
 			})();
 		}
 	}, [
@@ -121,7 +125,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 		rawSnapPoints,
 		canDismiss,
 		transitionSpec,
-		dismissScreen,
+		requestDismiss,
 		routeKey,
 	]);
 

package/src/shared/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/shared/components/screen-lifecycle/hooks/use-close-completion.ts

@@ -0,0 +1,28 @@
+import {
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+} from "react-native-reanimated";
+
+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) {
+				runOnJS(onComplete)();
+			}
+		},
+	);
+};

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

@@ -1,6 +1,7 @@
-/** 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 { hasTransitionsEnabled } from "../../../providers/screen/animation/helpers/has-transitions-enabled";
 import {
 	type BaseDescriptor,
 	useDescriptorsStore,
@@ -8,68 +9,34 @@ import {
 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";
+import {
+	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 { STACK_TYPE: stackType, TRANSITIONS_ALWAYS_ON: transitionsAlwaysOn } =
+		useStackCoreStore((store) => store.flags);
 	const handleCloseRoute = useBlankStackStore(
 		(store) => store?.handleCloseRoute,
 	);
-	const isClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[current.route.key]?.activity === "closing",
+	const isBlankStackClosing = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.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 ancestorKeys = useDescriptorsStore(
+		(store) => store.derivations.ancestorKeys,
 	);
+	const parentScreenKey = ancestorKeys[0];
+	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const pendingActionRef = useRef<any>(null);
 
 	const nearestAncestorDismissing = useMemo(() => {
@@ -78,38 +45,62 @@ 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 (stackType !== StackType.NATIVE && 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 (!shouldIntercept) {
+			return;
+		}
 
-		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
-			resetStores();
+		pendingActionRef.current ??= event.data.action;
+		if (!requestDismiss()) {
+			pendingActionRef.current = null;
 			return;
 		}
 
-		e.preventDefault();
-		pendingActionRef.current = e.data.action;
-		requestLifecycleTransition(LifecycleTransitionRequestKind.NativeClose, 0);
+		event.preventDefault();
 	});
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: navigation listener should only rebind when the navigator instance changes
@@ -117,37 +108,5 @@ const useNativeStackClose = ({
 		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;
-
-	const resetStores = useStableCallback(() => {
-		resetStoresForScreen(routeKey);
-	});
-
-	const closeParams: CloseHookParams = {
-		current,
-		requestLifecycleTransition,
-		resetStores,
-	};
-
-	if (isNativeStack) {
-		return useNativeStackClose(closeParams);
-	}
-
-	return useBlankStackClose(closeParams);
+	return { completeClose };
 }

package/src/shared/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/shared/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);