react-native-screen-transitions 3.4.0 → 3.5.0

package/src/shared/components/create-boundary-component/hooks/use-measurer.ts

@@ -0,0 +1,144 @@
+import { useCallback } from "react";
+import type { View } from "react-native";
+import { useWindowDimensions } from "react-native";
+import {
+	type AnimatedRef,
+	measure,
+	type StyleProps,
+} from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bounds";
+import { applyMeasuredBoundsWrites } from "../../../stores/bounds/helpers/apply-measured-bounds-writes";
+import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
+import type { MeasureParams } from "../types";
+import {
+	areMeasurementsEqual,
+	isMeasurementInViewport,
+} from "./helpers/measurement";
+import {
+	getMeasureIntentFlags,
+	resolveMeasureWritePlan,
+} from "./helpers/measurement-rules";
+
+interface UseMeasurerParams {
+	enabled: boolean;
+	sharedBoundTag: string;
+	preferredSourceScreenKey?: string;
+	currentScreenKey: string;
+	ancestorKeys: string[];
+	navigatorKey?: string;
+	ancestorNavigatorKeys?: string[];
+	preparedStyles: StyleProps;
+	measuredAnimatedRef: AnimatedRef<View>;
+}
+
+export const useMeasurer = ({
+	enabled,
+	sharedBoundTag,
+	preferredSourceScreenKey,
+	currentScreenKey,
+	ancestorKeys,
+	navigatorKey,
+	ancestorNavigatorKeys,
+	preparedStyles,
+	measuredAnimatedRef,
+}: UseMeasurerParams) => {
+	const { width: viewportWidth, height: viewportHeight } =
+		useWindowDimensions();
+
+	return useCallback(
+		({ intent }: MeasureParams = {}) => {
+			"worklet";
+			if (!enabled) return;
+
+			const intents = getMeasureIntentFlags(intent);
+
+			const expectedSourceScreenKey: string | undefined =
+				resolvePendingSourceKey(sharedBoundTag, preferredSourceScreenKey) ||
+				undefined;
+
+			const pendingLink = expectedSourceScreenKey
+				? BoundStore.link.getPending(sharedBoundTag, expectedSourceScreenKey)
+				: BoundStore.link.getPending(sharedBoundTag);
+			const hasPendingLink = pendingLink !== null;
+			const hasAttachableSourceLink = expectedSourceScreenKey
+				? BoundStore.link.hasSource(sharedBoundTag, expectedSourceScreenKey)
+				: false;
+			const hasSourceLink = BoundStore.link.hasSource(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+			const hasDestinationLink = BoundStore.link.hasDestination(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+
+			const writePlan = resolveMeasureWritePlan({
+				intents,
+				hasPendingLink,
+				hasSourceLink,
+				hasDestinationLink,
+				hasAttachableSourceLink,
+			});
+
+			if (!writePlan.writesAny) {
+				return;
+			}
+
+			const measured = measure(measuredAnimatedRef);
+			if (!measured) return;
+
+			const destinationInViewport =
+				!writePlan.wantsDestinationWrite ||
+				isMeasurementInViewport(measured, viewportWidth, viewportHeight);
+
+			if (
+				!destinationInViewport &&
+				!writePlan.captureSource &&
+				!writePlan.refreshSource
+			) {
+				return;
+			}
+
+			const existingMeasuredEntry = BoundStore.entry.getMeasured(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+			const hasMeasuredEntryChanged =
+				!existingMeasuredEntry ||
+				!areMeasurementsEqual(existingMeasuredEntry.bounds, measured);
+
+			applyMeasuredBoundsWrites({
+				sharedBoundTag,
+				currentScreenKey,
+				measured,
+				preparedStyles,
+				ancestorKeys,
+				navigatorKey,
+				ancestorNavigatorKeys,
+				expectedSourceScreenKey,
+				shouldWriteEntry: hasMeasuredEntryChanged,
+				shouldSetSource: writePlan.captureSource,
+				shouldUpdateSource: writePlan.refreshSource && hasMeasuredEntryChanged,
+				shouldUpdateDestination:
+					writePlan.refreshDestination &&
+					destinationInViewport &&
+					hasMeasuredEntryChanged,
+				shouldSetDestination:
+					writePlan.completeDestination && destinationInViewport,
+			});
+		},
+		[
+			enabled,
+			sharedBoundTag,
+			preferredSourceScreenKey,
+			currentScreenKey,
+			ancestorKeys,
+			navigatorKey,
+			ancestorNavigatorKeys,
+			preparedStyles,
+			measuredAnimatedRef,
+			viewportWidth,
+			viewportHeight,
+		],
+	);
+};

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 ?? "";