react-native-screen-transitions 3.12.0 → 3.13.0-beta.0

package/src/shared/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -1,9 +1,12 @@
+import { useIsFocused } from "@react-navigation/native";
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { pairs } from "../../../../../../stores/bounds/internals/state";
 import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import { isTeleportEnabled } from "../../../utils/teleport-control";
+import { shouldAttachBoundaryPortal } from "../helpers/attachment";
+import { resolveActiveBoundaryPortalPairKey } from "../helpers/local-measurement";
 import { useActiveHostKey } from "../stores/host-registry.store";
 import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
@@ -24,14 +27,17 @@ export const useBoundaryPortalAttachment = ({
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
+	// React Navigation resolves focus through the entire parent navigator chain.
+	// A leaf that is still selected in its own one-screen stack becomes unfocused
+	// when any ancestor route is covered.
+	const focused = useIsFocused();
 	const { slotsMap } = useScreenSlots();
 	const portalHostName = useSharedValue<string | null>(null);
-	const portalHostReady = useSharedValue(false);
+	const portalHostReady = useSharedValue<string | null>(null);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);
 
 	useActivePortalBoundaryHost({
 		boundaryId,
-		currentScreenKey,
 		escapeHostKey,
 		localMeasurement,
 		portalHostName,
@@ -49,20 +55,31 @@ export const useBoundaryPortalAttachment = ({
 			...slotProps
 		} = slot?.props ?? {};
 
-		const shouldAttach =
-			slot !== undefined &&
-			isTeleportEnabled(teleport) &&
-			portalHostReady.get();
+		const activePortalHostName = portalHostName.get();
+		const shouldAttach = shouldAttachBoundaryPortal({
+			focused,
+			portalHostReady:
+				activePortalHostName !== null &&
+				portalHostReady.get() === activePortalHostName,
+			slotActive:
+				resolveActiveBoundaryPortalPairKey(
+					localMeasurement.get(),
+					slot,
+					boundaryId,
+					pairs.get(),
+				) !== null && slot !== undefined,
+			teleport,
+		});
 
 		const hostName = shouldAttach
-			? portalHostName.get()
+			? activePortalHostName
 			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
 			hostName,
 		};
-	});
+	}, [focused]);
 
 	return { teleportProps };
 };

package/src/shared/components/boundary/portal/components/boundary-portal/stores/portal-boundary-host.store.ts

@@ -9,7 +9,7 @@ export type ActivePortalBoundaryHost = {
 	localMeasurement: BoundaryLocalMeasurementValue;
 	pairKey: string;
 	portalHostName: string;
-	portalHostReady: SharedValue<boolean>;
+	portalHostReady: SharedValue<string | null>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 

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

@@ -60,7 +60,7 @@ export type MeasureTarget =
 			pairKey: ScreenPairKey;
 	  };
 
-export type MeasureBoundary = (target: MeasureTarget) => void;
+export type MeasureBoundary = (target: MeasureTarget) => boolean;
 
 export type BoundaryLocalMeasurement = {
 	bounds: MeasuredDimensions;

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -1,4 +1,5 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { completeBoundaryMeasurement } from "../../stores/bounds/internals/coordinator";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
 import type { ScreenPairKey } from "../../stores/bounds/types";
@@ -70,4 +71,8 @@ export const applyMeasuredBoundsWrites = (
 			{ handoff },
 		);
 	}
+
+	if (linkWrite) {
+		completeBoundaryMeasurement(linkWrite, entryTag);
+	}
 };

package/src/shared/providers/screen/animation/animation.provider.tsx

@@ -57,13 +57,18 @@ export const { ScreenAnimationProvider, useScreenAnimationStore } =
 					parentContext?.ancestorDescendantScreenAnimationRegistrars,
 			);
 
+			const parentInterpolatorUpdatesEnabled = useParentStore(
+				(parentContext) => parentContext?.interpolatorUpdatesEnabled,
+			);
+
 			const {
+				interpolatorUpdatesEnabled,
 				screenInterpolatorProps,
 				screenInterpolatorPropsRevision,
 				selectedInterpolatorOptions,
 				nextInterpolator,
 				currentInterpolator,
-			} = useScreenAnimationPipeline();
+			} = useScreenAnimationPipeline(parentInterpolatorUpdatesEnabled ?? true);
 
 			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
 				() => ({
@@ -206,6 +211,7 @@ export const { ScreenAnimationProvider, useScreenAnimationStore } =
 			return {
 				key: currentScreenKey,
 				value: {
+					interpolatorUpdatesEnabled,
 					screenInterpolatorProps,
 					screenInterpolatorPropsRevision,
 					selectedInterpolatorOptions,

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -210,14 +210,29 @@ export const hydrateTransitionState = (
 	const resolvedAutoSnap =
 		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
 
+	const targetProgress = s.targetProgress.get();
+	const lockedSnapPoint = s.gesture.internal.lockedSnapPoint.get();
+
+	const isSettlingToLockedSnapPoint =
+		out.gesture.settling && targetProgress === lockedSnapPoint;
+
+	const isLockedGestureLifecycle =
+		options.gestureSnapLocked &&
+		lockedSnapPoint !== null &&
+		(out.gesture.dragging ||
+			isSettlingToLockedSnapPoint ||
+			out.gesture.dismissing);
+
+	const animatedSnapProgress = isLockedGestureLifecycle
+		? lockedSnapPoint
+		: out.progress;
+
 	out.animatedSnapIndex = computeAnimatedSnapIndex(
-		out.progress,
+		animatedSnapProgress,
 		s.sortedNumericSnapPoints,
 		resolvedAutoSnap,
 	);
 
-	const targetProgress = s.targetProgress.get();
-
 	out.snapIndex = computeTargetSnapIndex(
 		targetProgress,
 		s.sortedNumericSnapPoints,

package/src/shared/providers/screen/animation/helpers/interpolator-participation.ts

@@ -0,0 +1,6 @@
+import type { StackSceneActivity } from "../../../../types/stack.types";
+
+export const shouldUpdateScreenInterpolator = (
+	activity: StackSceneActivity,
+	updateInactiveInterpolators: boolean,
+) => activity !== "inactive" || updateInactiveInterpolators;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -23,6 +23,7 @@ import { buildScreenTransitionOptions } from "./build-screen-transition-options"
 import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
+import { shouldUpdateScreenInterpolator } from "./interpolator-participation";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
 import { resolveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
@@ -34,6 +35,7 @@ export type ScreenInterpolatorFrame = Omit<
 >;
 
 interface ScreenAnimationPipeline {
+	interpolatorUpdatesEnabled: boolean;
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	screenInterpolatorPropsRevision: DerivedValue<number>;
 	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
@@ -273,7 +275,9 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 	return frame;
 };
 
-export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
+export function useScreenAnimationPipeline(
+	parentInterpolatorUpdatesEnabled = true,
+): ScreenAnimationPipeline {
 	const transitionsAlwaysOn = useStack(
 		(stack) => stack.flags.TRANSITIONS_ALWAYS_ON,
 	);
@@ -283,6 +287,16 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const currDescriptor = useDescriptorsStore((store) => store.current);
 	const nextDescriptor = useDescriptorsStore((store) => store.next);
 	const prevDescriptor = useDescriptorsStore((store) => store.previous);
+	const currentActivity = useStack((stack) => {
+		const routeIndex = stack.routeKeys.indexOf(currDescriptor.route.key);
+		return stack.scenes[routeIndex]?.activity;
+	});
+	const interpolatorUpdatesEnabled =
+		parentInterpolatorUpdatesEnabled &&
+		shouldUpdateScreenInterpolator(
+			currentActivity ?? "active",
+			currDescriptor.options.experimental_updateInactiveInterpolators === true,
+		);
 
 	const currentAnimation = useBuildTransitionState(currDescriptor);
 	const nextAnimation = useBuildTransitionState(nextDescriptor);
@@ -312,42 +326,50 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		});
 
 	const propsRevisionState = useSharedValue({ value: 0 });
-	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
-		"worklet";
-		screenInterpolatorProps.modify((frame) => {
-			"worklet";
-			const interpolatorOptions = selectedInterpolatorOptions.get();
-			return hydrateInterpolatorFrame({
-				frame,
-				dimensions,
-				insets,
-				currentAnimation,
-				nextAnimation,
-				prevAnimation,
-				nextHasTransitions,
-				interpolatorOptions,
-			});
-		}, false);
-
-		// Critical reactive dependency for `screenInterpolatorProps`.
-		//
-		// `screenInterpolatorProps` is mutated in place to avoid allocating a large
-		// interpolator frame every tick. Consumers must read this revision before
-		// reading `screenInterpolatorProps`, otherwise Reanimated may not subscribe
-		// to frame updates and can observe stale transition state.
-		propsRevisionState.modify((revision) => {
-			"worklet";
-			revision.value += 1;
-			return revision;
-		}, false);
-
-		return propsRevisionState.get().value;
-	});
+	const screenInterpolatorPropsRevision = useDerivedValue<number>(
+		interpolatorUpdatesEnabled
+			? () => {
+					"worklet";
+					screenInterpolatorProps.modify((frame) => {
+						"worklet";
+						const interpolatorOptions = selectedInterpolatorOptions.get();
+						return hydrateInterpolatorFrame({
+							frame,
+							dimensions,
+							insets,
+							currentAnimation,
+							nextAnimation,
+							prevAnimation,
+							nextHasTransitions,
+							interpolatorOptions,
+						});
+					}, false);
+
+					// Critical reactive dependency for `screenInterpolatorProps`.
+					//
+					// `screenInterpolatorProps` is mutated in place to avoid allocating a large
+					// interpolator frame every tick. Consumers must read this revision before
+					// reading `screenInterpolatorProps`, otherwise Reanimated may not subscribe
+					// to frame updates and can observe stale transition state.
+					propsRevisionState.modify((revision) => {
+						"worklet";
+						revision.value += 1;
+						return revision;
+					}, false);
+
+					return propsRevisionState.get().value;
+				}
+			: () => {
+					"worklet";
+					return propsRevisionState.get().value;
+				},
+	);
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
 	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;
 
 	return {
+		interpolatorUpdatesEnabled,
 		screenInterpolatorProps,
 		screenInterpolatorPropsRevision,
 		selectedInterpolatorOptions,

package/src/shared/providers/screen/descriptors/descriptors.provider.tsx

@@ -1,12 +1,18 @@
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo } from "react";
+import { runOnUI } from "react-native-reanimated";
 import { useScreenTransitionsAdapterOptionalContext } from "../../../adapters/with-screen-transitions/context";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import {
+	registerScreen,
+	unregisterScreen,
+} from "../../../stores/bounds/internals/coordinator";
+import { SystemStore } from "../../../stores/system.store";
 import type { BaseStackDescriptor } from "../../../types/stack.types";
 import createProvider from "../../../utils/create-provider";
 import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
 import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { getAncestorKeys } from "./helpers/get-ancestor-keys";
+import { deriveStructuralAncestorKeys } from "./helpers/derive-structural-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -45,7 +51,19 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 	"Descriptors",
 	{ guarded: true },
 )<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
-	({ previous, current, next, routeKey, children }) => {
+	({ previous, current, next, routeKey, children }, { useParentStore }) => {
+		const parentScreenKey = useParentStore(
+			(store) => store?.derivations.currentScreenKey,
+		);
+		const parentAncestorKeys = useParentStore(
+			(store) => store?.derivations.ancestorKeys,
+		);
+		const parentTransitionSourcePairKey = useParentStore(
+			(store) => store?.derivations.transitionSourcePairKey,
+		);
+		const parentTransitionDestinationScreenKey = useParentStore(
+			(store) => store?.derivations.transitionDestinationScreenKey,
+		);
 		const blankStackCurrent = useBlankStackStore((store) =>
 			routeKey ? store?.scenesByKey[routeKey]?.descriptor : undefined,
 		);
@@ -85,20 +103,68 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		);
 
 		const ancestorKeys = useMemo(
-			() => getAncestorKeys(resolvedCurrent),
-			[resolvedCurrent],
+			() =>
+				deriveStructuralAncestorKeys(
+					parentScreenKey
+						? {
+								currentScreenKey: parentScreenKey,
+								ancestorKeys: parentAncestorKeys ?? [],
+							}
+						: null,
+				),
+			[parentAncestorKeys, parentScreenKey],
 		);
 
-		const derivations = useMemo(
-			() =>
-				deriveDescriptorDerivations({
-					previous: resolvedPrevious,
-					current: resolvedCurrent,
-					next: resolvedNext,
-					ancestorKeys,
-				}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext, ancestorKeys],
+		const derivations = useMemo(() => {
+			const localDerivations = deriveDescriptorDerivations({
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+				ancestorKeys,
+			});
+
+			return {
+				...localDerivations,
+				transitionSourcePairKey:
+					localDerivations.sourcePairKey ?? parentTransitionSourcePairKey,
+				transitionDestinationScreenKey:
+					localDerivations.nextScreenKey ??
+					parentTransitionDestinationScreenKey,
+			};
+		}, [
+			resolvedPrevious,
+			resolvedCurrent,
+			resolvedNext,
+			ancestorKeys,
+			parentTransitionSourcePairKey,
+			parentTransitionDestinationScreenKey,
+		]);
+		const animationProgress = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"animationProgress",
 		);
+		const pendingLifecycleStartBlockCount = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"pendingLifecycleStartBlockCount",
+		);
+
+		useLayoutEffect(() => {
+			runOnUI(registerScreen)({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey: derivations.parentScreenKey,
+				animationProgress,
+				pendingLifecycleStartBlockCount,
+			});
+
+			return () => {
+				runOnUI(unregisterScreen)(derivations.currentScreenKey);
+			};
+		}, [
+			animationProgress,
+			derivations.currentScreenKey,
+			derivations.parentScreenKey,
+			pendingLifecycleStartBlockCount,
+		]);
 
 		return {
 			value: {

package/src/shared/providers/screen/descriptors/helpers/derive-descriptor-derivations.ts

@@ -7,6 +7,10 @@ export interface DescriptorDerivations {
 	currentScreenKey: string;
 	nextScreenKey?: string;
 	sourcePairKey?: ScreenPairKey;
+	/** Nearest source pair owned by this screen or one of its ancestors. */
+	transitionSourcePairKey?: ScreenPairKey;
+	/** Destination root for the nearest source pair. */
+	transitionDestinationScreenKey?: string;
 	destinationPairKey?: ScreenPairKey;
 	parentScreenKey?: string;
 	isFirstKey: boolean;
@@ -52,6 +56,8 @@ export function deriveDescriptorDerivations({
 		currentScreenKey,
 		nextScreenKey,
 		sourcePairKey,
+		transitionSourcePairKey: sourcePairKey,
+		transitionDestinationScreenKey: nextScreenKey,
 		destinationPairKey,
 		parentScreenKey: ancestorKeys[0],
 		isFirstKey,

package/src/shared/providers/screen/descriptors/helpers/derive-structural-ancestor-keys.ts

@@ -0,0 +1,13 @@
+import type { DescriptorDerivationsContextValue } from "../descriptors.provider";
+
+type ParentDescriptorState = Pick<
+	DescriptorDerivationsContextValue,
+	"currentScreenKey" | "ancestorKeys"
+>;
+
+export const deriveStructuralAncestorKeys = (
+	parent: ParentDescriptorState | null,
+): string[] => {
+	if (!parent) return [];
+	return [parent.currentScreenKey, ...parent.ancestorKeys];
+};

package/src/shared/providers/screen/gestures/pan/behavior/pan-lifecycle.ts

@@ -109,6 +109,7 @@ export const finalizePanRelease = (
 			: {
 					target: animations.transitionProgress.get(),
 					shouldDismiss: false,
+					isCancelled: true,
 					initialVelocity: 0,
 					transitionSpec: undefined,
 					resetSpec: policy.transitionSpec?.open,

package/src/shared/providers/screen/gestures/pan/behavior/pan-release.ts

@@ -1,4 +1,5 @@
 import { clamp } from "react-native-reanimated";
+import { EPSILON } from "../../../../../constants";
 import {
 	getPanSnapAxisConfigForDirection,
 	isResolvedPanGestureDirection,
@@ -111,6 +112,7 @@ const buildInactivePanSnapRelease = (
 	return {
 		target: stores.animations.transitionProgress.get(),
 		shouldDismiss: false,
+		isCancelled: true,
 		initialVelocity: 0,
 		transitionSpec: policy.transitionSpec,
 		resetSpec: policy.transitionSpec?.open,
@@ -146,6 +148,7 @@ export const resolvePanRelease = (
 	return {
 		target: shouldDismiss ? 0 : 1,
 		shouldDismiss,
+		isCancelled: !shouldDismiss,
 		initialVelocity: getPanReleaseProgressVelocity({
 			animations,
 			shouldDismiss,
@@ -205,9 +208,16 @@ export const resolveSnapPanRelease = (
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
 
+	// Compare against the gesture's starting snap so only true snap-backs lose velocity.
+	const initialTarget = policy.gestureSnapLocked
+		? (runtime.stores.gestures.internal.lockedSnapPoint.get() ??
+			runtime.stores.system.targetProgress.get())
+		: runtime.stores.system.targetProgress.get();
+
 	return {
 		target,
 		shouldDismiss,
+		isCancelled: !shouldDismiss && Math.abs(target - initialTarget) <= EPSILON,
 		initialVelocity: getProgressVelocityTowardTarget({
 			handoffVelocity: getPanReleaseHandoffVelocity(
 				axisVelocity,
@@ -238,7 +248,7 @@ export const buildPanReleasePlan = (
 	"worklet";
 	const { policy } = runtime;
 	const releaseVelocityScale = Math.max(0, policy.gestureReleaseVelocityScale);
-	const resetVelocityScale = releaseVelocityScale;
+	const resetVelocityScale = release.isCancelled ? 0 : releaseVelocityScale;
 	const resetVelocityX =
 		resetVelocityScale === 0 ? 0 : rawEvent.velocityX * resetVelocityScale;
 	const resetVelocityY =
@@ -264,7 +274,7 @@ export const buildPanReleasePlan = (
 	return {
 		target: release.target,
 		shouldDismiss: release.shouldDismiss,
-		progressVelocity: release.initialVelocity,
+		progressVelocity: release.isCancelled ? 0 : release.initialVelocity,
 		resetVelocityX,
 		resetVelocityY,
 		resetVelocityNormX: resetVelocityX / Math.max(1, dimensions.width),

package/src/shared/providers/screen/gestures/pan/behavior/use-pan-behavior.ts

@@ -97,6 +97,7 @@ export const usePanBehavior = (
 				? {
 						target: latestRuntime.stores.animations.transitionProgress.get(),
 						shouldDismiss: false,
+						isCancelled: true,
 						initialVelocity: 0,
 						transitionSpec: undefined,
 						resetSpec: latestRuntime.policy.transitionSpec?.open,

package/src/shared/providers/screen/gestures/types.ts

@@ -172,6 +172,7 @@ export interface PinchTrackState {
 export interface PanReleaseResult {
 	target: number;
 	shouldDismiss: boolean;
+	isCancelled: boolean;
 	initialVelocity: number;
 	commitProgress?: number;
 	transitionSpec: TransitionSpec | undefined;

package/src/shared/providers/screen/styles/constants.ts

@@ -62,6 +62,7 @@ export const STYLE_RESET_VALUES: Record<string, unknown> = {
 export const PROP_RESET_VALUES: Record<string, unknown> = {
 	hostName: PORTAL_HOST_NAME_RESET_VALUE,
 	pointerEvents: "auto",
+	teleport: false,
 };
 
 const RESERVED_STYLE_SLOT_IDS = {

package/src/shared/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -0,0 +1,16 @@
+type VisibilityBlockOwnershipParams = {
+	localBlocked: boolean;
+	ancestorBlocked: boolean;
+};
+
+export const resolveVisibilityBlockOwnership = ({
+	localBlocked,
+	ancestorBlocked,
+}: VisibilityBlockOwnershipParams) => {
+	"worklet";
+
+	return {
+		appliesOffset: localBlocked && !ancestorBlocked,
+		effectiveBlocked: localBlocked || ancestorBlocked,
+	};
+};