react-native-screen-transitions 3.9.0-alpha.2 → 3.9.0-beta.0

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -107,6 +107,7 @@ const getResolvedSlotOutput = ({
 		resolvedSlot: materializeResolvedSlot({
 			baseStyle: state.baseStyle,
 			baseProps: state.baseProps,
+			boundsLocalTransform: slot?.boundsLocalTransform,
 			previousState,
 			styleKeys: state.styleKeys,
 			propKeys: state.propKeys,
@@ -164,6 +165,9 @@ const getMergedLocalSlot = (
 	"worklet";
 	let mergedStyle: Record<string, unknown> | undefined;
 	let mergedProps: Record<string, unknown> | undefined;
+	let boundsLocalTransform:
+		| NormalizedTransitionSlotStyle["boundsLocalTransform"]
+		| undefined;
 
 	for (let index = 0; index < context.localStylesMaps.length; index++) {
 		const slot = context.localStylesMaps[index]?.[slotId];
@@ -177,15 +181,19 @@ const getMergedLocalSlot = (
 			slot.style as Record<string, unknown> | undefined,
 		);
 		mergedProps = mergeBucket(mergedProps, slot.props);
+		if (slot.boundsLocalTransform?.length) {
+			boundsLocalTransform = slot.boundsLocalTransform;
+		}
 	}
 
-	if (!mergedStyle && !mergedProps) {
+	if (!mergedStyle && !mergedProps && !boundsLocalTransform) {
 		return undefined;
 	}
 
 	return {
 		style: mergedStyle,
 		props: mergedProps,
+		boundsLocalTransform,
 	};
 };
 
@@ -343,7 +351,11 @@ const areSlotsEqual = (
 
 	return (
 		areFlatObjectsEqual(left.style, right.style) &&
-		areFlatObjectsEqual(left.props, right.props)
+		areFlatObjectsEqual(left.props, right.props) &&
+		areTransformArraysEqual(
+			left.boundsLocalTransform,
+			right.boundsLocalTransform,
+		)
 	);
 };
 

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/materialize-slot.ts

@@ -111,6 +111,7 @@ const materializeResolvedProps = ({
 export const materializeResolvedSlot = ({
 	baseStyle,
 	baseProps,
+	boundsLocalTransform,
 	previousState,
 	styleKeys,
 	propKeys,
@@ -121,6 +122,7 @@ export const materializeResolvedSlot = ({
 }: {
 	baseStyle: Record<string, unknown> | undefined;
 	baseProps: Record<string, unknown> | undefined;
+	boundsLocalTransform: NormalizedTransitionSlotStyle["boundsLocalTransform"];
 	previousState: ResettableStyleState | undefined;
 	styleKeys: Record<string, true> | undefined;
 	propKeys: Record<string, true> | undefined;
@@ -149,6 +151,7 @@ export const materializeResolvedSlot = ({
 
 	resolvedSlot.style = resolvedStyle;
 	resolvedSlot.props = resolvedProps;
+	resolvedSlot.boundsLocalTransform = boundsLocalTransform;
 
 	if (!resolvedSlot.style && !resolvedSlot.props) {
 		return undefined;

package/src/shared/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import {
+	composeSlotStyleWithLocalTransform,
+	getLocalTransformForSlotComposition,
+} from "../helpers/compose-slot-style";
+import { useScreenSlots } from "../slot.provider";
+
+export const useSlotStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			undefined,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+export const useComposedSlotStyles = (
+	slotId: string | undefined,
+	style: unknown,
+) => {
+	const { slotsMap } = useScreenSlots();
+	const localTransform = useMemo(
+		() => getLocalTransformForSlotComposition(style),
+		[style],
+	);
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			localTransform,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+/**
+ * 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 useSlotLayoutStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const width = baseStyle?.width;
+		const height = baseStyle?.height;
+		const minWidth = baseStyle?.minWidth;
+		const minHeight = baseStyle?.minHeight;
+		const maxWidth = baseStyle?.maxWidth;
+		const maxHeight = baseStyle?.maxHeight;
+		const aspectRatio = baseStyle?.aspectRatio;
+
+		if (
+			width === undefined &&
+			height === undefined &&
+			minWidth === undefined &&
+			minHeight === undefined &&
+			maxWidth === undefined &&
+			maxHeight === undefined &&
+			aspectRatio === undefined
+		) {
+			return NO_STYLES;
+		}
+
+		return {
+			width,
+			height,
+			minWidth,
+			minHeight,
+			maxWidth,
+			maxHeight,
+			aspectRatio,
+		};
+	});
+};
+
+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/hooks/use-interpolated-style-maps.tsx

@@ -1,6 +1,10 @@
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { AnimationStore } from "../../../../stores/animation.store";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../../../stores/system.store";
 import type {
 	NormalizedTransitionInterpolatedStyle,
 	ScreenStyleInterpolator,
@@ -140,15 +144,19 @@ export const useInterpolatedStylesMap = () => {
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
 	const transition = useBuildTransitionAccessor();
+	const nextInterpolatorReady = useSharedValue(0);
 
+	const activeScreenKey = nextScreenKey ?? currentScreenKey;
 	const {
 		entering: activeEntering,
 		transitionProgress: activeTransitionProgress,
-	} = AnimationStore.getBag(nextScreenKey ?? currentScreenKey);
+	} = AnimationStore.getBag(activeScreenKey);
+	const { pendingLifecycleRequestKind: activePendingLifecycleRequestKind } =
+		SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
 
-	return useDerivedValue<LocalStyleLayers>(() => {
+	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
 		readScreenAnimationRevisions(
 			screenInterpolatorPropsRevision,
@@ -179,13 +187,18 @@ export const useInterpolatedStylesMap = () => {
 		// genuinely live: never during a gesture-driven close, never before a next
 		// interpolator exists, and never in the next screen's pre-start window
 		// (entering, but no transformed frame yet). Only then does "next" take over.
+		const isPendingOpen =
+			activePendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const activeOpening = isPendingOpen || !!activeEntering.get();
 		const currentOwnsInterpolator =
 			isInGestureMode ||
 			!nextInterpolator ||
 			isOpeningBeforeStart(
-				activeEntering.get(),
+				activeOpening ? 1 : 0,
 				activeTransitionProgress.get(),
 			);
+		nextInterpolatorReady.set(currentOwnsInterpolator ? 0 : 1);
 
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
@@ -250,4 +263,9 @@ export const useInterpolatedStylesMap = () => {
 
 		return layers;
 	});
+
+	return {
+		localStylesMaps,
+		nextInterpolatorReady,
+	};
 };

package/src/shared/providers/screen/styles/index.tsx

@@ -1,9 +1,14 @@
+export {
+	useComposedSlotStyles,
+	useSlotLayoutStyles,
+	useSlotProps,
+	useSlotStackingStyles,
+	useSlotStyles,
+} from "./hooks/slot-resolvers";
+
 export {
 	ScreenSlotContext,
 	type ScreenSlotName,
 	ScreenSlotProvider,
 	useScreenSlots,
-	useSlotProps,
-	useSlotStackingStyles,
-	useSlotStyles,
 } from "./slot.provider";

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 {