react-native-screen-transitions 3.6.0-alpha.4 → 3.6.0-beta.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/utils/bounds/navigation/zoom/build.ts

@@ -416,6 +416,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 +484,8 @@ export function buildZoomStyles({
 					},
 				],
 				opacity: zoomOptions?.debug ? 1 : unfocusedFade,
-				zIndex: 9999,
-				elevation: 9999,
+				zIndex: shouldElevateUnfocusedElement ? 9999 : 0,
+				elevation: shouldElevateUnfocusedElement ? 9999 : 0,
 			};
 
 	return {