react-native-screen-transitions 3.6.0-alpha.4 → 3.6.0

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -3,11 +3,13 @@ import { NO_STYLES } from "../../../../constants";
 import { SystemStore } from "../../../../stores/system.store";
 import type {
 	NormalizedTransitionInterpolatedStyle,
+	ScreenStyleInterpolator,
 	TransitionInterpolatedStyle,
 } from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
 import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
@@ -16,10 +18,93 @@ import {
 } from "../../options";
 import { normalizeSlots } from "../helpers/normalize-slots";
 import { preserveAnimatedPropsOnly } from "../helpers/preserve-animated-props-only";
+import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
 
+const NO_STYLE_LAYERS: LocalStyleLayers = [];
+
+type InterpolatorResult = {
+	stylesMap: NormalizedTransitionInterpolatedStyle;
+	rawStyleMap: TransitionInterpolatedStyle | undefined;
+};
+
+type RunInterpolatorParams = {
+	interpolator: ScreenStyleInterpolator | undefined;
+	props: ScreenInterpolatorFrame;
+	progress: ScreenInterpolatorFrame["progress"];
+	next: ScreenInterpolatorFrame["next"];
+	bounds: Parameters<ScreenStyleInterpolator>[0]["bounds"];
+	shouldDeferStyleBuckets: boolean;
+};
+
+const normalizeRawStyleMap = (
+	rawStyleMap: TransitionInterpolatedStyle | undefined,
+	shouldDeferStyleBuckets: boolean,
+) => {
+	"worklet";
+
+	if (!rawStyleMap) {
+		return NO_STYLES;
+	}
+
+	const stylesMap = normalizeSlots(stripInterpolatorOptions(rawStyleMap));
+
+	return shouldDeferStyleBuckets
+		? preserveAnimatedPropsOnly(stylesMap)
+		: stylesMap;
+};
+
+const runInterpolator = ({
+	interpolator,
+	props,
+	progress,
+	next,
+	bounds,
+	shouldDeferStyleBuckets,
+}: RunInterpolatorParams): InterpolatorResult | undefined => {
+	"worklet";
+
+	if (!interpolator) {
+		return undefined;
+	}
+
+	try {
+		const raw = interpolator({
+			...props,
+			progress,
+			next,
+			bounds,
+		});
+
+		const rawStyleMap: TransitionInterpolatedStyle | undefined =
+			typeof raw === "object" && raw != null ? raw : undefined;
+
+		return {
+			rawStyleMap,
+			stylesMap: normalizeRawStyleMap(rawStyleMap, shouldDeferStyleBuckets),
+		};
+	} catch (_) {
+		if (__DEV__) {
+			logger.warn("screenStyleInterpolator must be a worklet");
+		}
+
+		return undefined;
+	}
+};
+
+const appendLayer = (
+	layers: LocalStyleLayers,
+	result: InterpolatorResult | undefined,
+) => {
+	"worklet";
+
+	if (result) {
+		layers.push(result.stylesMap);
+	}
+};
+
 /**
- * Builds the raw interpolated styles map for the current screen pass.
+ * Builds the raw interpolated style layers for the current screen pass.
  *
  * This hook exists to stabilize style ownership during rapid navigation,
  * especially when an interactive close gesture overlaps with a new navigation
@@ -39,9 +124,9 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
  * hidden window so animated props and runtime options stay warm, but defer style
  * buckets so measurement sees the final untransformed layout.
  *
- * The result stays as a single slot map. Resolution happens downstream, where
- * slot ids determine whether a slot may inherit from ancestors or must remain
- * local to the owning screen container.
+ * The result is ordered from lowest to highest priority. Resolution happens
+ * downstream, where slot ids determine whether slots inherit from ancestors and
+ * where higher owner layers override lower owner layers per key.
  */
 export const useInterpolatedStylesMap = () => {
 	const { currentScreenKey } = useDescriptorDerivations();
@@ -61,7 +146,7 @@ export const useInterpolatedStylesMap = () => {
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
 
-	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
+	return useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
 		screenInterpolatorPropsRevision.get();
 		const props = screenInterpolatorProps.get();
@@ -99,16 +184,6 @@ export const useInterpolatedStylesMap = () => {
 
 		const interpolatorOptionsOwner =
 			isInGestureMode || !nextInterpolator ? "current" : "next";
-		const interpolator =
-			interpolatorOptionsOwner === "current"
-				? currentInterpolator
-				: nextInterpolator;
-
-		if (!interpolator) {
-			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
-			syncScreenOptionsOverrides(undefined, screenOptions);
-			return NO_STYLES;
-		}
 
 		let effectiveProgress = progress;
 		let effectiveNext = next;
@@ -118,42 +193,55 @@ export const useInterpolatedStylesMap = () => {
 			effectiveNext = undefined;
 		}
 
-		try {
-			const raw = interpolator({
-				...props,
-				progress: effectiveProgress,
-				next: effectiveNext,
-				bounds: boundsAccessor,
-			});
-
-			const rawStyleMap: TransitionInterpolatedStyle | undefined =
-				typeof raw === "object" && raw != null ? raw : undefined;
+		const currentResult = runInterpolator({
+			interpolator: currentInterpolator,
+			props,
+			progress: effectiveProgress,
+			next: effectiveNext,
+			bounds: boundsAccessor,
+			shouldDeferStyleBuckets,
+		});
 
+		if (interpolatorOptionsOwner === "current") {
 			syncSelectedInterpolatorOptions(
 				selectedInterpolatorOptions,
-				interpolatorOptionsOwner,
-				rawStyleMap?.options,
-			);
-			syncScreenOptionsOverrides(
-				interpolatorOptionsOwner === "current" ? rawStyleMap : undefined,
-				screenOptions,
+				"current",
+				currentResult?.rawStyleMap?.options,
 			);
+			syncScreenOptionsOverrides(currentResult?.rawStyleMap, screenOptions);
 
-			const stylesMap = !rawStyleMap
-				? NO_STYLES
-				: normalizeSlots(stripInterpolatorOptions(rawStyleMap));
-
-			return shouldDeferStyleBuckets
-				? preserveAnimatedPropsOnly(stylesMap)
-				: stylesMap;
-		} catch (_) {
-			if (__DEV__) {
-				logger.warn("screenStyleInterpolator must be a worklet");
+			if (!currentResult) {
+				return NO_STYLE_LAYERS;
 			}
 
-			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
-			syncScreenOptionsOverrides(undefined, screenOptions);
-			return NO_STYLES;
+			return [currentResult.stylesMap];
 		}
+
+		const nextResult = runInterpolator({
+			interpolator: nextInterpolator,
+			props,
+			progress: effectiveProgress,
+			next: effectiveNext,
+			bounds: boundsAccessor,
+			shouldDeferStyleBuckets,
+		});
+
+		syncSelectedInterpolatorOptions(
+			selectedInterpolatorOptions,
+			"next",
+			nextResult?.rawStyleMap?.options,
+		);
+		syncScreenOptionsOverrides(undefined, screenOptions);
+
+		const layers: LocalStyleLayers = [];
+
+		appendLayer(layers, currentResult);
+		appendLayer(layers, nextResult);
+
+		if (layers.length === 0) {
+			return NO_STYLE_LAYERS;
+		}
+
+		return layers;
 	});
 };

package/src/shared/providers/screen/styles/hooks/use-resolved-slot-style-map.tsx

@@ -7,18 +7,19 @@ import { NO_STYLES } from "../../../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
 import { useScreenAnimationContext } from "../../animation";
 import {
+	type LocalStyleLayers,
 	type ResettableStyleStatesBySlot,
 	resolveSlotStyles,
 	reuseEqualResolvedSlots,
 } from "../helpers/resolve-slot-styles";
 
 interface UseResolvedStylesMapParams {
-	currentStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	localStylesMaps: SharedValue<LocalStyleLayers>;
 	ancestorStylesMap?: SharedValue<NormalizedTransitionInterpolatedStyle>;
 }
 
 export const useResolvedStylesMap = ({
-	currentStylesMap,
+	localStylesMaps,
 	ancestorStylesMap,
 }: UseResolvedStylesMapParams) => {
 	const { screenInterpolatorProps, screenInterpolatorPropsRevision } =
@@ -34,13 +35,14 @@ export const useResolvedStylesMap = ({
 		screenInterpolatorPropsRevision.get();
 
 		const props = screenInterpolatorProps.get();
-		// Keep missing local slots alive while another route drives this screen.
-		// Custom ids and keys from slots that still exist are still reset.
+		// Keep missing local slots alive only when another route drives this screen
+		// and no active local style layer is available. Once a current/next layer
+		// runs, omitted local slots and dropped keys are intentional reset signals.
 		const deferLocalSlotResets = !props.focused && !props.current.closing;
 
 		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
 			resolveSlotStyles({
-				currentStylesMap: currentStylesMap.get(),
+				localStylesMaps: localStylesMaps.get(),
 				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
 				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
 				deferLocalSlotResets,

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

@@ -26,10 +26,10 @@ export const {
 })<Props, ScreenStylesContextValue>(({ children, isFloatingOverlay }) => {
 	const parentContext = useContext(ScreenStylesContext);
 
-	const rawStylesMap = useInterpolatedStylesMap();
+	const rawStylesMaps = useInterpolatedStylesMap();
 
 	const stylesMap = useResolvedStylesMap({
-		currentStylesMap: rawStylesMap,
+		localStylesMaps: rawStylesMaps,
 		ancestorStylesMap: parentContext?.stylesMap,
 	});
 

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

@@ -216,6 +216,20 @@ const isCompletedLink = (link: TagLink | null): link is TagLink => {
 	return !!link?.destination;
 };
 
+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,
@@ -226,12 +240,22 @@ function getResolvedLink(
 	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;
+
 	// Group active ids can update before the new member has a full source/destination
 	// link, so unresolved grouped links fall back to the initial id's measurements.
-	if (!group || isCompletedLink(requestedLink)) {
+	if (!group || isCompletedLink(link)) {
 		return {
 			tag,
-			link: requestedLink,
+			link,
 		};
 	}
 
@@ -248,7 +272,7 @@ function getResolvedLink(
 
 	return {
 		tag,
-		link: requestedLink,
+		link,
 	};
 }
 

package/src/shared/types/bounds.types.ts

@@ -78,6 +78,33 @@ export type BoundsNavigationZoomOptions = {
 	 * animates above it.
 	 */
 	backgroundScale?: number;
+	/**
+	 * Maximum dynamic gesture sensitivity applied by zoom.
+	 *
+	 * Zoom lowers gesture sensitivity as the drag gets deeper so the content
+	 * handoff stays stable. This value controls the starting/highest sensitivity
+	 * in that curve.
+	 *
+	 * @default 0.8
+	 */
+	maxSensitivity?: number;
+	/**
+	 * Velocity-driven depth applied to the dismiss scale handoff.
+	 *
+	 * Higher values make fast releases orbit farther around the final scale. Set
+	 * to `0` to remove the velocity depth effect.
+	 *
+	 * @default 0.5
+	 */
+	velocityDepth?: number;
+	/**
+	 * Whether gesture displacement should drive transition progress or remain as
+	 * freeform gesture values. Zoom defaults to `"freeform"` so drag can move the
+	 * content without owning the whole screen progress.
+	 *
+	 * @default "freeform"
+	 */
+	gestureProgressMode?: GestureProgressMode;
 	/**
 	 * Horizontal gesture drag scaling curve, applied when the active dismiss
 	 * direction is horizontal.

package/src/shared/utils/bounds/navigation/zoom/build.ts

@@ -1,7 +1,6 @@
 import { interpolate } from "react-native-reanimated";
 import {
 	EPSILON,
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	VISIBLE_STYLE,
 } from "../../../../constants";
@@ -18,6 +17,10 @@ import {
 	resolveDirectionalDragScale,
 	resolveOpacityRangeTuple,
 } from "../math";
+import {
+	resolveDismissScaleHandoff,
+	resolveRevealGestureHandoff,
+} from "../reveal/math";
 import {
 	ZOOM_DISMISS_SCALE_ORBIT_DEPTH,
 	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
@@ -39,71 +42,30 @@ import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
 
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 
-function resolveZoomGestureHandoff(rawDrag: number) {
-	"worklet";
-
-	const gestureSensitivity = interpolate(rawDrag, [0, 1], [0.7, 0.1], "clamp");
-	const releaseBoost = interpolate(rawDrag, [0, 1], [1, 1.4], "clamp");
-	const releaseSensitivity = interpolate(
-		gestureSensitivity,
-		[0.28, 0.9],
-		[0.7, 1],
-		"clamp",
-	);
-
-	return {
-		gestureSensitivity,
-		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
-	};
-}
-
 function resolveZoomGestureOptions({
 	rawDrag,
-	activeOptions,
+	maxSensitivity,
+	gestureProgressMode,
 }: {
 	rawDrag: number;
-	activeOptions: ScreenTransitionOptions;
+	maxSensitivity: number;
+	gestureProgressMode: ScreenTransitionOptions["gestureProgressMode"];
 }) {
 	"worklet";
 
 	const { gestureSensitivity, gestureReleaseVelocityScale } =
-		resolveZoomGestureHandoff(rawDrag);
+		resolveRevealGestureHandoff({
+			rawDrag,
+			maxSensitivity,
+		});
 
 	return {
-		gestureProgressMode: activeOptions.gestureProgressMode ?? "freeform",
-		gestureSensitivity: activeOptions.gestureSensitivity ?? gestureSensitivity,
-		gestureReleaseVelocityScale:
-			activeOptions.gestureReleaseVelocityScale ?? gestureReleaseVelocityScale,
+		gestureProgressMode,
+		gestureSensitivity,
+		gestureReleaseVelocityScale,
 	};
 }
 
-function resolveZoomDismissScaleHandoff({
-	progress,
-	releaseScale,
-	targetScale,
-	rawDrag,
-}: {
-	progress: number;
-	releaseScale: number;
-	targetScale: number;
-	rawDrag: number;
-}) {
-	"worklet";
-
-	const closeProgress = 1 - progress;
-	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
-	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
-	const orbitDepth = interpolate(
-		rawDrag,
-		[0, 1],
-		[0, ZOOM_DISMISS_SCALE_ORBIT_DEPTH],
-		"clamp",
-	);
-	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
-
-	return baseScale * orbitScale;
-}
-
 /* -------------------------------------------------------------------------- */
 /*                             BUILD ZOOM STYLES                              */
 /* -------------------------------------------------------------------------- */
@@ -168,9 +130,11 @@ export function buildZoomStyles({
 			style: VISIBLE_STYLE,
 		},
 	} satisfies TransitionInterpolatedStyle;
-	const focusedContentSlot = props.current.options.navigationMaskEnabled
-		? NAVIGATION_MASK_CONTAINER_STYLE_ID
-		: "content";
+	const navigationMaskEnabled = props.current.options.navigationMaskEnabled;
+	const maxSensitivity = zoomOptions?.maxSensitivity ?? 0.8;
+	const velocityDepth =
+		zoomOptions?.velocityDepth ?? ZOOM_DISMISS_SCALE_ORBIT_DEPTH;
+	const gestureProgressMode = zoomOptions?.gestureProgressMode ?? "freeform";
 
 	/* --------------------------- Gesture / Drag Values ------------------------- */
 
@@ -238,16 +202,18 @@ export function buildZoomStyles({
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 	const dragScale = combineScales(dragXScale, dragYScale);
 	const handoffDragScale = props.active.gesture.dismissing
-		? resolveZoomDismissScaleHandoff({
+		? resolveDismissScaleHandoff({
 				progress: props.active.progress,
 				releaseScale: dragScale,
 				targetScale: 1,
-				rawDrag,
+				velocity: props.active.gesture.velocity,
+				velocityDepth,
 			})
 		: dragScale;
 	const zoomGestureOptions = resolveZoomGestureOptions({
 		rawDrag,
-		activeOptions: props.active.options,
+		maxSensitivity,
+		gestureProgressMode,
 	});
 
 	/* ----------------------------- Focused Screen ----------------------------- */
@@ -301,11 +267,32 @@ export function buildZoomStyles({
 		const maskWidth = Math.max(1, toNumber(maskRaw.width) + left + right);
 		const maskHeight = Math.max(1, toNumber(maskRaw.height) + top + bottom);
 
-		const contentTranslateX = toNumber(contentRaw.translateX) + dragX;
-		const contentTranslateY = toNumber(contentRaw.translateY) + dragY;
-		const contentScale = contentRaw.scale * handoffDragScale;
-		const maskTranslateX = maskRaw.translateX + dragX - left;
-		const maskTranslateY = maskRaw.translateY + dragY - top;
+		const contentBaseTranslateX = toNumber(contentRaw.translateX);
+		const contentBaseTranslateY = toNumber(contentRaw.translateY);
+		const contentBaseScale = toNumber(contentRaw.scale, 1);
+		const safeContentBaseScale =
+			Math.abs(contentBaseScale) > EPSILON ? contentBaseScale : 1;
+		const contentTranslateX = contentBaseTranslateX + dragX;
+		const contentTranslateY = contentBaseTranslateY + dragY;
+		const contentScale = contentBaseScale * handoffDragScale;
+
+		const maskBaseTranslateX = toNumber(maskRaw.translateX) - left;
+		const maskBaseTranslateY = toNumber(maskRaw.translateY) - top;
+		const maskCenterX = maskWidth / 2;
+		const maskCenterY = maskHeight / 2;
+		const contentCenterX = screenLayout.width / 2;
+		const contentCenterY = screenLayout.height / 2;
+		const compensatedMaskTranslateX =
+			(maskBaseTranslateX -
+				contentBaseTranslateX +
+				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+			safeContentBaseScale;
+		const compensatedMaskTranslateY =
+			(maskBaseTranslateY -
+				contentBaseTranslateY +
+				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+			safeContentBaseScale;
+		const compensatedMaskScale = 1 / safeContentBaseScale;
 
 		const focusedContentStyle = {
 			opacity: zoomOptions?.debug ? 0.5 : focusedFade,
@@ -314,27 +301,31 @@ export function buildZoomStyles({
 				{ translateY: contentTranslateY },
 				{ scale: contentScale },
 			],
-			borderRadius: focusedMaskBorderRadius,
-			overflow: "hidden" as const,
+			...(navigationMaskEnabled
+				? {}
+				: {
+						borderRadius: focusedMaskBorderRadius,
+						overflow: "hidden" as const,
+					}),
 		};
 
 		const focusedStyles: ZoomInterpolatedStyle = {
-			[focusedContentSlot]: {
+			content: {
 				style: focusedContentStyle,
 			},
 			...sourceVisibilityStyle,
 		};
 
-		if (props.current.options.navigationMaskEnabled) {
+		if (navigationMaskEnabled) {
 			focusedStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] = {
 				style: {
 					width: maskWidth,
 					height: maskHeight,
 					borderRadius: focusedMaskBorderRadius,
 					transform: [
-						{ translateX: maskTranslateX },
-						{ translateY: maskTranslateY },
-						{ scale: handoffDragScale },
+						{ translateX: compensatedMaskTranslateX },
+						{ translateY: compensatedMaskTranslateY },
+						{ scale: compensatedMaskScale },
 					],
 				},
 			};
@@ -416,6 +407,10 @@ export function buildZoomStyles({
 		Math.abs(unfocusedContentScale),
 		EPSILON,
 	);
+	// A naturally settled close can leave this as the last emitted style frame,
+	// so drop temporary stacking here instead of waiting for a later reset pass.
+	const shouldElevateUnfocusedElement =
+		!props.active.closing || !props.active.logicallySettled;
 
 	const scaleShiftX = computeCenterScaleShift({
 		center: elementCenterX,
@@ -480,8 +475,8 @@ export function buildZoomStyles({
 					},
 				],
 				opacity: zoomOptions?.debug ? 1 : unfocusedFade,
-				zIndex: 9999,
-				elevation: 9999,
+				zIndex: shouldElevateUnfocusedElement ? 9999 : 0,
+				elevation: shouldElevateUnfocusedElement ? 9999 : 0,
 			};
 
 	return {

package/src/shared/utils/bounds/navigation/zoom/config.ts

@@ -9,7 +9,7 @@ export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
 export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
-export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.8;
+export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const ZOOM_BACKGROUND_SCALE = 0.9375;
 export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.5, 0, 1] as const;
 export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [0.6, 1, 0, 1] as const;