react-native-screen-transitions 3.11.0 → 3.11.2

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

@@ -4,12 +4,10 @@ import {
 	type SharedValue,
 	useAnimatedReaction,
 } from "react-native-reanimated";
-import type { LocalStyleLayers } from "../../../../../../providers/screen/styles/helpers/resolve-slot-styles";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
 import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
 import { createBoundaryPortalHostName } from "../../../utils/naming";
-import { hasActiveBoundaryPortalLink } from "../helpers/active-pair";
 import {
 	mountPortalBoundaryHost,
 	unmountPortalBoundaryHostByName,
@@ -19,62 +17,57 @@ type UseActivePortalBoundaryHostParams = {
 	boundaryId: string;
 	currentScreenKey: string;
 	escapeHostKey?: string;
-	localStylesMaps: SharedValue<LocalStyleLayers>;
 	portalHostName: SharedValue<string | null>;
 	portalHostReady: SharedValue<boolean>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-	sourcePairKey?: ScreenPairKey;
+};
+
+type ActivePortal = {
+	pairKey: ScreenPairKey;
 };
 
 export const useActivePortalBoundaryHost = ({
 	boundaryId,
 	currentScreenKey,
 	escapeHostKey,
-	localStylesMaps,
 	portalHostName,
 	portalHostReady,
 	slotsMap,
-	sourcePairKey,
 }: UseActivePortalBoundaryHostParams) => {
-	const [hasActiveLink, setHasActiveLink] = useState(false);
-	const sourcePairKeyRef = useRef(sourcePairKey);
-	sourcePairKeyRef.current = sourcePairKey;
+	const [activePortal, setActivePortal] = useState<ActivePortal | null>(null);
+	const activePairKeyRef = useRef<ScreenPairKey | null>(null);
 
-	const updateActiveLink = useCallback(
-		(
-			observedSourcePairKey: ScreenPairKey | undefined,
-			nextHasActiveLink: boolean,
-		) => {
-			if (sourcePairKeyRef.current !== observedSourcePairKey) {
-				return;
-			}
+	const updateActivePortal = useCallback((pairKey: ScreenPairKey | null) => {
+		if (activePairKeyRef.current === pairKey) {
+			return;
+		}
 
-			setHasActiveLink(nextHasActiveLink);
-		},
-		[],
-	);
+		activePairKeyRef.current = pairKey;
+		setActivePortal(pairKey ? { pairKey } : null);
+	}, []);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			return hasActiveBoundaryPortalLink({
-				boundaryId,
-				pairsState: pairs.get(),
-				sourcePairKey,
-			});
+			const isBoundaryAnimating = slotsMap.get()[boundaryId] !== undefined;
+			if (!isBoundaryAnimating) {
+				return null;
+			}
+
+			return getPairKeyForSource(boundaryId, currentScreenKey);
 		},
-		(nextHasActiveLink, previousHasActiveLink) => {
+		(pairKey, previousPairKey) => {
 			"worklet";
-			if (nextHasActiveLink === previousHasActiveLink) {
+			if (pairKey === previousPairKey) {
 				return;
 			}
 
-			runOnJS(updateActiveLink)(sourcePairKey, nextHasActiveLink);
+			runOnJS(updateActivePortal)(pairKey);
 		},
 	);
 
 	useLayoutEffect(() => {
-		if (!hasActiveLink || !sourcePairKey || !escapeHostKey) {
+		if (!activePortal || !escapeHostKey) {
 			portalHostName.set(null);
 			portalHostReady.set(false);
 			return;
@@ -83,14 +76,13 @@ export const useActivePortalBoundaryHost = ({
 		const nextPortalHostName = createBoundaryPortalHostName(
 			escapeHostKey,
 			boundaryId,
-			sourcePairKey,
+			activePortal.pairKey,
 		);
 
 		mountPortalBoundaryHost({
 			boundaryId,
 			hostKey: escapeHostKey,
-			localStylesMaps,
-			pairKey: sourcePairKey,
+			pairKey: activePortal.pairKey,
 			portalHostName: nextPortalHostName,
 			portalHostReady,
 			screenKey: currentScreenKey,
@@ -104,14 +96,12 @@ export const useActivePortalBoundaryHost = ({
 			unmountPortalBoundaryHostByName(nextPortalHostName);
 		};
 	}, [
+		activePortal,
 		boundaryId,
 		currentScreenKey,
 		escapeHostKey,
-		localStylesMaps,
 		portalHostName,
 		portalHostReady,
-		sourcePairKey,
 		slotsMap,
-		hasActiveLink,
 	]);
 };

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

@@ -1,17 +1,8 @@
-import {
-	type SharedValue,
-	useAnimatedProps,
-	useSharedValue,
-} from "react-native-reanimated";
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
-import { AnimationStore } from "../../../../../../stores/animation.store";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { isTeleportEnabled } from "../../../utils/teleport-control";
-import { hasActiveBoundaryPortalLink } from "../helpers/active-pair";
 import { useActiveHostKey } from "../stores/host-registry.store";
 import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
@@ -19,42 +10,23 @@ interface UseBoundaryPortalAttachmentParams {
 	boundaryId: string;
 }
 
-type AttachedDestination = {
-	animationProgress: SharedValue<number>;
-	closing: SharedValue<number>;
-};
-
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryPortalAttachmentParams) => {
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
-	const destinationAnimationProgress = SystemStore.getValue(
-		destinationScreenKey,
-		"animationProgress",
-	);
-	const destinationClosing = AnimationStore.getValue(
-		destinationScreenKey,
-		"closing",
-	);
-	const { localStylesMaps, slotsMap } = useScreenSlots();
+	const { slotsMap } = useScreenSlots();
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
-	const attachedDestination = useSharedValue<AttachedDestination | null>(null);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);
 
 	useActivePortalBoundaryHost({
 		boundaryId,
 		currentScreenKey,
 		escapeHostKey,
-		localStylesMaps,
 		portalHostName,
 		portalHostReady,
-		sourcePairKey,
 		slotsMap,
 	});
 
@@ -67,36 +39,17 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = isTeleportEnabled(teleport);
-		const hostName = portalHostName.get();
-		const hasActiveLink = hasActiveBoundaryPortalLink({
-			boundaryId,
-			pairsState: pairs.get(),
-			sourcePairKey,
-		});
-		const hasAttachableHost =
-			shouldTeleport && hasActiveLink && portalHostReady.get() && hostName;
-
-		if (hasAttachableHost) {
-			attachedDestination.set({
-				animationProgress: destinationAnimationProgress,
-				closing: destinationClosing,
-			});
-		}
-
-		const attached = attachedDestination.get();
-		const hasAttachedCloseFinished =
-			attached !== null &&
-			hasCloseTransitionFinished({
-				animationProgress: attached.animationProgress.get(),
-				closing: attached.closing.get(),
-			});
-		const canAttach = hasAttachableHost && !hasAttachedCloseFinished;
-		const targetHostName = canAttach ? hostName : PORTAL_HOST_NAME_RESET_VALUE;
+		const shouldAttach =
+			slot !== undefined &&
+			isTeleportEnabled(teleport) &&
+			portalHostReady.get();
+		const hostName = shouldAttach
+			? portalHostName.get()
+			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName: targetHostName,
+			hostName,
 		};
 	});
 

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

@@ -16,7 +16,6 @@ import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-blo
 import {
 	adjustedMeasuredBoundsForOverscrollDeltas,
 	correctMeasuredBoundsForVisibilityGate,
-	isMeasurementInViewport,
 } from "../../../../utils/measured-bounds";
 import {
 	clearPortalHostBounds,
@@ -102,13 +101,7 @@ export const useHostMeasurement = ({
 				viewportHeight,
 			});
 
-			if (
-				!isMeasurementInViewport(
-					correctedMeasured,
-					viewportWidth,
-					viewportHeight,
-				)
-			) {
+			if (correctedMeasured.width <= 0 || correctedMeasured.height <= 0) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(

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

@@ -1,12 +1,10 @@
 import { useSyncExternalStore } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { LocalStyleLayers } from "../../../../../../providers/screen/styles/helpers/resolve-slot-styles";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
 	hostKey: string;
-	localStylesMaps: SharedValue<LocalStyleLayers>;
 	pairKey: string;
 	portalHostName: string;
 	portalHostReady: SharedValue<boolean>;
@@ -56,7 +54,6 @@ const isSameHost = (
 	return (
 		a.boundaryId === b.boundaryId &&
 		a.hostKey === b.hostKey &&
-		a.localStylesMaps === b.localStylesMaps &&
 		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
 		a.portalHostReady === b.portalHostReady &&

package/src/shared/components/boundary/utils/destination-signals.ts

@@ -14,14 +14,13 @@ export type InitialDestinationMeasurementAction =
 	| "complete";
 
 export type InitialDestinationMeasurementSignal = {
-	pairKey: ScreenPairKey;
+	pairKey: ScreenPairKey | null;
 	action: InitialDestinationMeasurementAction;
 };
 
 export const getInitialDestinationMeasurementSignal = (params: {
 	enabled: boolean;
-	destinationPairKey?: ScreenPairKey;
-	ancestorDestinationPairKey?: ScreenPairKey;
+	pairKey?: ScreenPairKey;
 	linkId: string;
 	group?: string;
 	destinationPresent: boolean;
@@ -31,20 +30,21 @@ export const getInitialDestinationMeasurementSignal = (params: {
 	"worklet";
 	const {
 		enabled,
-		destinationPairKey,
-		ancestorDestinationPairKey,
+		pairKey,
 		linkId,
 		group,
 		destinationPresent,
 		sourcePresent,
 		linkState,
 	} = params;
-	const pairKey = destinationPairKey ?? ancestorDestinationPairKey;
-
-	if (!enabled || !pairKey) {
+	if (!enabled) {
 		return null;
 	}
 
+	if (!pairKey) {
+		return { pairKey: null, action: "wait" };
+	}
+
 	if (!destinationPresent) {
 		return { pairKey, action: "wait" };
 	}

package/src/shared/components/boundary/utils/refresh-signals.ts

@@ -31,8 +31,6 @@ export const getRefreshBoundarySignal = (params: {
 	currentScreenKey: string;
 	sourcePairKey?: ScreenPairKey;
 	destinationPairKey?: ScreenPairKey;
-	ancestorDestinationPairKey?: ScreenPairKey;
-	nextScreenKey?: string;
 	linkId: string;
 	group?: string;
 	shouldRefresh: boolean;
@@ -45,8 +43,6 @@ export const getRefreshBoundarySignal = (params: {
 		currentScreenKey,
 		sourcePairKey,
 		destinationPairKey,
-		ancestorDestinationPairKey,
-		nextScreenKey,
 		linkId,
 		group,
 		shouldRefresh,
@@ -79,9 +75,7 @@ export const getRefreshBoundarySignal = (params: {
 			);
 		}
 
-		const refreshDestinationPairKey =
-			destinationPairKey ??
-			(nextScreenKey ? undefined : ancestorDestinationPairKey);
+		const refreshDestinationPairKey = destinationPairKey;
 
 		if (!refreshDestinationPairKey) {
 			return null;
@@ -114,9 +108,7 @@ export const getRefreshBoundarySignal = (params: {
 		);
 	}
 
-	const refreshDestinationPairKey =
-		destinationPairKey ??
-		(nextScreenKey ? undefined : ancestorDestinationPairKey);
+	const refreshDestinationPairKey = destinationPairKey;
 
 	if (!refreshDestinationPairKey) return null;
 

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

@@ -6,7 +6,7 @@ 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 { getAncestorKeyState } from "./helpers/get-ancestor-keys";
+import { getAncestorKeys } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -84,8 +84,8 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 			[resolvedPrevious, resolvedCurrent, resolvedNext],
 		);
 
-		const { ancestorKeys, ancestorDestinationPairKey } = useMemo(
-			() => getAncestorKeyState(resolvedCurrent),
+		const ancestorKeys = useMemo(
+			() => getAncestorKeys(resolvedCurrent),
 			[resolvedCurrent],
 		);
 
@@ -96,15 +96,8 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 					current: resolvedCurrent,
 					next: resolvedNext,
 					ancestorKeys,
-					ancestorDestinationPairKey,
 				}),
-			[
-				resolvedPrevious,
-				resolvedCurrent,
-				resolvedNext,
-				ancestorKeys,
-				ancestorDestinationPairKey,
-			],
+			[resolvedPrevious, resolvedCurrent, resolvedNext, ancestorKeys],
 		);
 
 		return {

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

@@ -8,7 +8,6 @@ export interface DescriptorDerivations {
 	nextScreenKey?: string;
 	sourcePairKey?: ScreenPairKey;
 	destinationPairKey?: ScreenPairKey;
-	ancestorDestinationPairKey?: ScreenPairKey;
 	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
@@ -21,7 +20,6 @@ interface Params {
 	current: BaseStackDescriptor;
 	next?: BaseStackDescriptor;
 	ancestorKeys: string[];
-	ancestorDestinationPairKey?: ScreenPairKey;
 }
 
 export function deriveDescriptorDerivations({
@@ -29,7 +27,6 @@ export function deriveDescriptorDerivations({
 	current,
 	next,
 	ancestorKeys,
-	ancestorDestinationPairKey,
 }: Params): DescriptorDerivations {
 	const previousScreenKey = previous?.route.key;
 	const currentScreenKey = current.route.key;
@@ -56,7 +53,6 @@ export function deriveDescriptorDerivations({
 		nextScreenKey,
 		sourcePairKey,
 		destinationPairKey,
-		ancestorDestinationPairKey,
 		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,

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

@@ -1,26 +1,14 @@
-import { createScreenPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
-import type { ScreenPairKey } from "../../../../stores/bounds/types";
 import type { BaseStackDescriptor } from "../../../../types/stack.types";
 
-export interface AncestorKeyState {
-	ancestorKeys: string[];
-	ancestorDestinationPairKey?: ScreenPairKey;
-}
-
 /**
  * Builds nested navigator ancestor keys from immediate parent to root.
- * The nearest ancestor destination pair lets child routes attach measurements
- * to the transition owned by the parent stack.
  */
-export function getAncestorKeyState(
-	current: BaseStackDescriptor,
-): AncestorKeyState {
+export function getAncestorKeys(current: BaseStackDescriptor): string[] {
 	const ancestors: string[] = [];
-	let ancestorDestinationPairKey: ScreenPairKey | undefined;
 	const nav = current.navigation as any;
 
 	if (typeof nav?.getParent !== "function") {
-		return { ancestorKeys: ancestors };
+		return ancestors;
 	}
 
 	let parent = nav.getParent();
@@ -31,25 +19,10 @@ export function getAncestorKeyState(
 			const focusedRoute = state.routes[state.index];
 			if (focusedRoute?.key) {
 				ancestors.push(focusedRoute.key);
-
-				const previousRoute = state.routes[state.index - 1];
-				if (!ancestorDestinationPairKey && previousRoute?.key) {
-					ancestorDestinationPairKey = createScreenPairKey(
-						previousRoute.key,
-						focusedRoute.key,
-					);
-				}
 			}
 		}
 		parent = parent.getParent();
 	}
 
-	return {
-		ancestorKeys: ancestors,
-		ancestorDestinationPairKey,
-	};
-}
-
-export function getAncestorKeys(current: BaseStackDescriptor): string[] {
-	return getAncestorKeyState(current).ancestorKeys;
+	return ancestors;
 }

package/src/shared/providers/screen/styles/helpers/create-interpolator-scope.ts

@@ -0,0 +1,45 @@
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionAccessor,
+} from "../../../../types/animation.types";
+import { createBoundsAccessor } from "../../../../utils/bounds";
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+import type { SelectedInterpolatorFrame } from "./select-interpolator-frame";
+
+export const createInterpolatorScope = ({
+	frame,
+	selectedFrame,
+	transition,
+}: {
+	frame: ScreenInterpolatorFrame;
+	selectedFrame: SelectedInterpolatorFrame;
+	transition: ScreenTransitionAccessor;
+}): ScreenInterpolationProps => {
+	"worklet";
+
+	const selectedProps = {
+		...frame,
+		...selectedFrame,
+	};
+	let scope: ScreenInterpolationProps;
+	const scopedTransition: ScreenTransitionAccessor = (target) => {
+		"worklet";
+
+		if ((target?.depth ?? 0) === 0) {
+			return scope;
+		}
+
+		return transition(target);
+	};
+
+	scope = {
+		...selectedProps,
+		bounds: createBoundsAccessor(() => {
+			"worklet";
+			return selectedProps;
+		}),
+		transition: scopedTransition,
+	};
+
+	return scope;
+};

package/src/shared/providers/screen/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -81,18 +81,18 @@ const mergeSlots = (
 	return merged;
 };
 
-const composeFrozenAndLiveStyles = (
-	frozen: NormalizedTransitionInterpolatedStyle,
-	live: NormalizedTransitionInterpolatedStyle,
+const composeCurrentAndNextStyles = (
+	current: NormalizedTransitionInterpolatedStyle,
+	next: NormalizedTransitionInterpolatedStyle,
 ) => {
 	"worklet";
-	const composed: NormalizedTransitionInterpolatedStyle = { ...frozen };
+	const composed: NormalizedTransitionInterpolatedStyle = { ...current };
 
-	for (const slotId in live) {
-		const liveSlot = live[slotId];
+	for (const slotId in next) {
+		const nextSlot = next[slotId];
 
-		if (liveSlot) {
-			composed[slotId] = mergeSlots(frozen[slotId], liveSlot);
+		if (nextSlot) {
+			composed[slotId] = mergeSlots(current[slotId], nextSlot);
 		}
 	}
 
@@ -103,36 +103,36 @@ export const resolveInterpolatorStyleHandoff = ({
 	currentOwnsInterpolator,
 	currentStylesMap,
 	nextStylesMap,
-	frozenCurrentStylesMap,
 }: {
 	currentOwnsInterpolator: boolean;
 	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
 	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
-	frozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
 }): {
 	localStylesMaps: LocalStyleLayers;
-	nextFrozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
 } => {
 	"worklet";
 
 	if (currentOwnsInterpolator) {
 		return {
 			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
-			nextFrozenCurrentStylesMap: currentStylesMap ?? frozenCurrentStylesMap,
 		};
 	}
 
 	if (!nextStylesMap) {
 		return {
-			localStylesMaps: frozenCurrentStylesMap ? [frozenCurrentStylesMap] : [],
-			nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!currentStylesMap) {
+		return {
+			localStylesMaps: [nextStylesMap],
 		};
 	}
 
 	return {
 		localStylesMaps: [
-			composeFrozenAndLiveStyles(frozenCurrentStylesMap, nextStylesMap),
+			composeCurrentAndNextStyles(currentStylesMap, nextStylesMap),
 		],
-		nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
 	};
 };