react-native-screen-transitions 2.3.0 → 2.3.2

package/src/hooks/animation/use-screen-animation.tsx

@@ -3,6 +3,10 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+	DEFAULT_SCREEN_TRANSITION_STATE,
+	NO_BOUNDS_MAP,
+} from "../../constants";
 import { useKeys } from "../../providers/keys";
 import { Animations } from "../../stores/animations";
 import { Bounds } from "../../stores/bounds";
@@ -11,7 +15,7 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionState,
 } from "../../types/animation";
-import type { BoundEntry } from "../../types/bounds";
+
 import type { NativeStackDescriptor } from "../../types/navigator";
 import { derivations } from "../../utils/animation/derivations";
 
@@ -23,24 +27,6 @@ type BuiltState = {
 	route: RouteProp<ParamListBase>;
 };
 
-const EMPTY_BOUNDS = Object.freeze({}) as Record<string, BoundEntry>;
-
-const FALLBACK: ScreenTransitionState = Object.freeze({
-	progress: 0,
-	closing: 0,
-	animating: 0,
-	gesture: {
-		x: 0,
-		y: 0,
-		normalizedX: 0,
-		normalizedY: 0,
-		isDismissing: 0,
-		isDragging: 0,
-	},
-	bounds: {} as Record<string, BoundEntry>,
-	route: {} as RouteProp<ParamListBase>,
-});
-
 const unwrap = (
 	s: BuiltState | undefined,
 	key: string | undefined,
@@ -60,7 +46,7 @@ const unwrap = (
 			isDismissing: s.gesture.isDismissing.value,
 			isDragging: s.gesture.isDragging.value,
 		},
-		bounds: Bounds.getBounds(key) || EMPTY_BOUNDS,
+		bounds: Bounds.getBounds(key) || NO_BOUNDS_MAP,
 		route: s.route,
 	};
 };
@@ -102,9 +88,14 @@ export function _useScreenAnimation() {
 			"worklet";
 
 			const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
-			const next = unwrap(nextAnimation, nextDescriptor?.route.key);
+
+			const next = nextDescriptor?.options?.enableTransitions
+				? unwrap(nextAnimation, nextDescriptor?.route.key)
+				: undefined;
+
 			const current =
-				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
+				unwrap(currentAnimation, currentDescriptor?.route.key) ??
+				DEFAULT_SCREEN_TRANSITION_STATE;
 
 			const {
 				progress,
@@ -138,10 +129,12 @@ export function _useScreenAnimation() {
 		},
 	);
 
-	const screenStyleInterpolator =
-		nextDescriptor?.options.screenStyleInterpolator ||
+	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
+	const currentInterpolator =
 		currentDescriptor?.options.screenStyleInterpolator;
 
+	const screenStyleInterpolator = nextInterpolator ?? currentInterpolator;
+
 	return { screenInterpolatorProps, screenStyleInterpolator };
 }
 

package/src/hooks/bounds/use-bound-registry.tsx

@@ -1,72 +1,160 @@
-import { useCallback } from "react";
+import {
+	createContext,
+	Fragment,
+	useCallback,
+	useContext,
+	useMemo,
+} from "react";
 import type { View } from "react-native";
 import {
 	type AnimatedRef,
 	measure,
+	runOnJS,
+	runOnUI,
 	type StyleProps,
+	useAnimatedReaction,
 	useSharedValue,
 } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
 import { useKeys } from "../../providers/keys";
 import { Bounds } from "../../stores/bounds";
 import { flattenStyle } from "../../utils/bounds/_utils/flatten-styles";
 import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
+import useStableCallback from "../use-stable-callback";
 
 interface BoundMeasurerHookProps {
-	sharedBoundTag: string;
+	sharedBoundTag?: string;
 	animatedRef: AnimatedRef<View>;
-	current: { route: { key: string } };
+
 	style: StyleProps;
+	onPress?: ((...args: unknown[]) => void) | undefined;
+}
+
+interface MeasurementUpdateContextType {
+	updateSignal: SharedValue<number>;
 }
 
+const MeasurementUpdateContext =
+	createContext<MeasurementUpdateContextType | null>(null);
+
 export const useBoundsRegistry = ({
 	sharedBoundTag,
 	animatedRef,
-	current,
 	style,
+	onPress,
 }: BoundMeasurerHookProps) => {
-	const { previous } = useKeys();
+	const { previous, current } = useKeys();
 
-	const isMeasured = useSharedValue(false);
+	const ROOT_MEASUREMENT_SIGNAL = useContext(MeasurementUpdateContext);
+	const ROOT_SIGNAL = useSharedValue(0);
+	const IS_ROOT = !ROOT_MEASUREMENT_SIGNAL;
+	const hasMeasured = useSharedValue(false);
 
-	const measureBounds = useCallback(() => {
+	const emitUpdate = useCallback(() => {
 		"worklet";
-		if (!sharedBoundTag) return;
-		const measured = measure(animatedRef);
-		if (measured) {
+		if (IS_ROOT) ROOT_SIGNAL.value = ROOT_SIGNAL.value + 1;
+	}, [IS_ROOT, ROOT_SIGNAL]);
+
+	const maybeMeasureAndStore = useCallback(
+		({
+			onPress,
+			skipMarkingActive,
+		}: {
+			onPress?: () => void;
+			skipMarkingActive?: boolean;
+		}) => {
+			"worklet";
+			if (!sharedBoundTag) return;
+
+			const measured = measure(animatedRef);
+
+			if (!measured) {
+				console.warn(
+					`[react-native-screen-transitions] measure() returned null for sharedBoundTag="${sharedBoundTag}"`,
+				);
+				return;
+			}
+
 			const key = current.route.key;
+
 			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
-				if (Bounds.getRouteActive(key) === sharedBoundTag) {
+				emitUpdate();
+				if (!skipMarkingActive) {
 					Bounds.setRouteActive(key, sharedBoundTag);
 				}
+				if (onPress) runOnJS(onPress)();
 				return;
 			}
 
+			emitUpdate();
+
 			Bounds.setBounds(key, sharedBoundTag, measured, flattenStyle(style));
-			if (Bounds.getRouteActive(key) === sharedBoundTag) {
+			if (!skipMarkingActive) {
 				Bounds.setRouteActive(key, sharedBoundTag);
 			}
-		}
-	}, [sharedBoundTag, animatedRef, current.route.key, style]);
 
-	const handleLayout = useCallback(() => {
+			if (onPress) runOnJS(onPress)();
+		},
+		[sharedBoundTag, animatedRef, current.route.key, style, emitUpdate],
+	);
+
+	const handleTransitionLayout = useCallback(() => {
 		"worklet";
-		const previousRouteKey = previous?.route.key;
 
-		if (!sharedBoundTag || isMeasured.value || !previousRouteKey) {
+		const prevKey = previous?.route.key;
+		if (!sharedBoundTag || hasMeasured.value || !prevKey) {
+			return;
+		}
+
+		const prevBounds = Bounds.getBounds(prevKey)?.[sharedBoundTag];
+
+		if (prevBounds) {
+			// Should skip mark active if we are in a transition
+			maybeMeasureAndStore({ skipMarkingActive: true });
+			// Should not measure again while in transition
+			hasMeasured.value = true;
+		}
+	}, [maybeMeasureAndStore, sharedBoundTag, previous?.route.key, hasMeasured]);
+
+	const captureActiveOnPress = useStableCallback(() => {
+		if (!sharedBoundTag) {
+			if (onPress) onPress();
 			return;
 		}
 
-		const previousBounds = Bounds.getBounds(previousRouteKey);
-		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
+		// In this case, we DO want to mark active
+		runOnUI(maybeMeasureAndStore)({ onPress });
+	});
 
-		if (hasPreviousBoundForTag) {
-			measureBounds();
-			isMeasured.value = true;
+	const MeasurementSyncProvider = useMemo(() => {
+		if (!IS_ROOT || !sharedBoundTag) {
+			return Fragment;
 		}
-	}, [measureBounds, sharedBoundTag, previous?.route.key, isMeasured]);
+
+		return ({ children }: { children: React.ReactNode }) => (
+			<MeasurementUpdateContext.Provider value={{ updateSignal: ROOT_SIGNAL }}>
+				{children}
+			</MeasurementUpdateContext.Provider>
+		);
+	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
+
+	useAnimatedReaction(
+		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
+		(current) => {
+			"worklet";
+
+			// We don't want to run on the initial amount)
+			if (current === 0 || current === undefined) return;
+
+			// Children should not have the ability to mark active
+			maybeMeasureAndStore({ skipMarkingActive: true });
+		},
+	);
 
 	return {
-		measureBounds,
-		handleLayout,
+		maybeMeasureAndStore,
+		handleTransitionLayout,
+		captureActiveOnPress,
+		MeasurementSyncProvider,
 	};
 };

package/src/hooks/gestures/use-build-gestures.tsx

@@ -14,25 +14,26 @@ import {
 	type SharedValue,
 	useSharedValue,
 } from "react-native-reanimated";
+import {
+	DEFAULT_GESTURE_ACTIVATION_AREA,
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_DRIVES_PROGRESS,
+	DEFAULT_GESTURE_ENABLED,
+	GESTURE_VELOCITY_IMPACT,
+} from "../../constants";
 import type { ScrollConfig } from "../../providers/gestures";
 import { useKeys } from "../../providers/keys";
 import { Animations } from "../../stores/animations";
 import { Gestures } from "../../stores/gestures";
 import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
-import { type ActivationArea, GestureOffsetState } from "../../types/gesture";
+import { GestureOffsetState } from "../../types/gesture";
 import { animate } from "../../utils/animation/animate";
-import { runTransition } from "../../utils/animation/run-transition";
+import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
 import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
 import useStableCallback from "../use-stable-callback";
 
-const GESTURE_VELOCITY_IMPACT = 0.3;
-const DEFAULT_GESTURE_DIRECTION = "horizontal";
-const DEFAULT_GESTURE_ENABLED = false;
-const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
-const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
-
 interface BuildGesturesHookProps {
 	scrollConfig: SharedValue<ScrollConfig | null>;
 }
@@ -293,9 +294,9 @@ export const useBuildGestures = ({
 				runOnJS(setNavigatorDismissal)();
 			}
 
-			runTransition({
+			startScreenTransition({
 				target: shouldDismiss ? "close" : "open",
-				onFinish: shouldDismiss ? handleDismiss : undefined,
+				onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
 				spec: transitionSpec,
 				velocity,
 				animations,

package/src/index.ts

@@ -1,7 +1,7 @@
 import { FlatList, Pressable, ScrollView, View } from "react-native";
+import { presets, specs } from "./__configs__";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
 import MaskedView from "./components/integrations/masked-view";
-import { presets, specs } from "./configs";
 
 export default {
 	View: createTransitionAwareComponent(View),

package/src/integrations/native-stack/utils/debounce.tsx

@@ -1,14 +1,14 @@
 export function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  duration: number
+	func: T,
+	duration: number,
 ): T {
-  let timeout: ReturnType<typeof setTimeout>;
+	let timeout: ReturnType<typeof setTimeout>;
 
-  return function (this: unknown, ...args) {
-    clearTimeout(timeout);
+	return function (this: unknown, ...args) {
+		clearTimeout(timeout);
 
-    timeout = setTimeout(() => {
-      func.apply(this, args);
-    }, duration);
-  } as T;
+		timeout = setTimeout(() => {
+			func.apply(this, args);
+		}, duration);
+	} as T;
 }

package/src/integrations/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import type { Animated } from 'react-native';
+import * as React from "react";
+import type { Animated } from "react-native";
 
 export const AnimatedHeaderHeightContext = React.createContext<
-  Animated.AnimatedInterpolation<number> | undefined
+	Animated.AnimatedInterpolation<number> | undefined
 >(undefined);
 
 export function useAnimatedHeaderHeight() {
-  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+	const animatedValue = React.useContext(AnimatedHeaderHeightContext);
 
-  if (animatedValue === undefined) {
-    throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a native stack navigator?"
-    );
-  }
+	if (animatedValue === undefined) {
+		throw new Error(
+			"Couldn't find the header height. Are you inside a screen in a native stack navigator?",
+		);
+	}
 
-  return animatedValue;
+	return animatedValue;
 }

package/src/integrations/native-stack/utils/useDismissedRouteError.tsx

@@ -1,30 +1,30 @@
 import type {
-  ParamListBase,
-  StackNavigationState,
-} from '@react-navigation/native';
-import * as React from 'react';
+	ParamListBase,
+	StackNavigationState,
+} from "@react-navigation/native";
+import * as React from "react";
 
 export function useDismissedRouteError(
-  state: StackNavigationState<ParamListBase>
+	state: StackNavigationState<ParamListBase>,
 ) {
-  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
-    null
-  );
+	const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+		null,
+	);
 
-  const dismissedRouteName = nextDismissedKey
-    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
-    : null;
+	const dismissedRouteName = nextDismissedKey
+		? state.routes.find((route) => route.key === nextDismissedKey)?.name
+		: null;
 
-  React.useEffect(() => {
-    if (dismissedRouteName) {
-      const message =
-        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
-        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
-        `Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
+	React.useEffect(() => {
+		if (dismissedRouteName) {
+			const message =
+				`The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+				`This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+				`Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
 
-      console.error(message);
-    }
-  }, [dismissedRouteName]);
+			console.error(message);
+		}
+	}, [dismissedRouteName]);
 
-  return { setNextDismissedKey };
+	return { setNextDismissedKey };
 }

package/src/integrations/native-stack/views/FontProcessor.native.tsx

@@ -1,12 +1,12 @@
 // @ts-expect-error importing private module
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+import ReactNativeStyleAttributes from "react-native/Libraries/Components/View/ReactNativeStyleAttributes";
 
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+	fontFamilies: (string | undefined)[],
 ): (string | undefined)[] {
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
+	const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+	if (typeof fontFamilyProcessor === "function") {
+		return fontFamilies.map(fontFamilyProcessor);
+	}
+	return fontFamilies;
 }

package/src/integrations/native-stack/views/FontProcessor.tsx

@@ -1,5 +1,5 @@
 export function processFonts(
-  _: (string | undefined)[]
+	_: (string | undefined)[],
 ): (string | undefined)[] {
-  throw new Error('Not supported on Web');
+	throw new Error("Not supported on Web");
 }

package/src/integrations/native-stack/views/NativeStackView.native.tsx

@@ -32,11 +32,7 @@ import {
 	ScreenStack,
 	ScreenStackItem,
 } from "react-native-screens";
-import { ScreenLifecycleController } from "../../../components/controllers/screen-lifecycle";
-import { RootTransitionAware } from "../../../components/root-transition-aware";
-import { ScreenGestureProvider } from "../../../providers/gestures";
-import { KeysProvider } from "../../../providers/keys";
-import { TransitionStylesProvider } from "../../../providers/transition-styles";
+import { ScreenTransitionProvider } from "../../../providers/screen-transition-provider";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -469,19 +465,13 @@ const SceneView = ({
 								value={isParentHeaderShown || headerShown !== false}
 							>
 								<HeaderBackContext.Provider value={headerBack}>
-									<KeysProvider
+									<ScreenTransitionProvider
 										previous={previousDescriptor}
 										current={descriptor}
 										next={nextDescriptor}
 									>
-										<ScreenGestureProvider>
-											<ScreenLifecycleController>
-												<TransitionStylesProvider>
-													<RootTransitionAware>{render()}</RootTransitionAware>
-												</TransitionStylesProvider>
-											</ScreenLifecycleController>
-										</ScreenGestureProvider>
-									</KeysProvider>
+										{render()}
+									</ScreenTransitionProvider>
 								</HeaderBackContext.Provider>
 							</HeaderShownContext.Provider>
 						</HeaderHeightContext.Provider>

package/src/providers/gestures.tsx

@@ -26,15 +26,6 @@ type ScreenGestureProviderProps = {
 	children: React.ReactNode;
 };
 
-export const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
-	x: 0,
-	y: 0,
-	contentHeight: 0,
-	contentWidth: 0,
-	layoutHeight: 0,
-	layoutWidth: 0,
-};
-
 const GestureContext = createContext<GestureContextType | undefined>(undefined);
 
 export const ScreenGestureProvider = ({

package/src/providers/screen-transition-provider.tsx

@@ -0,0 +1,33 @@
+import type React from "react";
+import { ScreenLifecycleController } from "../components/controllers/screen-lifecycle";
+import { RootTransitionAware } from "../components/root-transition-aware";
+import { ScreenGestureProvider } from "../providers/gestures";
+import { KeysProvider } from "../providers/keys";
+import { TransitionStylesProvider } from "../providers/transition-styles";
+import type { NativeStackDescriptor } from "../types/navigator";
+
+type Props = {
+	previous?: NativeStackDescriptor;
+	current: NativeStackDescriptor;
+	next?: NativeStackDescriptor;
+	children: React.ReactNode;
+};
+
+export function ScreenTransitionProvider({
+	previous,
+	current,
+	next,
+	children,
+}: Props) {
+	return (
+		<KeysProvider previous={previous} current={current} next={next}>
+			<ScreenGestureProvider>
+				<ScreenLifecycleController>
+					<TransitionStylesProvider>
+						<RootTransitionAware>{children}</RootTransitionAware>
+					</TransitionStylesProvider>
+				</ScreenLifecycleController>
+			</ScreenGestureProvider>
+		</KeysProvider>
+	);
+}

package/src/providers/transition-styles.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from "react";
 import { isWorkletFunction, useDerivedValue } from "react-native-reanimated";
+import { NO_STYLES } from "../constants";
 import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
 import type { TransitionInterpolatedStyle } from "../types/animation";
 
@@ -7,8 +8,6 @@ type Props = {
 	children: React.ReactNode;
 };
 
-const EMPTY_MAP = Object.freeze({});
-
 const TransitionStylesContext = createContext<ReturnType<
 	typeof useMemo<{
 		stylesMap: ReturnType<typeof useDerivedValue<TransitionInterpolatedStyle>>;
@@ -25,13 +24,15 @@ export function TransitionStylesProvider({ children }: Props) {
 		"worklet";
 
 		if (screenStyleInterpolator && !isFunctionWorklet && __DEV__) {
-			console.warn("screenStyleInterpolator is not a worklet function");
-			return EMPTY_MAP;
+			console.warn(
+				`[react-native-screen-transitions] screenStyleInterpolator is not a worklet function`,
+			);
+			return NO_STYLES;
 		}
 
 		return screenStyleInterpolator
 			? screenStyleInterpolator(screenInterpolatorProps.value)
-			: EMPTY_MAP;
+			: NO_STYLES;
 	});
 
 	const value = useMemo(() => {

package/src/types/core.ts

@@ -42,15 +42,6 @@ export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	 * </Transition.View>
 	 */
 	sharedBoundTag?: string;
-
-	/**
-	 * Eagerly measure this component on layout and store the result in the
-	 * Bounds registry. Useful for nested shared elements that may not receive
-	 * the press event but still need up-to-date measurements at navigation time.
-	 *
-	 * Only has an effect when used together with `sharedBoundTag`.
-	 */
-	measureOnLayout?: boolean;
 };
 
 export type TransitionConfig = {

package/src/utils/animation/{run-transition.ts → start-screen-transition.ts}

@@ -3,21 +3,21 @@ import type { AnimationMap } from "../../stores/animations";
 import type { TransitionSpec } from "../../types/animation";
 import { animate } from "./animate";
 
-interface RunTransitionProps {
+interface StartScreenTransitionProps {
 	target: "open" | "close";
 	spec?: TransitionSpec;
-	onFinish?: (finished: boolean) => void;
+	onAnimationFinish?: (finished: boolean) => void;
 	animations: AnimationMap;
 	velocity?: number;
 }
 
-export const runTransition = ({
+export const startScreenTransition = ({
 	target,
 	spec,
-	onFinish,
+	onAnimationFinish,
 	animations,
 	velocity,
-}: RunTransitionProps) => {
+}: StartScreenTransitionProps) => {
 	"worklet";
 	const value = target === "open" ? 1 : 0;
 	const config = target === "open" ? spec?.open : spec?.close;
@@ -32,8 +32,8 @@ export const runTransition = ({
 		animating.value = 0;
 		progress.value = value;
 
-		if (onFinish) {
-			runOnJS(onFinish)(true);
+		if (onAnimationFinish) {
+			runOnJS(onAnimationFinish)(true);
 		}
 		return;
 	}
@@ -44,8 +44,8 @@ export const runTransition = ({
 		"worklet";
 		if (finished) {
 			animating.value = 0;
-			if (onFinish) {
-				runOnJS(onFinish)(finished);
+			if (onAnimationFinish) {
+				runOnJS(onAnimationFinish)(finished);
 			}
 		}
 	});

package/src/utils/bounds/_types/get-bounds.ts

@@ -1,10 +1,10 @@
-import type { ScreenPhase } from '../../../types/core';
-import type { ScreenTransitionState } from '../../../types/animation';
+import type { ScreenTransitionState } from "../../../types/animation";
+import type { ScreenPhase } from "../../../types/core";
 
 export type GetBoundsParams = {
-  id: string | null;
-  phase?: ScreenPhase;
-  previous?: ScreenTransitionState;
-  current: ScreenTransitionState;
-  next?: ScreenTransitionState;
+	id: string | null;
+	phase?: ScreenPhase;
+	previous?: ScreenTransitionState;
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
 };