react-native-screen-transitions 3.9.0-alpha.3 → 3.9.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.9.0-alpha.3",
+	"version": "3.9.0-beta.1",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",

package/src/component-stack/types.ts

@@ -13,8 +13,14 @@ import type {
 import type { ScreenTransitionConfig } from "../shared";
 import type { OverlayProps } from "../shared/types/overlay.types";
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationEventMap = {};
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationProp<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = string,
@@ -29,6 +35,9 @@ export type ComponentStackNavigationProp<
 > &
 	StackActionHelpers<ParamList>;
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackScreenProps<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = string,
@@ -38,6 +47,9 @@ export type ComponentStackScreenProps<
 	route: RouteProp<ParamList, RouteName>;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackOptionsArgs<
 	ParamList extends ParamListBase,
 	RouteName extends keyof ParamList = keyof ParamList,
@@ -46,6 +58,9 @@ export type ComponentStackOptionsArgs<
 	theme: Theme;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationHelpers = NavigationHelpers<
 	ParamListBase,
 	ComponentStackNavigationEventMap
@@ -56,6 +71,8 @@ type ComponentStackNavigationConfig = {};
 /**
  * Props passed to overlay components in component-stack.
  * Uses the shared OverlayProps type with component-stack's navigation type.
+ *
+ * @deprecated Component stack is deprecated. Use blank stack instead.
  */
 export type ComponentStackOverlayProps = OverlayProps<
 	ComponentStackNavigationProp<ParamListBase>
@@ -70,9 +87,15 @@ type ComponentStackScreenTransitionConfig = ScreenTransitionConfig & {
 	detachPreviousScreen?: boolean;
 };
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigationOptions =
 	ComponentStackScreenTransitionConfig & {};
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
 	ParamListBase,
 	string | undefined,
@@ -84,6 +107,9 @@ export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
 	StackRouterOptions &
 	ComponentStackNavigationConfig;
 
+/**
+ * @deprecated Component stack is deprecated. Use blank stack instead.
+ */
 export type ComponentStackDescriptor = Descriptor<
 	ComponentStackNavigationOptions,
 	ComponentStackNavigationProp<ParamListBase>,

package/src/shared/components/boundary/portal/components/portal-boundary-host.tsx

@@ -3,7 +3,13 @@ import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { composeSlotStyleWithLocalTransform } from "../../../../providers/screen/styles/helpers/compose-slot-style";
+import { AnimationStore } from "../../../../stores/animation.store";
+import { getSourceScreenKeyFromPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getLink } from "../../../../stores/bounds/internals/links";
+import {
+	getClampedScrollAxisDelta,
+	ScrollStore,
+} from "../../../../stores/scroll.store";
 import type { ScrollMeasuredDimensions } from "../../utils/measured-bounds";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 import { NativePortalHost } from "../teleport";
@@ -23,6 +29,20 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	host,
 	style,
 }: PortalBoundaryHostProps) {
+	// Cross-screen landing-rect scroll tracking: the flight interpolates toward
+	// the source rect stored at measure time, but the source screen stays
+	// scrollable while the pair closes (destination pointer events are
+	// released). These are read per-frame so the landing point follows the
+	// live source scroll instead of the stale snapshot.
+	const sourceScrollMetadata = ScrollStore.getValue(
+		getSourceScreenKeyFromPairKey(host.pairKey),
+		"metadata",
+	);
+	const hostVisualProgress = AnimationStore.getValue(
+		host.screenKey,
+		"visualProgress",
+	);
+
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
 		// Strict per-member lookup — a fallback member's source rect would
@@ -35,10 +55,41 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
 		const isCrossScreenPortal = link.source.screenKey !== host.screenKey;
 
+		let landingShift: { x: number; y: number } | undefined;
+
+		if (isCrossScreenPortal) {
+			// Weight by distance-to-landing so the destination end of the flight
+			// stays pinned: no correction while the content sits over the
+			// destination rect (progress 1), full correction at touchdown on the
+			// source rect (progress 0).
+			const landingWeight =
+				1 - Math.min(Math.max(hostVisualProgress.get(), 0), 1);
+
+			if (landingWeight > 0) {
+				const liveScroll = sourceScrollMetadata.get();
+				const capturedScroll = sourceBounds.scroll ?? null;
+
+				// Scroll offset grows as content moves up/left, so the rect's
+				// on-screen position shifts by the negative delta.
+				landingShift = {
+					x:
+						-getClampedScrollAxisDelta(
+							liveScroll,
+							capturedScroll,
+							"horizontal",
+						) * landingWeight,
+					y:
+						-getClampedScrollAxisDelta(liveScroll, capturedScroll, "vertical") *
+						landingWeight,
+				};
+			}
+		}
+
 		return resolvePortalOffsetStyle({
 			bounds: sourceBounds,
 			hostKey: host.hostKey,
 			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
+			landingShift,
 		});
 	});
 	const contentFrameStyle = useAnimatedStyle(() => {

package/src/shared/components/boundary/portal/components/portal.tsx

@@ -7,14 +7,13 @@ import {
 	useLayoutEffect,
 	useState,
 } from "react";
-import type { LayoutRectangle, View } from "react-native";
+import type { View } from "react-native";
 import Animated, {
 	type AnimatedRef,
 	runOnJS,
 	runOnUI,
 	useAnimatedProps,
 	useAnimatedReaction,
-	useAnimatedStyle,
 	useSharedValue,
 } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
@@ -24,6 +23,7 @@ import { useRegisteredScreenSlots } from "../../../../providers/screen/styles/st
 import { AnimationStore } from "../../../../stores/animation.store";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import { logger } from "../../../../utils/logger";
+import { usePlaceholderStyles } from "../hooks/use-placeholder-styles";
 import { useActiveHostKey } from "../stores/host-registry.store";
 import {
 	dropStalePortalBoundaryHosts,
@@ -86,6 +86,7 @@ export const Portal = memo(function Portal({
 	// (the `return children` path below).
 	const isPortalEnabled =
 		(handoff || escapeClipping) && isTeleportAvailable && id !== undefined;
+
 	if (__DEV__ && (handoff || escapeClipping) && id === undefined) {
 		logger.warnOnce(
 			"portal:missing-id",
@@ -103,6 +104,7 @@ export const Portal = memo(function Portal({
 		PortalOwnershipSignal,
 		{ status: "complete" }
 	> | null>(null);
+
 	const styleOwnerScreenKey = ownership?.ownerScreenKey ?? currentScreenKey;
 	const ownerScreenSlots = useRegisteredScreenSlots(styleOwnerScreenKey);
 	const activeScreenSlots = ownerScreenSlots ?? ownScreenSlots;
@@ -114,8 +116,6 @@ export const Portal = memo(function Portal({
 	const requestedPortalHostName = useSharedValue<string | null>(null);
 	const visiblePortalHostName = useSharedValue<string | null>(null);
 	const canSwitchPortalHostImmediately = useSharedValue(0);
-	const placeholderWidth = useSharedValue(0);
-	const placeholderHeight = useSharedValue(0);
 
 	const targetScreenKey = ownership ? ownership.hostScreenKey : null;
 	const settledHostScreenKey = ownership?.hostScreenKey ?? null;
@@ -386,42 +386,10 @@ export const Portal = memo(function Portal({
 		};
 	});
 
-	// Pin the placeholder to its measured size while content lives in the host,
-	// in the same UI frame the host name flips — no commit in between. Until the
-	// first layout lands (dims 0) sizing stays natural so an instant attach
-	// cannot collapse the slot.
-	const placeholderStyle = useAnimatedStyle(() => {
-		"worklet";
-		const isAttached = visiblePortalHostName.get() !== null;
-		const width = placeholderWidth.get();
-		const height = placeholderHeight.get();
-
-		if (!isAttached || width === 0) {
-			return { width: "auto", height: "auto" } as const;
-		}
-
-		return { width, height };
+	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles({
+		visiblePortalHostName,
 	});
 
-	const handleOnLayout = useCallback(
-		(layout: LayoutRectangle) => {
-			"worklet";
-			const { width, height } = layout;
-			if (width === 0 || height === 0) {
-				return;
-			}
-
-			const hasValidDimensions =
-				placeholderHeight.get() !== 0 && placeholderWidth.get() !== 0;
-
-			if (!hasValidDimensions) {
-				placeholderWidth.set(width);
-				placeholderHeight.set(height);
-			}
-		},
-		[placeholderHeight, placeholderWidth],
-	);
-
 	if (isPortalEnabled && AnimatedNativePortal) {
 		return (
 			<Animated.View
@@ -434,7 +402,7 @@ export const Portal = memo(function Portal({
 			>
 				{placeholderChildren}
 				<AnimatedNativePortal animatedProps={teleportProps} name={boundaryId}>
-					<Animated.View style={placeholderStyle}>{children}</Animated.View>
+					{children}
 				</AnimatedNativePortal>
 			</Animated.View>
 		);

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

@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import type { LayoutRectangle } from "react-native";
+import {
+	type SharedValue,
+	useAnimatedStyle,
+	useSharedValue,
+} from "react-native-reanimated";
+
+interface UsePlaceholderProps {
+	visiblePortalHostName: SharedValue<string | null>;
+}
+
+export const usePlaceholderStyles = ({
+	visiblePortalHostName,
+}: UsePlaceholderProps) => {
+	const placeholderWidth = useSharedValue(0);
+	const placeholderHeight = useSharedValue(0);
+	// Pin the placeholder to its measured size while content lives in the host,
+	// in the same UI frame the host name flips — no commit in between. Until the
+	// first layout lands (dims 0) sizing stays natural so an instant attach
+	// cannot collapse the slot.
+	const placeholderStyle = useAnimatedStyle(() => {
+		"worklet";
+		const isAttached = visiblePortalHostName.get() !== null;
+		const width = placeholderWidth.get();
+		const height = placeholderHeight.get();
+
+		if (!isAttached || width === 0) {
+			return { width: "auto", height: "auto" } as const;
+		}
+
+		return { width, height };
+	});
+
+	const handleOnLayout = useCallback(
+		(layout: LayoutRectangle) => {
+			"worklet";
+			const { width, height } = layout;
+			if (width === 0 || height === 0) {
+				return;
+			}
+
+			const hasValidDimensions =
+				placeholderHeight.get() !== 0 && placeholderWidth.get() !== 0;
+
+			if (!hasValidDimensions) {
+				placeholderWidth.set(width);
+				placeholderHeight.set(height);
+			}
+		},
+		[placeholderHeight, placeholderWidth],
+	);
+
+	return { placeholderStyle, handleOnLayout };
+};

package/src/shared/components/boundary/portal/utils/offset-style.ts

@@ -19,12 +19,19 @@ type ResolvePortalOffsetStyleParams = {
 	bounds: ScrollMeasuredDimensions;
 	hostKey: string;
 	placement: PortalOffsetPlacement;
+	/**
+	 * Live correction applied on top of the stored source placement. Used by
+	 * cross-screen hosts to keep the landing rect tracking the source screen's
+	 * scroll while the source is interactive mid-flight.
+	 */
+	landingShift?: { x: number; y: number };
 };
 
 export const resolvePortalOffsetStyle = ({
 	bounds,
 	hostKey,
 	placement,
+	landingShift,
 }: ResolvePortalOffsetStyleParams): StyleProps => {
 	"worklet";
 	const hostBounds = getPortalHostBounds(hostKey);
@@ -62,8 +69,8 @@ export const resolvePortalOffsetStyle = ({
 
 	return {
 		transform: [
-			{ translateY: bounds.pageY - adjustedHostPageY },
-			{ translateX: bounds.pageX - adjustedHostPageX },
+			{ translateY: bounds.pageY - adjustedHostPageY + (landingShift?.y ?? 0) },
+			{ translateX: bounds.pageX - adjustedHostPageX + (landingShift?.x ?? 0) },
 		],
 	};
 };

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,
@@ -63,7 +67,12 @@ export type {
 	InactiveBehavior,
 	OverlayProps,
 	RawGestureValues,
+	ScreenBackdropComponent,
+	ScreenBackdropComponentProps,
+	ScreenContentComponent,
+	ScreenContentComponentProps,
 	ScreenInterpolationProps,
+	ScreenLayerComponentProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionAccessor,
 	ScreenTransitionConfig,

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/read-screen-animation-revisions.ts

@@ -1,13 +1,17 @@
+import type { SharedValue } from "react-native-reanimated";
 import type {
 	ScreenAnimationDescendantSources,
 	ScreenAnimationSource,
 	ScreenInterpolatorPropsRevision,
 } from "../types";
 
+type ScreenInterpolatorExternalDeps = Pick<SharedValue<unknown>, "get">[];
+
 export const readScreenAnimationRevisions = (
 	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision,
 	ancestorScreenAnimationSources: ScreenAnimationSource[],
 	descendantScreenAnimationSources: ScreenAnimationDescendantSources,
+	screenInterpolatorExternalDeps?: ScreenInterpolatorExternalDeps,
 ) => {
 	"worklet";
 	screenInterpolatorPropsRevision.get();
@@ -22,4 +26,14 @@ export const readScreenAnimationRevisions = (
 	for (let index = 0; index < descendantSources.length; index++) {
 		descendantSources[index]?.source.screenInterpolatorPropsRevision.get();
 	}
+
+	if (screenInterpolatorExternalDeps) {
+		for (
+			let index = 0;
+			index < screenInterpolatorExternalDeps.length;
+			index++
+		) {
+			screenInterpolatorExternalDeps[index]?.get();
+		}
+	}
 };