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

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

@@ -26,19 +26,6 @@ const buildRefreshSignal = (
 	};
 };
 
-const isMatchedScreenPortalDestinationRefresh = (
-	linkState: LinkPairsState | undefined,
-	pairKey: ScreenPairKey,
-	linkId: string,
-) => {
-	"worklet";
-
-	return (
-		linkState?.[pairKey]?.links?.[linkId]?.source?.portalAttachTarget ===
-		"matched-screen"
-	);
-};
-
 export const getRefreshBoundarySignal = (params: {
 	enabled: boolean;
 	currentScreenKey: string;
@@ -99,22 +86,6 @@ export const getRefreshBoundarySignal = (params: {
 			return null;
 		}
 
-		// NOTE:
-		// Matched-screen portals use the destination as the initial host/anchor.
-		// Once attached, the teleported source is the thing being animated, so a
-		// fresh destination measure would mix in a second coordinate basis. Signals were introduced for scroll view cases + group
-		// cases, but I can't find a case for where a live component ( matched-screen ) would need this complexity. I would just assume
-		// you would want this for a->b | b->a transitions.
-		if (
-			isMatchedScreenPortalDestinationRefresh(
-				linkState,
-				refreshDestinationPairKey,
-				linkId,
-			)
-		) {
-			return null;
-		}
-
 		return buildRefreshSignal(
 			"destination",
 			refreshDestinationPairKey,
@@ -155,18 +126,6 @@ export const getRefreshBoundarySignal = (params: {
 		return null;
 	}
 
-	// NOTE:
-	// see above for explanation
-	if (
-		isMatchedScreenPortalDestinationRefresh(
-			linkState,
-			refreshDestinationPairKey,
-			linkId,
-		)
-	) {
-		return null;
-	}
-
 	return buildRefreshSignal(
 		"destination",
 		refreshDestinationPairKey,

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

@@ -15,32 +15,20 @@ export const getInitialSourceCaptureSignal = (params: {
 	sourcePairKey?: ScreenPairKey;
 	linkId: string;
 	group?: string;
-	shouldAutoMeasure: boolean;
 	linkState?: LinkPairsState;
 }): SourceCaptureSignal | null => {
 	"worklet";
-	const {
-		enabled,
-		sourcePairKey,
-		linkId,
-		group,
-		shouldAutoMeasure,
-		linkState,
-	} = params;
+	const { enabled, sourcePairKey, linkId, group, linkState } = params;
 
 	if (!enabled || !sourcePairKey) {
 		return null;
 	}
 
-	// Trigger components capture on press. Passive Boundary.View sources wait for
-	// their destination side to attach, then capture into the same assigned pair.
-	if (!shouldAutoMeasure) {
-		return null;
-	}
-
-	const link = linkState?.[sourcePairKey]?.links?.[linkId];
+	const pair = linkState?.[sourcePairKey];
+	const link = pair?.links?.[linkId];
+	const hasSourceRequest = pair?.sourceRequests?.[linkId];
 
-	if (!link?.destination || link.source) {
+	if ((!link?.destination && !hasSourceRequest) || link?.source) {
 		return null;
 	}
 

package/src/shared/components/masked-view.tsx

@@ -12,6 +12,10 @@ try {
 	// noop
 }
 
+/**
+ * @deprecated Use `navigationMaskEnabled` with the navigation mask style IDs
+ * instead.
+ */
 export default function MaskedView({
 	children,
 	style: userStyles = {},

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from "react";
+import { type ComponentType, memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
 import Animated, { runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
@@ -8,9 +8,13 @@ import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
-import type { BackdropBehavior } from "../../../types/screen.types";
+import type {
+	BackdropBehavior,
+	ScreenBackdropComponentProps,
+} from "../../../types/screen.types";
 import { animateToProgress } from "../../../utils/animation/animate-to-progress";
 import { findCollapseTarget } from "../helpers/find-collapse-target";
+import { usesLayerRenderProps } from "./render-component";
 
 export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior,
@@ -30,8 +34,10 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const AnimatedBackdropComponent = useMemo(
 		() =>
-			BackdropComponent
-				? Animated.createAnimatedComponent(BackdropComponent)
+			BackdropComponent && !usesLayerRenderProps(BackdropComponent)
+				? Animated.createAnimatedComponent(
+						BackdropComponent as ComponentType<any>,
+					)
 				: null,
 		[BackdropComponent],
 	);
@@ -108,6 +114,13 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const animatedBackdropStyle = useSlotStyles("backdrop");
 	const animatedBackdropProps = useSlotProps("backdrop");
+	const backdropPointerEvents = isBackdropActive ? "auto" : "none";
+	const backdropStyles = [
+		StyleSheet.absoluteFill,
+		animatedBackdropStyle,
+	] as ScreenBackdropComponentProps["styles"];
+	const backdropProps =
+		animatedBackdropProps as ScreenBackdropComponentProps["props"];
 
 	return (
 		<Pressable
@@ -115,16 +128,24 @@ export const BackdropLayer = memo(function BackdropLayer({
 			pointerEvents={isBackdropActive ? "auto" : "none"}
 			onPress={isBackdropActive ? handleBackdropPress : undefined}
 		>
-			{/* Keep blur props and visual style separated.
-			 * BlurView's animatable ref points at the inner native blur view, and mixing
-			 * animated style with animatedProps can break intensity updates. */}
-			{AnimatedBackdropComponent && (
+			{AnimatedBackdropComponent ? (
 				<AnimatedBackdropComponent
-					style={[StyleSheet.absoluteFill]}
+					style={backdropStyles}
 					animatedProps={animatedBackdropProps}
+					pointerEvents={backdropPointerEvents}
+				/>
+			) : BackdropComponent ? (
+				<BackdropComponent
+					styles={backdropStyles}
+					props={backdropProps}
+					pointerEvents={backdropPointerEvents}
+				/>
+			) : (
+				<Animated.View
+					style={backdropStyles}
+					pointerEvents={backdropPointerEvents}
 				/>
 			)}
-			<Animated.View style={[StyleSheet.absoluteFill, animatedBackdropStyle]} />
 		</Pressable>
 	);
 });

package/src/shared/components/screen-container/layers/content.tsx

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <Screen gesture is under the gesture context, so this will always exist.> */
-import { memo } from "react";
+import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
@@ -7,9 +7,11 @@ import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useGestureContext } from "../../../providers/screen/gestures";
 import { OriginProvider } from "../../../providers/screen/origin.provider";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
+import type { ScreenContentComponentProps } from "../../../types";
 import { ScreenFallbackHost } from "../../boundary/portal/components/host";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
+import { usesLayerRenderProps } from "./render-component";
 import { SurfaceContainer } from "./surface-container";
 
 type Props = {
@@ -23,9 +25,18 @@ export const ContentLayer = memo(
 		const { current } = useDescriptors();
 
 		const gestureContext = useGestureContext();
+		const ContentComponent = current.options.contentComponent;
 		const isNavigationMaskEnabled = !!current.options.navigationMaskEnabled;
 		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 
+		const AnimatedContentComponent = useMemo(() => {
+			return ContentComponent && !usesLayerRenderProps(ContentComponent)
+				? Animated.createAnimatedComponent(
+						ContentComponent as ComponentType<any>,
+					)
+				: null;
+		}, [ContentComponent]);
+
 		const hasAutoSnapPoint =
 			current.options.snapPoints?.includes("auto") ?? false;
 
@@ -33,32 +44,60 @@ export const ContentLayer = memo(
 
 		const animatedContentStyle = useSlotStyles("content");
 		const animatedContentProps = useSlotProps("content");
+		const contentStyles = [
+			styles.content,
+			animatedContentStyle,
+		] as ScreenContentComponentProps["styles"];
+		const contentProps =
+			animatedContentProps as ScreenContentComponentProps["props"];
+
+		const contentChildren = (
+			<MaybeMaskedNavigationContainer
+				pointerEvents={contentPointerEvents}
+				enabled={isNavigationMaskEnabled}
+			>
+				<SurfaceContainer pointerEvents={contentPointerEvents}>
+					<OriginProvider>
+						{hasAutoSnapPoint ? (
+							<View collapsable={false} onLayout={handleContentLayout}>
+								{children}
+							</View>
+						) : (
+							children
+						)}
+						<ScreenFallbackHost />
+					</OriginProvider>
+				</SurfaceContainer>
+			</MaybeMaskedNavigationContainer>
+		);
 
 		return (
 			<GestureDetector gesture={gestureContext!.detectorGesture}>
-				<Animated.View
-					style={[styles.content, animatedContentStyle]}
-					animatedProps={animatedContentProps}
-					pointerEvents={contentPointerEvents}
-				>
-					<MaybeMaskedNavigationContainer
+				{AnimatedContentComponent ? (
+					<AnimatedContentComponent
+						style={contentStyles}
+						animatedProps={animatedContentProps}
+						pointerEvents={contentPointerEvents}
+					>
+						{contentChildren}
+					</AnimatedContentComponent>
+				) : ContentComponent ? (
+					<ContentComponent
+						styles={contentStyles}
+						props={contentProps}
+						pointerEvents={contentPointerEvents}
+					>
+						{contentChildren}
+					</ContentComponent>
+				) : (
+					<Animated.View
+						style={contentStyles}
+						animatedProps={animatedContentProps}
 						pointerEvents={contentPointerEvents}
-						enabled={isNavigationMaskEnabled}
 					>
-						<SurfaceContainer pointerEvents={contentPointerEvents}>
-							<OriginProvider>
-								{hasAutoSnapPoint ? (
-									<View collapsable={false} onLayout={handleContentLayout}>
-										{children}
-									</View>
-								) : (
-									children
-								)}
-								<ScreenFallbackHost />
-							</OriginProvider>
-						</SurfaceContainer>
-					</MaybeMaskedNavigationContainer>
-				</Animated.View>
+						{contentChildren}
+					</Animated.View>
+				)}
 			</GestureDetector>
 		);
 	},

package/src/shared/components/screen-container/layers/render-component.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from "react";
+
+export function usesLayerRenderProps(
+	component: ComponentType<any>,
+): component is ComponentType<Record<string, unknown>> {
+	return (
+		typeof component === "function" && !component.prototype?.isReactComponent
+	);
+}

package/src/shared/components/screen-container/layers/surface-container.tsx

@@ -12,13 +12,14 @@ type Props = {
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 	const { current } = useDescriptors();
 
-	const SurfaceComponent = current.options.surfaceComponent;
+	/** @deprecated Use `contentComponent` instead. */
+	const DeprecatedSurfaceComponent = current.options.surfaceComponent;
 
 	const AnimatedSurfaceComponent = useMemo<ComponentType<any> | null>(() => {
-		return SurfaceComponent
-			? Animated.createAnimatedComponent(SurfaceComponent)
+		return DeprecatedSurfaceComponent
+			? Animated.createAnimatedComponent(DeprecatedSurfaceComponent)
 			: null;
-	}, [SurfaceComponent]);
+	}, [DeprecatedSurfaceComponent]);
 
 	if (!AnimatedSurfaceComponent) return children;
 

package/src/shared/index.ts

@@ -18,6 +18,10 @@ export default {
 	FlatList: createTransitionAwareComponent(FlatList, {
 		isScrollable: true,
 	}),
+	/**
+	 * @deprecated Use `navigationMaskEnabled` with the navigation mask style IDs
+	 * instead.
+	 */
 	MaskedView: MaskedView,
 	Presets,
 	Specs,
@@ -26,11 +30,6 @@ export default {
 export type { NativeStackAdapterOptions } from "./adapters/with-screen-transitions";
 export { withScreenTransitions } from "./adapters/with-screen-transitions";
 export { snapTo } from "./animation/snap-to";
-export type {
-	BoundaryPortal,
-	BoundaryPortalAttachTarget,
-	BoundaryPortalOptions,
-} from "./components/boundary";
 export {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
@@ -68,7 +67,12 @@ export type {
 	InactiveBehavior,
 	OverlayProps,
 	RawGestureValues,
+	ScreenBackdropComponent,
+	ScreenBackdropComponentProps,
+	ScreenContentComponent,
+	ScreenContentComponentProps,
 	ScreenInterpolationProps,
+	ScreenLayerComponentProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionAccessor,
 	ScreenTransitionConfig,

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

@@ -1,11 +1,7 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
-import type {
-	BoundsPortalAttachTarget,
-	ScreenPairKey,
-	SourceHostRef,
-} from "../../stores/bounds/types";
+import type { ScreenPairKey } from "../../stores/bounds/types";
 
 type LinkWrite =
 	| {
@@ -25,8 +21,8 @@ type ApplyMeasuredBoundsWritesParams = {
 	measured: MeasuredDimensions;
 	preparedStyles: StyleProps;
 	linkWrite?: LinkWrite;
-	portalHost?: BoundsPortalAttachTarget;
-	sourceHost?: SourceHostRef;
+	handoff?: boolean;
+	escapeClipping?: boolean;
 };
 
 export const applyMeasuredBoundsWrites = (
@@ -41,8 +37,8 @@ export const applyMeasuredBoundsWrites = (
 		measured,
 		preparedStyles,
 		linkWrite,
-		portalHost,
-		sourceHost,
+		handoff,
+		escapeClipping,
 	} = params;
 
 	// Set the bounds entry on every measure to avoid any stale measurements
@@ -59,8 +55,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
-			portalHost,
-			sourceHost,
+			{ handoff, escapeClipping },
 		);
 	}
 

package/src/shared/providers/register-bounds.provider.tsx

@@ -25,6 +25,11 @@ import createProvider from "../utils/create-provider";
 import { applyMeasuredBoundsWrites } from "./helpers/measured-bounds-writes";
 import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
 
+/**
+ * @deprecated Internal legacy provider for the old shared-bound-tag registration
+ * path. Do not build new boundary behavior here; use the Transition.Boundary
+ * measurement pipeline instead.
+ */
 interface MaybeMeasureAndStoreParams {
 	onPress?: ((...args: unknown[]) => void) | undefined;
 	shouldSetSource?: boolean;

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

@@ -5,6 +5,7 @@ interface DerivationsTarget {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	progress: number;
+	transitionProgress: number;
 	focused: boolean;
 	active: ScreenTransitionState;
 	inactive: ScreenTransitionState | undefined;
@@ -14,6 +15,8 @@ export const updateDerivations = (frame: DerivationsTarget) => {
 	"worklet";
 
 	frame.progress = frame.current.progress + (frame.next?.progress ?? 0);
+	frame.transitionProgress =
+		frame.current.transitionProgress + (frame.next?.transitionProgress ?? 0);
 	frame.focused = !frame.next;
 	frame.active = frame.focused ? frame.current : (frame.next ?? frame.current);
 	frame.inactive = frame.focused ? frame.previous : frame.current;

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

@@ -184,6 +184,7 @@ const createInitialInterpolatorProps = ({
 		current,
 		next,
 		progress: 0,
+		transitionProgress: 0,
 		stackProgress: 0,
 		logicallySettled: 1,
 		focused: true,

package/src/shared/providers/screen/styles/helpers/compose-slot-style.ts

@@ -0,0 +1,129 @@
+import type { StyleProps, TransformArrayItem } from "react-native-reanimated";
+import { NO_STYLES } from "../../../../constants";
+
+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 resolveTransformValue = <T>(value: T): T | unknown => {
+	"worklet";
+	if (isSharedValueLike(value)) {
+		return value.value;
+	}
+
+	if (Array.isArray(value)) {
+		const resolved = [];
+		for (let index = 0; index < value.length; index++) {
+			const item = value[index];
+			resolved.push(isSharedValueLike(item) ? item.value : item);
+		}
+		return resolved;
+	}
+
+	return value;
+};
+
+const resolveTransformItem = (
+	value: TransformArrayItem,
+): TransformArrayItem => {
+	"worklet";
+	if (typeof value === "object" && value !== null) {
+		const resolved: Record<string, unknown> = {};
+		const source = value as Record<string, unknown>;
+		for (const key in source) {
+			resolved[key] = resolveTransformValue(source[key]);
+		}
+		return resolved as TransformArrayItem;
+	}
+
+	return value;
+};
+
+const resolveLocalTransform = (
+	transform: TransformArrayItem[],
+): TransformArrayItem[] => {
+	"worklet";
+	const resolved: TransformArrayItem[] = [];
+
+	for (let index = 0; index < transform.length; index++) {
+		resolved.push(resolveTransformItem(transform[index]));
+	}
+
+	return resolved;
+};
+
+const flattenStyleObject = (
+	style: unknown,
+): Record<string, unknown> | undefined => {
+	if (style === null || style === undefined || typeof style !== "object") {
+		return undefined;
+	}
+
+	if (!Array.isArray(style)) {
+		return style as Record<string, unknown>;
+	}
+
+	let flattened: Record<string, unknown> | undefined;
+	for (let index = 0; index < style.length; index++) {
+		const child = flattenStyleObject(style[index]);
+
+		if (!child) {
+			continue;
+		}
+
+		flattened = flattened ?? {};
+		Object.assign(flattened, child);
+	}
+
+	return flattened;
+};
+
+export const getLocalTransformForSlotComposition = (
+	style: unknown,
+): TransformArrayItem[] | undefined => {
+	const flattened = flattenStyleObject(style);
+	const transform = flattened?.transform;
+
+	return Array.isArray(transform)
+		? (transform as TransformArrayItem[])
+		: undefined;
+};
+
+export const composeSlotStyleWithLocalTransform = (
+	slotStyle: StyleProps | undefined,
+	localTransform: TransformArrayItem[] | undefined,
+	boundsLocalTransform?: TransformArrayItem[],
+): StyleProps => {
+	"worklet";
+	const resolvedSlotStyle = (slotStyle ?? NO_STYLES) as StyleProps;
+	// The measured bounds snapshot supersedes the live local transform so bounds
+	// geometry and payload scale are composed from the same measurement frame.
+	const transformToCompose = boundsLocalTransform ?? localTransform;
+
+	if (!transformToCompose?.length) {
+		return resolvedSlotStyle;
+	}
+
+	const slotTransform = resolvedSlotStyle.transform;
+	if (!Array.isArray(slotTransform)) {
+		return resolvedSlotStyle;
+	}
+
+	return {
+		...resolvedSlotStyle,
+		transform: [
+			...(slotTransform as TransformArrayItem[]),
+			...resolveLocalTransform(transformToCompose),
+		],
+	};
+};

package/src/shared/providers/screen/styles/helpers/normalize-slots.ts

@@ -2,6 +2,10 @@ import type {
 	NormalizedTransitionInterpolatedStyle,
 	NormalizedTransitionSlotStyle,
 } from "../../../../types/animation.types";
+import {
+	getBoundsLocalTransform,
+	stripBoundsLocalTransform,
+} from "../../../../utils/bounds/helpers/styles/local-transform";
 
 const isExplicitTransitionSlot = (value: unknown) => {
 	"worklet";
@@ -12,7 +16,14 @@ const isExplicitTransitionSlot = (value: unknown) => {
 	);
 };
 
-const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
+const hasBoundsLocalTransformMarker = (style: unknown) => {
+	"worklet";
+	return !!getBoundsLocalTransform(style as any)?.length;
+};
+
+const isAlreadyNormalizedStyleMapWithoutBoundsMetadata = (
+	raw: Record<string, any>,
+) => {
 	"worklet";
 
 	for (const key in raw) {
@@ -25,6 +36,14 @@ const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
 		if (!isExplicitTransitionSlot(value)) {
 			return false;
 		}
+
+		if (
+			hasBoundsLocalTransformMarker(
+				(value as NormalizedTransitionSlotStyle).style,
+			)
+		) {
+			return false;
+		}
 	}
 
 	return true;
@@ -42,10 +61,7 @@ export function normalizeSlots(
 ): NormalizedTransitionInterpolatedStyle {
 	"worklet";
 
-	// Most modern interpolators already return the canonical `{ style, props }`
-	// slot shape. In that common case, we can forward the raw object directly and
-	// avoid building a second map just to copy the same slot references over.
-	if (isAlreadyNormalizedStyleMap(raw)) {
+	if (isAlreadyNormalizedStyleMapWithoutBoundsMetadata(raw)) {
 		return raw as NormalizedTransitionInterpolatedStyle;
 	}
 
@@ -62,11 +78,32 @@ export function normalizeSlots(
 		}
 
 		if (isExplicitTransitionSlot(value)) {
-			// Proper TransitionSlotStyle — pass through
-			normalized[key] = value as NormalizedTransitionSlotStyle;
+			const explicitSlot = value as NormalizedTransitionSlotStyle;
+			const boundsLocalTransform = getBoundsLocalTransform(explicitSlot.style);
+
+			if (!boundsLocalTransform?.length) {
+				normalized[key] = explicitSlot;
+				continue;
+			}
+
+			normalized[key] = {
+				style: explicitSlot.style
+					? stripBoundsLocalTransform(explicitSlot.style)
+					: undefined,
+				props: explicitSlot.props,
+				boundsLocalTransform,
+			};
 		} else {
+			const boundsLocalTransform = getBoundsLocalTransform(value);
+			const style =
+				boundsLocalTransform?.length && value
+					? stripBoundsLocalTransform(value)
+					: value;
+
 			// Shorthand: plain StyleProps — wrap it
-			normalized[key] = { style: value };
+			normalized[key] = boundsLocalTransform?.length
+				? { style, boundsLocalTransform }
+				: { style };
 		}
 	}