react-native-screen-transitions 3.4.0 → 3.5.0-beta.0

package/src/shared/components/create-boundary-component/hooks/{use-pre-transition-measurement.ts → use-refresh-boundary.ts}

@@ -2,13 +2,9 @@ import { useAnimatedReaction } from "react-native-reanimated";
 import { AnimationStore } from "../../../stores/animation.store";
 import { BoundStore } from "../../../stores/bounds";
 import { GestureStore } from "../../../stores/gesture.store";
-import type { BoundaryId, MaybeMeasureAndStoreParams } from "../types";
-import {
-	PREPARE_DESTINATION_MEASUREMENT_INTENT,
-	resolvePrepareSourceMeasurementIntent,
-} from "./helpers/measurement-rules";
+import type { BoundaryId, MeasureParams } from "../types";
 
-export const usePreTransitionMeasurement = (params: {
+interface UseRefreshBoundaryParams {
 	enabled: boolean;
 	sharedBoundTag: string;
 	id: BoundaryId;
@@ -16,19 +12,19 @@ export const usePreTransitionMeasurement = (params: {
 	currentScreenKey: string;
 	nextScreenKey?: string;
 	hasNextScreen: boolean;
-	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
-}) => {
-	const {
-		enabled,
-		sharedBoundTag,
-		id,
-		group,
-		currentScreenKey,
-		nextScreenKey,
-		hasNextScreen,
-		maybeMeasureAndStore,
-	} = params;
+	measureBoundary: (options: MeasureParams) => void;
+}
 
+export const useRefreshBoundary = ({
+	enabled,
+	sharedBoundTag,
+	id,
+	group,
+	currentScreenKey,
+	nextScreenKey,
+	hasNextScreen,
+	measureBoundary,
+}: UseRefreshBoundaryParams) => {
 	const currentWillAnimate = AnimationStore.getValue(
 		currentScreenKey,
 		"willAnimate",
@@ -56,7 +52,7 @@ export const usePreTransitionMeasurement = (params: {
 			if (nextValue === 0 || nextValue === previousValue) return;
 
 			const currentGroupActiveId = group
-				? BoundStore.getGroupActiveId(group)
+				? BoundStore.group.getActiveId(group)
 				: null;
 
 			if (group && currentGroupActiveId !== String(id)) {
@@ -65,25 +61,27 @@ export const usePreTransitionMeasurement = (params: {
 
 			const shouldCancelMeasurement =
 				!!nextAnimating?.get() && !!nextDragging?.get();
+
 			if (shouldCancelMeasurement) {
 				return;
 			}
 
-			const hasSourceLink = BoundStore.hasSourceLink(
+			const hasSourceLink = BoundStore.link.hasSource(
 				sharedBoundTag,
 				currentScreenKey,
 			);
 
-			const intent = resolvePrepareSourceMeasurementIntent({
-				hasSourceLink,
-				shouldRefreshExistingSource: !!group,
-			});
+			const intent = !hasSourceLink
+				? "capture-source"
+				: group
+					? "refresh-source"
+					: null;
 
 			if (!intent) {
 				return;
 			}
 
-			maybeMeasureAndStore({ intent });
+			measureBoundary({ intent });
 		},
 	);
 
@@ -93,17 +91,24 @@ export const usePreTransitionMeasurement = (params: {
 			"worklet";
 			if (!enabled || hasNextScreen) return;
 			if (nextValue === 0 || nextValue === previousValue) return;
+
 			const currentGroupActiveId = group
-				? BoundStore.getGroupActiveId(group)
+				? BoundStore.group.getActiveId(group)
 				: null;
-			if (group && currentGroupActiveId !== String(id)) return;
+
+			if (group && currentGroupActiveId !== String(id)) {
+				return;
+			}
 
 			const shouldCancelMeasurement =
 				!!currentAnimating.get() && !!currentDragging.get();
-			if (shouldCancelMeasurement) return;
 
-			maybeMeasureAndStore({
-				intent: PREPARE_DESTINATION_MEASUREMENT_INTENT,
+			if (shouldCancelMeasurement) {
+				return;
+			}
+
+			measureBoundary({
+				intent: ["complete-destination", "refresh-destination"] as const,
 			});
 		},
 	);

package/src/shared/components/create-boundary-component/types.ts

@@ -39,12 +39,16 @@ export type BoundaryComponentProps<P extends object> = Omit<P, "id"> &
 /** Convenience alias for a View-based boundary (the most common case). */
 export type BoundaryProps = BoundaryComponentProps<ViewProps>;
 
-export type MeasurementIntent =
+export type MeasureIntent =
 	| "capture-source"
 	| "complete-destination"
 	| "refresh-source"
 	| "refresh-destination";
 
-export interface MaybeMeasureAndStoreParams {
-	intent?: MeasurementIntent | readonly MeasurementIntent[];
+export type MeasurementIntent = MeasureIntent;
+
+export interface MeasureParams {
+	intent?: MeasureIntent | readonly MeasureIntent[];
 }
+
+export interface MaybeMeasureAndStoreParams extends MeasureParams {}

package/src/shared/components/create-transition-aware-component.tsx

@@ -101,26 +101,17 @@ export function createTransitionAwareComponent<P extends object>(
 		} = props as any;
 
 		const animatedRef = useAnimatedRef<View>();
-		const { elementStylesMap } = useScreenStyles();
+		const { stylesMap } = useScreenStyles();
 		const associatedId = sharedBoundTag || styleId;
 
 		const associatedStyles = useAnimatedStyle(() => {
 			"worklet";
 
 			if (!associatedId) {
-				return { opacity: 1 };
+				return NO_STYLES;
 			}
 
-			const baseStyle =
-				(elementStylesMap.value[associatedId]?.style as
-					| Record<string, any>
-					| undefined) ?? (NO_STYLES as Record<string, any>);
-
-			if ("opacity" in baseStyle) {
-				return baseStyle;
-			}
-
-			return { ...baseStyle, opacity: 1 };
+			return stylesMap.get()[associatedId]?.style ?? NO_STYLES;
 		});
 
 		const associatedProps = useAnimatedProps(() => {
@@ -130,7 +121,7 @@ export function createTransitionAwareComponent<P extends object>(
 				return NO_PROPS;
 			}
 
-			return elementStylesMap.value[associatedId]?.props ?? NO_PROPS;
+			return stylesMap.get()[associatedId]?.props ?? NO_PROPS;
 		});
 
 		return (

package/src/shared/components/overlay/variations/float-overlay.tsx

@@ -71,7 +71,7 @@ export function FloatOverlay() {
 	return (
 		<DescriptorsProvider current={current} previous={previous} next={next}>
 			<ScreenAnimationProvider>
-				<ScreenStylesProvider>
+				<ScreenStylesProvider isFloatingOverlay>
 					<OverlayHost scene={scene} overlayScreenState={overlayScreenState} />
 				</ScreenStylesProvider>
 			</ScreenAnimationProvider>

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -6,8 +6,10 @@ import {
 	useDescriptors,
 } from "../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../stores/animation.store";
-import { SystemStore } from "../../../stores/system.store";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../../stores/system.store";
 
 export function useContentLayout() {
 	const { current } = useDescriptors();
@@ -15,11 +17,14 @@ export function useContentLayout() {
 	const { height: screenHeight } = useWindowDimensions();
 	const routeKey = current.route.key;
 	const animations = AnimationStore.getBag(routeKey);
+	const system = SystemStore.getBag(routeKey);
+
 	const { targetProgress, resolvedAutoSnapPoint, measuredContentLayout } =
-		SystemStore.getBag(routeKey);
+		system;
+	const { requestLifecycleTransition } = system.actions;
+
 	const experimental_animateOnInitialMount =
 		current.options.experimental_animateOnInitialMount;
-	const transitionSpec = current.options.transitionSpec;
 
 	return useCallback(
 		(event: LayoutChangeEvent) => {
@@ -52,12 +57,10 @@ export function useContentLayout() {
 					return;
 				}
 
-				animateToProgress({
-					target: nextFraction,
-					spec: transitionSpec,
-					animations,
-					targetProgress,
-				});
+				requestLifecycleTransition(
+					LifecycleTransitionRequestKind.Open,
+					nextFraction,
+				);
 			})(width, height, fraction);
 		},
 		[
@@ -68,7 +71,7 @@ export function useContentLayout() {
 			isFirstKey,
 			screenHeight,
 			experimental_animateOnInitialMount,
-			transitionSpec,
+			requestLifecycleTransition,
 		],
 	);
 }

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

@@ -24,7 +24,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { layerStylesMap } = useScreenStyles();
+	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
 
@@ -108,12 +108,12 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const animatedBackdropStyle = useAnimatedStyle(() => {
 		"worklet";
-		return layerStylesMap.value.backdrop?.style ?? NO_STYLES;
+		return stylesMap.get().backdrop?.style ?? NO_STYLES;
 	});
 
 	const animatedBackdropProps = useAnimatedProps(() => {
 		"worklet";
-		return layerStylesMap.value.backdrop?.props ?? NO_PROPS;
+		return stylesMap.get().backdrop?.props ?? NO_PROPS;
 	});
 
 	return (

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

@@ -10,7 +10,6 @@ import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useGestureContext } from "../../../providers/gestures";
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useScreenStyles } from "../../../providers/screen/styles";
-import { resolveNavigationMaskEnabled } from "../../../utils/resolve-screen-transition-options";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { SurfaceContainer } from "./surface-container";
@@ -23,13 +22,11 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const { layerStylesMap } = useScreenStyles();
+		const { stylesMap } = useScreenStyles();
 		const { current } = useDescriptors();
 
 		const gestureContext = useGestureContext();
-		const isNavigationMaskEnabled = resolveNavigationMaskEnabled(
-			current.options,
-		);
+		const isNavigationMaskEnabled = !!current.options.navigationMaskEnabled;
 		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 
 		const hasAutoSnapPoint =
@@ -39,12 +36,12 @@ export const ContentLayer = memo(
 
 		const animatedContentStyle = useAnimatedStyle(() => {
 			"worklet";
-			return layerStylesMap.value.content?.style || NO_STYLES;
+			return stylesMap.get().content?.style || NO_STYLES;
 		});
 
 		const animatedContentProps = useAnimatedProps(() => {
 			"worklet";
-			return layerStylesMap.value.content?.props ?? NO_PROPS;
+			return stylesMap.get().content?.props ?? NO_PROPS;
 		});
 
 		return (

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -27,21 +27,19 @@ let hasWarnedMissingMaskedView = false;
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
-		const { layerStylesMap } = useScreenStyles();
+		const { stylesMap } = useScreenStyles();
 
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				layerStylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style ||
-				NO_STYLES
+				stylesMap.get()[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
 			);
 		});
 
 		const animatedNavigationMaskContainerStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				layerStylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style ||
-				NO_STYLES
+				stylesMap.get()[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
 			);
 		});
 
@@ -78,6 +76,7 @@ export const MaybeMaskedNavigationContainer = memo(
 						styles.navigationContainer,
 						animatedNavigationMaskContainerStyle,
 					]}
+					pointerEvents={pointerEvents}
 					collapsable={false}
 				>
 					{children}

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

@@ -14,7 +14,7 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { layerStylesMap } = useScreenStyles();
+	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 
 	const SurfaceComponent = current.options.surfaceComponent;
@@ -27,12 +27,12 @@ export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 
 	const animatedSurfaceStyle = useAnimatedStyle(() => {
 		"worklet";
-		return layerStylesMap.value.surface?.style ?? NO_STYLES;
+		return stylesMap.get().surface?.style ?? NO_STYLES;
 	});
 
 	const animatedSurfaceProps = useAnimatedProps(() => {
 		"worklet";
-		return layerStylesMap.value.surface?.props ?? NO_PROPS;
+		return stylesMap.get().surface?.props ?? NO_PROPS;
 	});
 
 	if (!AnimatedSurfaceComponent) return children;

package/src/shared/components/screen-lifecycle/hooks/helpers/reset-stores-for-screen.ts

@@ -0,0 +1,29 @@
+import { runOnUI } from "react-native-reanimated";
+import { AnimationStore } from "../../../../stores/animation.store";
+import { BoundStore } from "../../../../stores/bounds";
+import { GestureStore } from "../../../../stores/gesture.store";
+import { SystemStore } from "../../../../stores/system.store";
+
+export function resetStoresForScreen(
+	routeKey: string,
+	isBranchScreen: boolean,
+	branchNavigatorKey?: string,
+) {
+	AnimationStore.clearBag(routeKey);
+	GestureStore.clearBag(routeKey);
+	SystemStore.clearBag(routeKey);
+
+	runOnUI(() => {
+		"worklet";
+		if (!isBranchScreen) return;
+
+		BoundStore.cleanup.byScreen(routeKey);
+
+		if (branchNavigatorKey) {
+			BoundStore.cleanup.byBranch(branchNavigatorKey);
+			return;
+		}
+
+		BoundStore.cleanup.byAncestor(routeKey);
+	})();
+}

package/src/shared/components/screen-lifecycle/hooks/{use-screen-events.ts → history/use-screen-history.ts}

@@ -1,9 +1,13 @@
 import { useEffect } from "react";
 import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import useStableCallback from "../../../hooks/use-stable-callback";
-import type { BaseDescriptor } from "../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../stores/animation.store";
-import { HistoryStore } from "../../../stores/history.store";
+import useStableCallback from "../../../../hooks/use-stable-callback";
+import type { BaseDescriptor } from "../../../../providers/screen/descriptors";
+import type { AnimationStoreMap } from "../../../../stores/animation.store";
+import { HistoryStore } from "../../../../stores/history.store";
+import {
+	registerMountedRoute,
+	unregisterMountedRoute,
+} from "./navigator-route-registry";
 
 function hasSnapPoints(descriptor: BaseDescriptor): boolean {
 	const snapPoints = descriptor.options?.snapPoints;
@@ -27,24 +31,37 @@ function shouldTrackInHistory(descriptor: BaseDescriptor): boolean {
 }
 
 /**
- * Updates the HistoryStore for navigation history tracking.
+ * Keeps navigator route registration and screen history in sync.
  */
-export function useScreenEvents(
+export function useScreenHistory(
 	current: BaseDescriptor,
 	previous: BaseDescriptor | undefined,
 	animations: AnimationStoreMap,
 ) {
 	const navigatorKey = current.navigation.getState()?.key ?? "";
+	const routeKey = current.route.key;
+
+	useEffect(() => {
+		registerMountedRoute(navigatorKey, routeKey);
+
+		return () => {
+			const shouldClearNavigator = unregisterMountedRoute(
+				navigatorKey,
+				routeKey,
+			);
+			if (shouldClearNavigator) {
+				HistoryStore.clearNavigator(navigatorKey);
+			}
+		};
+	}, [navigatorKey, routeKey]);
 
 	// Track history via focus listener - waits for nested navigators to initialize
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
 	useEffect(() => {
-		// Check on mount (after paint, nested navs initialized)
 		if (shouldTrackInHistory(current)) {
 			HistoryStore.focus(current, navigatorKey);
 		}
 
-		// Also listen for focus events
 		const unsubscribe = current.navigation.addListener?.("focus", () => {
 			if (shouldTrackInHistory(current)) {
 				HistoryStore.focus(current, navigatorKey);
@@ -54,7 +71,6 @@ export function useScreenEvents(
 		return () => unsubscribe?.();
 	}, []);
 
-	// When closing starts, focus previous in history
 	const handleBlur = useStableCallback(() => {
 		if (previous && shouldTrackInHistory(previous)) {
 			const prevNavigatorKey = previous.navigation.getState()?.key ?? "";

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

@@ -0,0 +1,160 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: STACK_TYPE is stable per navigator */
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { useAnimatedReaction } from "react-native-reanimated";
+import useStableCallback from "../../../hooks/use-stable-callback";
+import {
+	type BaseDescriptor,
+	useDescriptorDerivations,
+} from "../../../providers/screen/descriptors";
+import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import { useManagedStackContext } from "../../../providers/stack/managed.provider";
+import type { AnimationStoreMap } from "../../../stores/animation.store";
+import { GestureStore } from "../../../stores/gesture.store";
+import {
+	LifecycleTransitionRequestKind,
+	type SystemStoreActions,
+	type SystemStoreMap,
+} from "../../../stores/system.store";
+import { StackType } from "../../../types/stack.types";
+import { resetStoresForScreen } from "./helpers/reset-stores-for-screen";
+
+interface CloseHookParams {
+	current: BaseDescriptor;
+	animations: AnimationStoreMap;
+	requestLifecycleTransition: SystemStoreActions["requestLifecycleTransition"];
+	resetStores: () => void;
+}
+
+/**
+ * Managed close - reacts to closingRouteKeysShared from ManagedStackContext.
+ * Used by blank-stack and component-stack.
+ */
+const useManagedClose = ({
+	current,
+	requestLifecycleTransition,
+	resetStores,
+}: CloseHookParams) => {
+	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
+	const routeKey = current.route.key;
+
+	const handleManagedCloseEnd = useStableCallback((finished: boolean) => {
+		if (!finished) return;
+		handleCloseRoute({ route: current.route });
+		requestAnimationFrame(() => {
+			resetStores();
+		});
+	});
+
+	useAnimatedReaction(
+		() => {
+			const keys = closingRouteKeysShared.value;
+			return keys?.includes(routeKey) ?? false;
+		},
+		(isClosing, wasClosing) => {
+			if (!isClosing || wasClosing) return;
+
+			requestLifecycleTransition(
+				LifecycleTransitionRequestKind.ManagedClose,
+				0,
+			);
+		},
+	);
+
+	return { handleManagedCloseEnd };
+};
+
+/**
+ * Native stack close - listens to beforeRemove navigation event.
+ */
+const useNativeStackClose = ({
+	current,
+	animations,
+	requestLifecycleTransition,
+	resetStores,
+}: CloseHookParams) => {
+	const { parentScreenKey } = useDescriptorDerivations();
+	const pendingActionRef = useRef<any>(null);
+
+	const nearestAncestorDismissing = useMemo(() => {
+		if (!parentScreenKey) return null;
+
+		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
+	}, [parentScreenKey]);
+
+	const handleNativeCloseEnd = useStableCallback((finished: boolean) => {
+		if (!finished || !pendingActionRef.current) {
+			pendingActionRef.current = null;
+			return;
+		}
+
+		current.navigation.dispatch(pendingActionRef.current);
+		pendingActionRef.current = null;
+		requestAnimationFrame(() => {
+			resetStores();
+		});
+	});
+
+	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 routeIndex = state.routes.findIndex(
+			(route) => route.key === routeKey,
+		);
+		const isFirstScreen = routeIndex <= 0;
+
+		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
+			animations.closing.set(1);
+			resetStores();
+			return;
+		}
+
+		e.preventDefault();
+		pendingActionRef.current = e.data.action;
+		requestLifecycleTransition(LifecycleTransitionRequestKind.NativeClose, 0);
+	});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: navigation listener should only rebind when the navigator instance changes
+	useLayoutEffect(() => {
+		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,
+	animations: AnimationStoreMap,
+	system: SystemStoreMap,
+): {
+	handleManagedCloseEnd?: (finished: boolean) => void;
+	handleNativeCloseEnd?: (finished: boolean) => void;
+} {
+	const routeKey = current.route.key;
+	const { flags } = useStackCoreContext();
+	const { isBranchScreen, branchNavigatorKey } = useDescriptorDerivations();
+	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
+	const { requestLifecycleTransition } = system.actions;
+
+	const resetStores = useStableCallback(() => {
+		resetStoresForScreen(routeKey, isBranchScreen, branchNavigatorKey);
+	});
+
+	const closeParams: CloseHookParams = {
+		current,
+		animations,
+		requestLifecycleTransition,
+		resetStores,
+	};
+
+	if (isNativeStack) {
+		return useNativeStackClose(closeParams);
+	}
+
+	return useManagedClose(closeParams);
+}