react-native-screen-transitions 3.9.0-alpha.2 → 3.9.0-alpha.3

package/src/shared/providers/screen/styles/slot.provider.tsx

@@ -1,22 +1,22 @@
-import { type ReactNode, useContext } from "react";
+import { type ReactNode, useContext, useLayoutEffect, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import Animated, {
-	type SharedValue,
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import {
-	type NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	type NAVIGATION_MASK_ELEMENT_STYLE_ID,
-	NO_PROPS,
-	NO_STYLES,
+import Animated, { type SharedValue } from "react-native-reanimated";
+import type {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
+import { useDescriptorsStore } from "../descriptors";
 import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
+import type { LocalStyleLayers } from "./helpers/resolve-slot-styles";
 import { useInterpolatedStylesMap } from "./hooks/use-interpolated-style-maps";
 import { useMaybeBlockVisibility } from "./hooks/use-maybe-block-visibility";
 import { useResolvedStylesMap } from "./hooks/use-resolved-slot-style-map";
+import {
+	registerScreenSlots,
+	unregisterScreenSlots,
+} from "./stores/slot-references.store";
 
 type Props = {
 	children: ReactNode;
@@ -30,7 +30,9 @@ export type ScreenSlotName =
 	| typeof NAVIGATION_MASK_CONTAINER_STYLE_ID
 	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;
 
-type ScreenSlotContextValue = {
+export type ScreenSlotContextValue = {
+	localStylesMaps: SharedValue<LocalStyleLayers>;
+	nextInterpolatorReady: SharedValue<number>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
@@ -42,20 +44,37 @@ export const {
 	guarded: true,
 })<Props, ScreenSlotContextValue>(({ children, isFloatingOverlay }) => {
 	const parentContext = useContext(ScreenSlotContext);
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
 
-	const rawStylesMaps = useInterpolatedStylesMap();
+	const { localStylesMaps, nextInterpolatorReady } = useInterpolatedStylesMap();
 
 	const slotsMap = useResolvedStylesMap({
-		localStylesMaps: rawStylesMaps,
+		localStylesMaps,
 		ancestorStylesMap: parentContext?.slotsMap,
 	});
 	const { animatedStyle, animatedProps } =
 		useMaybeBlockVisibility(isFloatingOverlay);
+	const value = useMemo(
+		() => ({
+			localStylesMaps,
+			nextInterpolatorReady,
+			slotsMap,
+		}),
+		[localStylesMaps, nextInterpolatorReady, slotsMap],
+	);
+
+	useLayoutEffect(() => {
+		registerScreenSlots(currentScreenKey, value);
+
+		return () => {
+			unregisterScreenSlots(currentScreenKey, value);
+		};
+	}, [currentScreenKey, value]);
 
 	return {
-		value: {
-			slotsMap,
-		},
+		value,
 		children: (
 			<FloatingOverlayLayer enabled={isFloatingOverlay}>
 				<Animated.View
@@ -72,40 +91,3 @@ export const {
 const styles = StyleSheet.create({
 	container: { flex: 1 },
 });
-
-export const useSlotStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
-
-	return useAnimatedStyle(() => {
-		return (slotId ? slotsMap.get()[slotId]?.style : undefined) ?? NO_STYLES;
-	});
-};
-
-/**
- * Stacking-only slice (`zIndex`/`elevation`) of a slot's style. Returned
- * separately so an owner can keep just its stacking context while a nested
- * target takes the full associated style. Yields `NO_STYLES` when neither is set.
- */
-export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
-
-	return useAnimatedStyle(() => {
-		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
-		const zIndex = baseStyle?.zIndex ?? 0;
-		const elevation = baseStyle?.elevation ?? 0;
-
-		if (zIndex === 0 && elevation === 0) {
-			return NO_STYLES;
-		}
-
-		return { zIndex, elevation };
-	});
-};
-
-export const useSlotProps = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
-
-	return useAnimatedProps(() => {
-		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;
-	});
-};

package/src/shared/providers/screen/styles/stores/slot-references.store.ts

@@ -0,0 +1,71 @@
+import { useSyncExternalStore } from "react";
+import type { ScreenKey } from "../../../../stores/bounds/types";
+import type { ScreenSlotContextValue } from "../slot.provider";
+
+/**
+ * Screen-owned slot reference registry.
+ *
+ * This is important for portals: a teleported component can render outside the
+ * screen provider that owns its active transition, but it still needs references
+ * to that provider's shared values. This store does not copy or own styles; it
+ * only exposes the existing ScreenSlotProvider value by screen key.
+ */
+type ScreenSlotsSnapshot = Record<ScreenKey, ScreenSlotContextValue>;
+
+const listeners = new Set<() => void>();
+const slotsByScreenKey = new Map<ScreenKey, ScreenSlotContextValue>();
+
+let snapshot: ScreenSlotsSnapshot = {};
+
+const emit = () => {
+	snapshot = Object.fromEntries(slotsByScreenKey);
+
+	for (const listener of listeners) {
+		listener();
+	}
+};
+
+export const registerScreenSlots = (
+	screenKey: ScreenKey,
+	slots: ScreenSlotContextValue,
+) => {
+	const previous = slotsByScreenKey.get(screenKey);
+	if (
+		previous?.localStylesMaps === slots.localStylesMaps &&
+		previous.nextInterpolatorReady === slots.nextInterpolatorReady &&
+		previous.slotsMap === slots.slotsMap
+	) {
+		return;
+	}
+
+	slotsByScreenKey.set(screenKey, slots);
+	emit();
+};
+
+export const unregisterScreenSlots = (
+	screenKey: ScreenKey,
+	slots: ScreenSlotContextValue,
+) => {
+	if (slotsByScreenKey.get(screenKey) !== slots) {
+		return;
+	}
+
+	slotsByScreenKey.delete(screenKey);
+	emit();
+};
+
+const subscribe = (listener: () => void) => {
+	listeners.add(listener);
+
+	return () => {
+		listeners.delete(listener);
+	};
+};
+
+export const useRegisteredScreenSlots = (screenKey?: ScreenKey | null) => {
+	return useSyncExternalStore(
+		subscribe,
+		() => (screenKey ? (snapshot[screenKey] ?? null) : null),
+		() => null,
+	);
+};

package/src/shared/stores/bounds/helpers/link-pairs.helpers.ts

@@ -36,6 +36,15 @@ export const getSourceScreenKeyFromPairKey = (
 	return pairKey.slice(0, separatorIndex);
 };
 
+export const getDestinationScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] | "" => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return "";
+	return pairKey.slice(separatorIndex + PAIR_SEPARATOR.length);
+};
+
 export const isScreenPairKeyForScreen = (
 	pairKey: ScreenPairKey,
 	screenKey: ScreenIdentifier["screenKey"],
@@ -94,7 +103,9 @@ const ensurePairState = (
 			groups: {},
 		};
 	}
-	state[pairKey].groups ??= {};
+	if (!state[pairKey].groups) {
+		state[pairKey].groups = {};
+	}
 	return state[pairKey];
 };
 
@@ -114,6 +125,18 @@ export const ensurePairGroups = (
 	return ensurePairState(state, pairKey).groups;
 };
 
+export const ensurePairSourceRequests = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, true> => {
+	"worklet";
+	const pair = ensurePairState(state, pairKey);
+	if (!pair.sourceRequests) {
+		pair.sourceRequests = {};
+	}
+	return pair.sourceRequests;
+};
+
 export const removePairLink = (
 	state: LinkPairsState,
 	pairKey: ScreenPairKey,

package/src/shared/stores/bounds/internals/entries.ts

@@ -38,15 +38,23 @@ const applyEntryPatch = (entry: Entry, patch: EntryPatch) => {
 		entry.styles = patch.styles ?? {};
 	}
 
-	if (patch.boundaryConfig === undefined) {
-		return;
-	}
-
 	if (patch.boundaryConfig === null) {
 		delete entry.boundaryConfig;
-	} else {
+	} else if (patch.boundaryConfig !== undefined) {
 		entry.boundaryConfig = patch.boundaryConfig;
 	}
+
+	if (patch.handoff === null) {
+		delete entry.handoff;
+	} else if (patch.handoff !== undefined) {
+		entry.handoff = patch.handoff;
+	}
+
+	if (patch.escapeClipping === null) {
+		delete entry.escapeClipping;
+	} else if (patch.escapeClipping !== undefined) {
+		entry.escapeClipping = patch.escapeClipping;
+	}
 };
 
 function getEntry(tag: TagID, key: ScreenKey): Entry | null {

package/src/shared/stores/bounds/internals/links.ts

@@ -1,26 +1,23 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import {
 	createGroupTag,
-	createPendingPairKey,
 	ensurePairGroups,
 	ensurePairLinks,
+	ensurePairSourceRequests,
 	getGroupKeyFromTag,
 	getLinkKeyFromTag,
 	getActiveGroupId as getPairActiveGroupId,
 	getDestination as getPairDestination,
 	getLink as getPairLink,
 	getSource as getPairSource,
-	getSourceScreenKeyFromPairKey,
-	removePairLink,
 } from "../helpers/link-pairs.helpers";
 import type {
-	BoundsPortalAttachTarget,
+	BoundaryRuntimeFlags,
 	GroupKey,
 	LinkKey,
 	LinkPairsState,
 	ScreenKey,
 	ScreenPairKey,
-	SourceHostRef,
 	SourceTagLinkSide,
 	TagID,
 	TagLink,
@@ -36,16 +33,151 @@ const syncLinkStatus = (link: TagLink) => {
 		: "source-incomplete";
 };
 
+type SharedValueLike = {
+	_isReanimatedSharedValue: true;
+	get?: () => unknown;
+	value?: unknown;
+};
+
+const isSharedValueLike = (value: unknown): value is SharedValueLike => {
+	"worklet";
+	return (
+		(value as Partial<SharedValueLike> | null)?._isReanimatedSharedValue ===
+		true
+	);
+};
+
+const snapshotSharedValue = (value: SharedValueLike): unknown => {
+	"worklet";
+	return value.value;
+};
+
+const snapshotTransformArrayValue = (
+	value: unknown[],
+): unknown[] | undefined => {
+	"worklet";
+	const snapshot: unknown[] = [];
+
+	for (let index = 0; index < value.length; index++) {
+		const snapshotValue = snapshotTransformEntryValue(value[index]);
+		if (snapshotValue !== undefined) {
+			snapshot.push(snapshotValue);
+		}
+	}
+
+	return snapshot;
+};
+
+const snapshotTransformEntryValue = (value: unknown): unknown => {
+	"worklet";
+	if (isSharedValueLike(value)) {
+		return snapshotSharedValue(value);
+	}
+
+	if (Array.isArray(value)) {
+		return snapshotTransformArrayValue(value);
+	}
+
+	if (typeof value === "function") {
+		return undefined;
+	}
+
+	return value === null || typeof value !== "object" ? value : undefined;
+};
+
+const snapshotTransformItem = (value: unknown): unknown => {
+	"worklet";
+	if (!value || typeof value !== "object" || Array.isArray(value)) {
+		return snapshotTransformEntryValue(value);
+	}
+
+	const snapshot: Record<string, unknown> = {};
+	const source = value as Record<string, unknown>;
+	let hasValue = false;
+
+	for (const key in source) {
+		const snapshotValue = snapshotTransformEntryValue(source[key]);
+		if (snapshotValue !== undefined) {
+			snapshot[key] = snapshotValue;
+			hasValue = true;
+		}
+	}
+
+	return hasValue ? snapshot : undefined;
+};
+
+const snapshotTransform = (value: unknown): unknown => {
+	"worklet";
+	if (!Array.isArray(value)) {
+		return undefined;
+	}
+
+	const snapshot: unknown[] = [];
+
+	for (let index = 0; index < value.length; index++) {
+		const snapshotValue = snapshotTransformItem(value[index]);
+		if (snapshotValue !== undefined) {
+			snapshot.push(snapshotValue);
+		}
+	}
+
+	return snapshot;
+};
+
+/**
+ * Link styles are measurement metadata, not a general style serializer.
+ * Snapshot only the fields bounds currently consume: primitives, top-level
+ * shared values, and transform entries. Object-valued non-transform styles are
+ * intentionally omitted to avoid retaining opaque/native style objects.
+ */
+const snapshotStyles = (styles: StyleProps): StyleProps => {
+	"worklet";
+	if (!styles || typeof styles !== "object" || Array.isArray(styles)) {
+		return {};
+	}
+
+	const snapshot: Record<string, unknown> = {};
+	const source = styles as Record<string, unknown>;
+
+	for (const key in source) {
+		const value = source[key];
+
+		if (key === "transform") {
+			const transform = snapshotTransform(value);
+
+			if (transform !== undefined) {
+				snapshot.transform = transform;
+			}
+
+			continue;
+		}
+
+		if (isSharedValueLike(value)) {
+			snapshot[key] = snapshotSharedValue(value);
+			continue;
+		}
+
+		if (value === null || typeof value !== "object") {
+			snapshot[key] = value;
+		}
+	}
+
+	return snapshot as StyleProps;
+};
+
 const createLinkSide = (
 	screenKey: ScreenKey,
 	bounds: MeasuredDimensions,
 	styles: StyleProps,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) => {
 	"worklet";
 	return {
 		screenKey,
 		bounds,
-		styles,
+		styles: snapshotStyles(styles),
+		handoff: runtimeFlags.handoff ? true : undefined,
+		escapeClipping: runtimeFlags.escapeClipping ? true : undefined,
 	};
 };
 
@@ -100,7 +232,9 @@ const writeDestination = (
 
 	link.group = group ?? link.group;
 	link.destination = destination;
-	link.initialDestination ??= destination;
+	if (!link.initialDestination) {
+		link.initialDestination = destination;
+	}
 	syncLinkStatus(link);
 
 	writePairLink(state, pairKey, linkKey, link);
@@ -110,41 +244,6 @@ const writeDestination = (
 	}
 };
 
-const promotePendingSource = (
-	state: LinkPairsState,
-	pairKey: ScreenPairKey,
-	linkKey: LinkKey,
-) => {
-	"worklet";
-	if (getPairLink(state, pairKey, linkKey)) return;
-
-	const sourceScreenKey = getSourceScreenKeyFromPairKey(pairKey);
-	const pendingPairKey = createPendingPairKey(sourceScreenKey);
-	if (pendingPairKey === pairKey) return;
-
-	const pendingLink = getPairLink(state, pendingPairKey, linkKey);
-	if (!pendingLink) return;
-
-	writePairLink(state, pairKey, linkKey, pendingLink);
-
-	if (pendingLink.group) {
-		const pendingGroupState =
-			state[pendingPairKey]?.groups?.[pendingLink.group];
-
-		if (pendingGroupState) {
-			writeGroup(
-				state,
-				pairKey,
-				pendingLink.group,
-				pendingGroupState.activeId,
-				pendingGroupState.initialId,
-			);
-		}
-	}
-
-	removePairLink(state, pendingPairKey, linkKey);
-};
-
 function setSource(
 	pairKey: ScreenPairKey,
 	tag: TagID,
@@ -152,8 +251,7 @@ function setSource(
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
 	group?: GroupKey,
-	portalAttachTarget?: BoundsPortalAttachTarget,
-	sourceHost?: SourceHostRef,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) {
 	"worklet";
 	pairs.modify(<T extends LinkPairsState>(state: T): T => {
@@ -164,13 +262,8 @@ function setSource(
 
 		const existingLink = pairLinks[linkKey];
 
-		// Refresh paths may re-measure the source without portal context;
-		// keep the previously recorded host in that case.
 		const source: SourceTagLinkSide = {
-			...createLinkSide(screenKey, bounds, styles),
-			portalAttachTarget:
-				portalAttachTarget ?? existingLink?.source?.portalAttachTarget,
-			sourceHost: sourceHost ?? existingLink?.source?.sourceHost,
+			...createLinkSide(screenKey, bounds, styles, runtimeFlags),
 		};
 		const link =
 			existingLink ??
@@ -184,15 +277,13 @@ function setSource(
 
 		link.group = group ?? link.group;
 		link.source = source;
-		link.initialSource ??= source;
+		if (!link.initialSource) {
+			link.initialSource = source;
+		}
 		syncLinkStatus(link);
 
 		pairLinks[linkKey] = link;
-
-		const pendingPairKey = createPendingPairKey(screenKey);
-		if (pendingPairKey !== pairKey) {
-			removePairLink(state, pendingPairKey, linkKey);
-		}
+		delete state[pairKey]?.sourceRequests?.[linkKey];
 
 		return state;
 	});
@@ -210,7 +301,6 @@ function setDestination(
 	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
 		const linkKey = getLinkKeyFromTag(tag);
-		promotePendingSource(state, pairKey, linkKey);
 		writeDestination(state, pairKey, linkKey, screenKey, bounds, styles, group);
 
 		return state;
@@ -226,6 +316,23 @@ function setActiveGroupId(pairKey: ScreenPairKey, group: GroupKey, tag: TagID) {
 	});
 }
 
+function requestSourceMeasure(pairKey: ScreenPairKey, tag: TagID) {
+	"worklet";
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		const linkKey = getLinkKeyFromTag(tag);
+		const link = getPairLink(state, pairKey, linkKey);
+
+		if (link?.source || state[pairKey]?.sourceRequests?.[linkKey]) {
+			return state;
+		}
+
+		ensurePairSourceRequests(state, pairKey)[linkKey] = true;
+
+		return state;
+	});
+}
+
 function getActiveGroupId(
 	pairKey: ScreenPairKey,
 	group: GroupKey,
@@ -246,20 +353,6 @@ const hasSourceLink = (
 	return !!link?.source;
 };
 
-const getPendingSourceLink = (
-	state: LinkPairsState,
-	pairKey: ScreenPairKey,
-	linkKey: LinkKey,
-): TagLink | null => {
-	"worklet";
-	const sourceScreenKey = getSourceScreenKeyFromPairKey(pairKey);
-	const pendingPairKey = createPendingPairKey(sourceScreenKey);
-
-	if (pendingPairKey === pairKey) return null;
-
-	return getPairLink(state, pendingPairKey, linkKey);
-};
-
 function getResolvedLink(
 	pairKey: ScreenPairKey,
 	tag: TagID,
@@ -268,17 +361,7 @@ function getResolvedLink(
 	const state = pairs.get();
 	const linkKey = getLinkKeyFromTag(tag);
 	const group = getGroupKeyFromTag(tag);
-	const requestedLink = getPairLink(state, pairKey, linkKey);
-
-	// Press-triggered zoom captures the source before navigation under a pending
-	// source<> pair. If the destination screen has no Boundary.View, nothing
-	// promotes that source into source<>destination, but zoom can still animate to
-	// its default top target from the pending source bounds.
-	const fallbackPendingLink = requestedLink
-		? null
-		: getPendingSourceLink(state, pairKey, linkKey);
-
-	const link = requestedLink ?? fallbackPendingLink;
+	const link = getPairLink(state, pairKey, linkKey);
 
 	// Group active ids can update before the new member has a full source/destination
 	// link. As soon as the requested member has source bounds, prefer it; only
@@ -292,9 +375,7 @@ function getResolvedLink(
 
 	const initialId = state[pairKey]?.groups?.[group]?.initialId;
 	if (initialId) {
-		const initialLink =
-			getPairLink(state, pairKey, initialId) ??
-			getPendingSourceLink(state, pairKey, initialId);
+		const initialLink = getPairLink(state, pairKey, initialId);
 
 		if (hasSourceLink(initialLink)) {
 			return {
@@ -332,6 +413,7 @@ export {
 	getLink,
 	getResolvedLink,
 	getSource,
+	requestSourceMeasure,
 	setActiveGroupId,
 	setDestination,
 	setSource,

package/src/shared/stores/bounds/internals/resolver.ts

@@ -39,8 +39,6 @@ function resolveTransitionPair(
 		destinationStyles: matchedLink?.destination?.styles ?? null,
 		sourceScreenKey: matchedLink?.source?.screenKey ?? null,
 		destinationScreenKey: matchedLink?.destination?.screenKey ?? null,
-		sourcePortalAttachTarget: matchedLink?.source?.portalAttachTarget,
-		sourceHost: matchedLink?.source?.sourceHost,
 	};
 }