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

package/src/shared/components/create-boundary-component/helpers/resolve-pending-source-key.ts

@@ -7,14 +7,11 @@ export const resolvePendingSourceKey = (
 	"worklet";
 	if (
 		expectedSourceScreenKey &&
-		(BoundStore.hasPendingLinkFromSource(
-			sharedBoundTag,
-			expectedSourceScreenKey,
-		) ||
-			BoundStore.hasSourceLink(sharedBoundTag, expectedSourceScreenKey))
+		(BoundStore.link.getPending(sharedBoundTag, expectedSourceScreenKey) ||
+			BoundStore.link.hasSource(sharedBoundTag, expectedSourceScreenKey))
 	) {
 		return expectedSourceScreenKey;
 	}
 
-	return BoundStore.getLatestPendingSourceScreenKey(sharedBoundTag);
+	return BoundStore.link.getPending(sharedBoundTag)?.source.screenKey ?? null;
 };

package/src/shared/components/create-boundary-component/hooks/helpers/measurement-rules.ts

@@ -1,18 +1,18 @@
-import type { MeasurementIntent } from "../../types";
+import type { MeasureIntent } from "../../types";
 
 type PresenceLikeEntry = {
 	count: number;
 	ancestorKeys?: string[];
 };
 
-export type MeasurementIntentFlags = {
+export type MeasureIntentFlags = {
 	captureSource: boolean;
 	completeDestination: boolean;
 	refreshSource: boolean;
 	refreshDestination: boolean;
 };
 
-export type MeasurementWritePlan = {
+export type MeasureWritePlan = {
 	captureSource: boolean;
 	completeDestination: boolean;
 	refreshSource: boolean;
@@ -26,11 +26,11 @@ export type DeferredMeasurementAction =
 	| "queue-or-flush"
 	| "noop";
 
-export const getMeasurementIntentFlags = (
-	intent?: MeasurementIntent | readonly MeasurementIntent[],
-): MeasurementIntentFlags => {
+export const getMeasureIntentFlags = (
+	intent?: MeasureIntent | readonly MeasureIntent[],
+): MeasureIntentFlags => {
 	"worklet";
-	const flags: MeasurementIntentFlags = {
+	const flags: MeasureIntentFlags = {
 		captureSource: false,
 		completeDestination: false,
 		refreshSource: false,
@@ -63,13 +63,13 @@ export const getMeasurementIntentFlags = (
 	return flags;
 };
 
-export const resolveMeasurementWritePlan = (params: {
-	intents: MeasurementIntentFlags;
+export const resolveMeasureWritePlan = (params: {
+	intents: MeasureIntentFlags;
 	hasPendingLink: boolean;
 	hasSourceLink: boolean;
 	hasDestinationLink: boolean;
 	hasAttachableSourceLink: boolean;
-}): MeasurementWritePlan => {
+}): MeasureWritePlan => {
 	"worklet";
 	const {
 		intents,
@@ -203,7 +203,7 @@ export const resolvePendingDestinationRetrySignal = (params: {
 export const resolvePrepareSourceMeasurementIntent = (params: {
 	hasSourceLink: boolean;
 	shouldRefreshExistingSource: boolean;
-}): MeasurementIntent | null => {
+}): MeasureIntent | null => {
 	"worklet";
 	if (!params.hasSourceLink) {
 		return "capture-source";
@@ -215,7 +215,7 @@ export const resolvePrepareSourceMeasurementIntent = (params: {
 export const PREPARE_DESTINATION_MEASUREMENT_INTENT = [
 	"complete-destination",
 	"refresh-destination",
-] as const satisfies readonly MeasurementIntent[];
+] as const satisfies readonly MeasureIntent[];
 
 export const resolveGroupActiveMeasurementAction = (params: {
 	enabled: boolean;

package/src/shared/components/create-boundary-component/hooks/helpers/measurement.ts

@@ -0,0 +1,43 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+
+export const SNAPSHOT_EPSILON = 0.5;
+
+export const areMeasurementsEqual = (
+	a: MeasuredDimensions,
+	b: MeasuredDimensions,
+): boolean => {
+	"worklet";
+
+	return (
+		Math.abs(a.x - b.x) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.y - b.y) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.pageX - b.pageX) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.pageY - b.pageY) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.width - b.width) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.height - b.height) <= SNAPSHOT_EPSILON
+	);
+};
+
+export const isMeasurementInViewport = (
+	measured: MeasuredDimensions,
+	viewportWidth: number,
+	viewportHeight: number,
+): boolean => {
+	"worklet";
+
+	if (measured.width <= 0 || measured.height <= 0) {
+		return false;
+	}
+
+	const toleranceX = viewportWidth * 0.15;
+	const toleranceY = viewportHeight * 0.15;
+	const centerX = measured.pageX + measured.width / 2;
+	const centerY = measured.pageY + measured.height / 2;
+
+	return (
+		centerX >= -toleranceX &&
+		centerX <= viewportWidth + toleranceX &&
+		centerY >= -toleranceY &&
+		centerY <= viewportHeight + toleranceY
+	);
+};

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

@@ -28,20 +28,15 @@ export const useBoundaryPresence = (params: {
 	useLayoutEffect(() => {
 		if (!enabled) return;
 
-		runOnUI(BoundStore.registerBoundaryPresence)(
-			sharedBoundTag,
-			currentScreenKey,
+		runOnUI(BoundStore.entry.set)(sharedBoundTag, currentScreenKey, {
 			ancestorKeys,
 			boundaryConfig,
 			navigatorKey,
 			ancestorNavigatorKeys,
-		);
+		});
 
 		return () => {
-			runOnUI(BoundStore.unregisterBoundaryPresence)(
-				sharedBoundTag,
-				currentScreenKey,
-			);
+			runOnUI(BoundStore.entry.remove)(sharedBoundTag, currentScreenKey);
 		};
 	}, [
 		enabled,

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

@@ -0,0 +1,149 @@
+import { useLayoutEffect } from "react";
+import {
+	cancelAnimation,
+	runOnUI,
+	useAnimatedReaction,
+	useSharedValue,
+	withDelay,
+	withTiming,
+} from "react-native-reanimated";
+import { AnimationStore } from "../../../stores/animation.store";
+import { BoundStore } from "../../../stores/bounds";
+import { SystemStore } from "../../../stores/system.store";
+import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
+import type { BoundaryId, MeasureParams } from "../types";
+
+const VIEWPORT_RETRY_DELAY_MS = 16;
+
+interface UseCaptureDestinationBoundaryParams {
+	sharedBoundTag: string;
+	enabled: boolean;
+	id: BoundaryId;
+	group?: string;
+	currentScreenKey: string;
+	expectedSourceScreenKey?: string;
+	measureBoundary: (options: MeasureParams) => void;
+}
+
+export const useCaptureDestinationBoundary = ({
+	sharedBoundTag,
+	enabled,
+	id,
+	group,
+	currentScreenKey,
+	expectedSourceScreenKey,
+	measureBoundary,
+}: UseCaptureDestinationBoundaryParams) => {
+	const animating = AnimationStore.getValue(currentScreenKey, "animating");
+	const closing = AnimationStore.getValue(currentScreenKey, "closing");
+	const system = SystemStore.getBag(currentScreenKey);
+	const { blockLifecycleStart, unblockLifecycleStart } = system.actions;
+	const isBlockingLifecycleStart = useSharedValue(0);
+	const retryToken = useSharedValue(0);
+
+	const ensureLifecycleStartBlocked = () => {
+		"worklet";
+		if (isBlockingLifecycleStart.get()) {
+			return;
+		}
+
+		blockLifecycleStart();
+		isBlockingLifecycleStart.set(1);
+	};
+
+	const releaseLifecycleStartBlock = () => {
+		"worklet";
+		cancelAnimation(retryToken);
+
+		if (!isBlockingLifecycleStart.get()) {
+			return;
+		}
+
+		unblockLifecycleStart();
+		isBlockingLifecycleStart.set(0);
+	};
+
+	const scheduleViewportRetry = () => {
+		"worklet";
+		cancelAnimation(retryToken);
+		retryToken.set(
+			withDelay(
+				VIEWPORT_RETRY_DELAY_MS,
+				withTiming(retryToken.get() + 1, { duration: 0 }),
+			),
+		);
+	};
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			const retryTick = retryToken.get();
+
+			if (closing.get() || animating.get()) {
+				return [0, retryTick] as const;
+			}
+
+			const resolvedSourceKey = resolvePendingSourceKey(
+				sharedBoundTag,
+				expectedSourceScreenKey,
+			);
+			const hasAttachableSourceLink = resolvedSourceKey
+				? BoundStore.link.getPending(sharedBoundTag, resolvedSourceKey) !==
+						null || BoundStore.link.hasSource(sharedBoundTag, resolvedSourceKey)
+				: false;
+			const hasDestinationLink = BoundStore.link.hasDestination(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+
+			const shouldBlock =
+				enabled &&
+				!!resolvedSourceKey &&
+				hasAttachableSourceLink &&
+				!hasDestinationLink;
+
+			if (!shouldBlock) {
+				return [0, retryTick] as const;
+			}
+
+			if (group && BoundStore.group.getActiveId(group) !== String(id)) {
+				return [0, retryTick] as const;
+			}
+
+			return [1, retryTick] as const;
+		},
+		([shouldBlock]) => {
+			"worklet";
+			if (!shouldBlock) {
+				releaseLifecycleStartBlock();
+				return;
+			}
+
+			ensureLifecycleStartBlocked();
+			measureBoundary({ intent: "complete-destination" });
+
+			if (BoundStore.link.hasDestination(sharedBoundTag, currentScreenKey)) {
+				releaseLifecycleStartBlock();
+				return;
+			}
+
+			scheduleViewportRetry();
+		},
+	);
+
+	useLayoutEffect(() => {
+		return () => {
+			runOnUI(() => {
+				"worklet";
+				cancelAnimation(retryToken);
+
+				if (!isBlockingLifecycleStart.get()) {
+					return;
+				}
+
+				unblockLifecycleStart();
+				isBlockingLifecycleStart.set(0);
+			})();
+		};
+	}, [isBlockingLifecycleStart, retryToken, unblockLifecycleStart]);
+};

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

@@ -0,0 +1,42 @@
+import { useAnimatedReaction } from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bounds";
+import type { BoundaryId, MeasureParams } from "../types";
+
+export const useCaptureSourceBoundary = (params: {
+	enabled: boolean;
+	sharedBoundTag: string;
+	id: BoundaryId;
+	group?: string;
+	nextScreenKey?: string;
+	measureBoundary: (options: MeasureParams) => void;
+}) => {
+	const { enabled, id, group, nextScreenKey, measureBoundary } = params;
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled || !nextScreenKey) {
+				return 0;
+			}
+
+			return nextScreenKey;
+		},
+		(captureSignal, previousCaptureSignal) => {
+			"worklet";
+			if (!enabled) return;
+			if (!nextScreenKey) return;
+			if (!captureSignal || captureSignal === previousCaptureSignal) return;
+
+			const currentGroupActiveId = group
+				? BoundStore.group.getActiveId(group)
+				: null;
+
+			if (group && currentGroupActiveId !== String(id)) {
+				return;
+			}
+
+			measureBoundary({ intent: "capture-source" });
+		},
+		[enabled, id, group, nextScreenKey, measureBoundary],
+	);
+};

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>