react-native-screen-transitions 3.4.0-alpha.6 → 3.4.0-beta.0

package/src/shared/providers/screen/styles/helpers/build-resolved-style-map.ts

@@ -0,0 +1,185 @@
+import { NO_STYLES } from "../../../../constants";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+
+export type StyleKeySet = Record<string, true>;
+
+type StyleKeyMeta = {
+	keys: StyleKeySet;
+	hasAny: boolean;
+};
+
+const IDENTITY_TRANSFORM = [
+	{ translateX: 0 },
+	{ translateY: 0 },
+	{ scaleX: 1 },
+	{ scaleY: 1 },
+] as const;
+
+const ALWAYS_RESET_STYLE_VALUES = {
+	zIndex: 0,
+	elevation: 0,
+} as const;
+
+const hasAnyKeys = (record: Record<string, unknown>) => {
+	"worklet";
+	for (const _key in record) {
+		return true;
+	}
+	return false;
+};
+
+const collectStyleKeyMeta = (
+	record?: Record<string, unknown>,
+): StyleKeyMeta => {
+	"worklet";
+	const keys: StyleKeySet = {};
+	let hasAny = false;
+
+	if (!record) {
+		return { keys, hasAny };
+	}
+
+	for (const key in record) {
+		keys[key] = true;
+		hasAny = true;
+	}
+
+	return { keys, hasAny };
+};
+
+const collectRelevantSlotIds = ({
+	currentStylesMap,
+	fallbackStylesMap,
+	previousStyleKeysBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	fallbackStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleKeysBySlot: Record<string, StyleKeySet>;
+}) => {
+	"worklet";
+	const slotIds: Record<string, true> = {};
+
+	for (const slotId in currentStylesMap) {
+		slotIds[slotId] = true;
+	}
+
+	for (const slotId in fallbackStylesMap) {
+		slotIds[slotId] = true;
+	}
+
+	for (const slotId in previousStyleKeysBySlot) {
+		slotIds[slotId] = true;
+	}
+
+	return slotIds;
+};
+
+const buildUnsetPatch = ({
+	previousKeys,
+	currentKeys,
+}: {
+	previousKeys: StyleKeySet;
+	currentKeys: StyleKeySet;
+}) => {
+	"worklet";
+	const unsetPatch: Record<string, any> = {};
+
+	for (const key in previousKeys) {
+		if (currentKeys[key]) continue;
+
+		if (key === "transform") {
+			unsetPatch.transform = IDENTITY_TRANSFORM;
+			continue;
+		}
+
+		if (key in ALWAYS_RESET_STYLE_VALUES) {
+			unsetPatch[key] =
+				ALWAYS_RESET_STYLE_VALUES[
+					key as keyof typeof ALWAYS_RESET_STYLE_VALUES
+				];
+			continue;
+		}
+
+		unsetPatch[key] = undefined;
+	}
+
+	return unsetPatch;
+};
+
+export const buildResolvedStyleMap = ({
+	currentStylesMap,
+	fallbackStylesMap,
+	previousStyleKeysBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	fallbackStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleKeysBySlot: Record<string, StyleKeySet>;
+}): {
+	resolvedStylesMap: NormalizedTransitionInterpolatedStyle;
+	nextPreviousStyleKeysBySlot: Record<string, StyleKeySet>;
+} => {
+	"worklet";
+	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const nextPreviousStyleKeysBySlot: Record<string, StyleKeySet> = {};
+
+	const slotIds = collectRelevantSlotIds({
+		currentStylesMap,
+		fallbackStylesMap,
+		previousStyleKeysBySlot,
+	});
+
+	for (const slotId in slotIds) {
+		const slot = currentStylesMap[slotId] ?? fallbackStylesMap[slotId];
+		const baseStyle = slot?.style as Record<string, unknown> | undefined;
+		const { keys: currentKeys, hasAny: hasCurrentStyleKeys } =
+			collectStyleKeyMeta(baseStyle);
+
+		const unsetPatch = buildUnsetPatch({
+			previousKeys: previousStyleKeysBySlot[slotId] ?? {},
+			currentKeys,
+		});
+
+		const hasUnsetPatch = hasAnyKeys(unsetPatch);
+		const hasProps = slot?.props !== undefined;
+
+		if (!slot && !hasUnsetPatch) {
+			continue;
+		}
+
+		const resolvedStyle =
+			hasCurrentStyleKeys || hasUnsetPatch
+				? {
+						...unsetPatch,
+						...(slot?.style ?? NO_STYLES),
+					}
+				: undefined;
+
+		if (resolvedStyle === undefined && !hasProps) {
+			continue;
+		}
+
+		const resolvedSlot = {} as NormalizedTransitionSlotStyle;
+
+		if (resolvedStyle !== undefined) {
+			resolvedSlot.style = resolvedStyle;
+		}
+
+		if (hasProps) {
+			resolvedSlot.props = slot?.props;
+		}
+
+		resolvedStylesMap[slotId] = resolvedSlot;
+
+		if (hasCurrentStyleKeys) {
+			nextPreviousStyleKeysBySlot[slotId] = currentKeys;
+		}
+	}
+
+	return {
+		resolvedStylesMap,
+		nextPreviousStyleKeysBySlot,
+	};
+};

package/src/shared/providers/screen/styles/helpers/resolve-interpolated-style-output.ts

@@ -0,0 +1,31 @@
+import { NO_STYLES } from "../../../../constants";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	TransitionInterpolatedStyle,
+} from "../../../../types/animation.types";
+import { normalizeInterpolatedStyle } from "../../../../utils/normalize-interpolated-style";
+
+export type ResolvedInterpolatedStyleOutput = {
+	stylesMap: NormalizedTransitionInterpolatedStyle;
+	wasLegacy: boolean;
+};
+
+export const resolveInterpolatedStyleOutput = (
+	raw: TransitionInterpolatedStyle | null | undefined,
+): ResolvedInterpolatedStyleOutput => {
+	"worklet";
+
+	if (raw == null || typeof raw !== "object") {
+		return {
+			stylesMap: NO_STYLES,
+			wasLegacy: false,
+		};
+	}
+
+	const { result, wasLegacy } = normalizeInterpolatedStyle(raw);
+
+	return {
+		stylesMap: result,
+		wasLegacy,
+	};
+};

package/src/shared/providers/screen/styles/helpers/split-normalized-style-maps.ts

@@ -0,0 +1,44 @@
+import {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+
+const LAYER_STYLE_SLOT_IDS = {
+	content: true,
+	backdrop: true,
+	surface: true,
+	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
+	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
+} as const;
+
+const isLayerStyleSlotId = (slotId: string) => {
+	"worklet";
+	// biome-ignore lint/suspicious/noPrototypeBuiltins: <Typescript lib target is ES2020>
+	return Object.prototype.hasOwnProperty.call(LAYER_STYLE_SLOT_IDS, slotId);
+};
+
+export const splitNormalizedStyleMaps = (
+	stylesMap: NormalizedTransitionInterpolatedStyle,
+): {
+	layerStylesMap: NormalizedTransitionInterpolatedStyle;
+	elementStylesMap: NormalizedTransitionInterpolatedStyle;
+} => {
+	"worklet";
+	const layerStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const elementStylesMap: NormalizedTransitionInterpolatedStyle = {};
+
+	for (const slotId in stylesMap) {
+		if (isLayerStyleSlotId(slotId)) {
+			layerStylesMap[slotId] = stylesMap[slotId];
+			continue;
+		}
+
+		elementStylesMap[slotId] = stylesMap[slotId];
+	}
+
+	return {
+		layerStylesMap,
+		elementStylesMap,
+	};
+};

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

@@ -0,0 +1,5 @@
+export {
+	ScreenStylesContext,
+	ScreenStylesProvider,
+	useScreenStyles,
+} from "./styles.provider";

package/src/shared/providers/screen/{styles.provider.tsx → styles/styles.provider.tsx}

@@ -4,26 +4,25 @@ import {
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
-import { NO_STYLES } from "../../constants";
-import type { NormalizedTransitionInterpolatedStyle } from "../../types/animation.types";
-import createProvider from "../../utils/create-provider";
-import { logger } from "../../utils/logger";
-import { useScreenAnimationContext } from "./animation";
+import { NO_STYLES } from "../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
+import createProvider from "../../../utils/create-provider";
+import { logger } from "../../../utils/logger";
+import { useScreenAnimationContext } from "../animation";
 import {
-	PASS_THROUGH_STYLE_OUTPUT,
-	resolveEffectiveResolutionMode,
-	resolveInterpolatedStyleOutput,
-	type ScreenStyleResolutionMode,
-} from "./helpers/resolve-interpolated-style-output";
+	buildResolvedStyleMap,
+	type StyleKeySet,
+} from "./helpers/build-resolved-style-map";
+import { resolveInterpolatedStyleOutput } from "./helpers/resolve-interpolated-style-output";
+import { splitNormalizedStyleMaps } from "./helpers/split-normalized-style-maps";
 
 type Props = {
 	children: ReactNode;
 };
 
 type ScreenStylesContextValue = {
-	stylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-	ancestorStylesMaps: SharedValue<NormalizedTransitionInterpolatedStyle>[];
-	resolutionMode: SharedValue<ScreenStyleResolutionMode>;
+	layerStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	elementStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
 export const {
@@ -34,7 +33,7 @@ export const {
 	guarded: true,
 })<Props, ScreenStylesContextValue>(
 	({ children }): { value: ScreenStylesContextValue; children: ReactNode } => {
-		const parentCtx = useContext(ScreenStylesContext);
+		const parentContext = useContext(ScreenStylesContext);
 
 		const {
 			screenInterpolatorProps,
@@ -43,16 +42,15 @@ export const {
 			boundsAccessor,
 		} = useScreenAnimationContext();
 
-		/**
-		 * Tracks when user starts a gesture while another screen is still closing.
-		 * This persists until both the gesture ends AND the closing animation completes.
-		 */
 		const isGesturingDuringCloseAnimation = useSharedValue(false);
 		const hasWarnedLegacy = useSharedValue(false);
+		const previousElementStyleKeysBySlot = useSharedValue<
+			Record<string, StyleKeySet>
+		>({});
 
-		const styleResolution = useDerivedValue<{
-			stylesMap: NormalizedTransitionInterpolatedStyle;
-			resolutionMode: ScreenStyleResolutionMode;
+		const rawStyleResolution = useDerivedValue<{
+			layerStylesMap: NormalizedTransitionInterpolatedStyle;
+			elementStylesMap: NormalizedTransitionInterpolatedStyle;
 		}>(() => {
 			"worklet";
 			const props = screenInterpolatorProps.value;
@@ -71,21 +69,17 @@ export const {
 			const isInGestureMode =
 				isDragging || isGesturingDuringCloseAnimation.value;
 
-			// Select interpolator
-			//  - If in gesture mode, use current screen's interpolator since we're driving
-			//    the animation from this screen (dragging back to dismiss next).
 			const interpolator = isInGestureMode
 				? currentInterpolator
 				: (nextInterpolator ?? currentInterpolator);
 
 			if (!interpolator) {
-				return PASS_THROUGH_STYLE_OUTPUT;
+				return {
+					layerStylesMap: NO_STYLES,
+					elementStylesMap: NO_STYLES,
+				};
 			}
 
-			// Build effective props with corrected progress
-			//  - Gesture mode: use current.progress only (avoids jumps during drag)
-			//  - Normal: use derived progress as-is
-
 			let effectiveProgress = progress;
 			let effectiveNext = next;
 
@@ -102,8 +96,10 @@ export const {
 					bounds: boundsAccessor,
 				});
 
-				const { stylesMap, resolutionMode, wasLegacy } =
-					resolveInterpolatedStyleOutput(raw);
+				const { stylesMap, wasLegacy } = resolveInterpolatedStyleOutput(raw);
+
+				const { layerStylesMap, elementStylesMap } =
+					splitNormalizedStyleMaps(stylesMap);
 
 				if (__DEV__ && wasLegacy && !hasWarnedLegacy.value) {
 					hasWarnedLegacy.value = true;
@@ -114,11 +110,8 @@ export const {
 				}
 
 				return {
-					stylesMap,
-					resolutionMode: resolveEffectiveResolutionMode({
-						resolutionMode,
-						isSettled: current.settled === 1,
-					}),
+					layerStylesMap,
+					elementStylesMap,
 				};
 			} catch (err) {
 				if (__DEV__) {
@@ -127,37 +120,42 @@ export const {
 						err,
 					);
 				}
+
 				return {
-					stylesMap: NO_STYLES as NormalizedTransitionInterpolatedStyle,
-					resolutionMode: "live" as const,
+					layerStylesMap: NO_STYLES,
+					elementStylesMap: NO_STYLES,
 				};
 			}
 		});
 
-		const stylesMap = useDerivedValue<NormalizedTransitionInterpolatedStyle>(
-			() => {
+		const layerStylesMap =
+			useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
 				"worklet";
-				return styleResolution.value.stylesMap;
-			},
-		);
+				return rawStyleResolution.value.layerStylesMap;
+			});
 
-		const resolutionMode = useDerivedValue<ScreenStyleResolutionMode>(() => {
-			"worklet";
-			return styleResolution.value.resolutionMode;
-		});
+		const elementStylesMap =
+			useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
+				"worklet";
+				const { resolvedStylesMap, nextPreviousStyleKeysBySlot } =
+					buildResolvedStyleMap({
+						currentStylesMap: rawStyleResolution.value.elementStylesMap,
+						fallbackStylesMap:
+							parentContext?.elementStylesMap.value ?? NO_STYLES,
+						previousStyleKeysBySlot: previousElementStyleKeysBySlot.value,
+					});
 
-		const value = useMemo<ScreenStylesContextValue>(() => {
-			// Build ancestor chain: [parent, grandparent, great-grandparent, ...]
-			const ancestorStylesMaps = parentCtx
-				? [parentCtx.stylesMap, ...parentCtx.ancestorStylesMaps]
-				: [];
+				previousElementStyleKeysBySlot.value = nextPreviousStyleKeysBySlot;
 
+				return resolvedStylesMap;
+			});
+
+		const value = useMemo<ScreenStylesContextValue>(() => {
 			return {
-				stylesMap,
-				ancestorStylesMaps,
-				resolutionMode,
+				layerStylesMap,
+				elementStylesMap,
 			};
-		}, [resolutionMode, stylesMap, parentCtx]);
+		}, [elementStylesMap, layerStylesMap]);
 
 		return { value, children };
 	},

package/src/shared/stores/animation.store.ts

@@ -7,31 +7,40 @@ import { createStore } from "../utils/create-store";
 
 export type AnimationStoreMap = {
 	progress: SharedValue<number>;
+	willAnimate: SharedValue<number>;
 	animating: SharedValue<number>;
 	closing: SharedValue<number>;
 	entering: SharedValue<number>;
+	settled: SharedValue<number>;
+	logicallySettled: SharedValue<number>;
 };
 
 function createAnimationBag(): AnimationStoreMap {
 	return {
 		progress: makeMutable(0),
+		willAnimate: makeMutable(0),
 		closing: makeMutable(0),
 		animating: makeMutable(0),
 		entering: makeMutable(0),
+		settled: makeMutable(1),
+		logicallySettled: makeMutable(1),
 	};
 }
 
 /**
  * Route-keyed screen transition state for the public animation lifecycle. These
- * shared values track the current progress and whether a screen is entering,
- * closing, or actively animating.
+ * shared values track the current progress, whether a transition is about to
+ * begin, and whether a screen is entering, closing, or actively animating.
  */
 export const AnimationStore = createStore<AnimationStoreMap>({
 	createBag: createAnimationBag,
 	disposeBag: (bag) => {
 		cancelAnimation(bag.progress);
+		cancelAnimation(bag.willAnimate);
 		cancelAnimation(bag.animating);
 		cancelAnimation(bag.closing);
 		cancelAnimation(bag.entering);
+		cancelAnimation(bag.settled);
+		cancelAnimation(bag.logicallySettled);
 	},
 });

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

@@ -204,6 +204,22 @@ const findLatestPendingIndex = (
 	return -1;
 };
 
+const findLatestSourceIndex = (
+	stack: TagLink[],
+	expectedSourceScreenKey?: ScreenKey,
+): number => {
+	"worklet";
+	if (!expectedSourceScreenKey) return -1;
+
+	for (let i = stack.length - 1; i >= 0; i--) {
+		if (matchesScreenKey(stack[i].source, expectedSourceScreenKey)) {
+			return i;
+		}
+	}
+
+	return -1;
+};
+
 function setLinkDestination(
 	tag: TagID,
 	screenKey: ScreenKey,
@@ -221,12 +237,13 @@ function setLinkDestination(
 		const stack = tagState?.linkStack;
 		if (!stack || stack.length === 0) return state;
 
-		const targetIndex = findLatestPendingIndex(stack, expectedSourceScreenKey);
+		let targetIndex = findLatestPendingIndex(stack, expectedSourceScreenKey);
+		if (targetIndex === -1) {
+			targetIndex = findLatestSourceIndex(stack, expectedSourceScreenKey);
+		}
 		if (targetIndex === -1) return state;
 
 		const targetLink = stack[targetIndex];
-		if (targetLink.destination !== null) return state;
-
 		targetLink.destination = {
 			screenKey,
 			ancestorKeys,
@@ -272,6 +289,10 @@ function updateLinkDestination(
 			targetIndex = findLatestPendingIndex(stack, expectedSourceScreenKey);
 		}
 
+		if (targetIndex === -1) {
+			targetIndex = findLatestSourceIndex(stack, expectedSourceScreenKey);
+		}
+
 		if (targetIndex === -1) {
 			return state;
 		}

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

@@ -1,4 +1,3 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import { matchesScreenKey } from "../helpers/matching";
 import type {
 	ResolvedTransitionPair,
@@ -8,7 +7,6 @@ import type {
 	TagLink,
 	TagState,
 } from "../types";
-import { getSnapshot } from "./registry";
 import { debugResolverLog, registry } from "./state";
 
 const findLatestLink = (
@@ -67,30 +65,6 @@ function findPendingLinkBySource(
 	);
 }
 
-function getSnapshotBoundsByPriority(
-	tag: TagID,
-	keys: (ScreenKey | undefined)[],
-): {
-	bounds: MeasuredDimensions;
-	styles: StyleProps;
-	screenKey: ScreenKey;
-} | null {
-	"worklet";
-	for (let i = 0; i < keys.length; i++) {
-		const key = keys[i];
-		if (!key) continue;
-		const snapshot = getSnapshot(tag, key);
-		if (!snapshot) continue;
-		return {
-			bounds: snapshot.bounds,
-			styles: snapshot.styles,
-			screenKey: key,
-		};
-	}
-
-	return null;
-}
-
 function resolveTransitionPair(
 	tag: TagID,
 	context: ResolveTransitionContext,
@@ -153,53 +127,12 @@ function resolveTransitionPair(
 		}
 	}
 
-	let sourceBounds = matchedLink?.source?.bounds ?? null;
-	let destinationBounds = matchedLink?.destination?.bounds ?? null;
-	let sourceStyles = matchedLink?.source?.styles ?? null;
-	let destinationStyles = matchedLink?.destination?.styles ?? null;
-	let sourceScreenKey = matchedLink?.source?.screenKey ?? null;
-	let destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
-	let usedSnapshotSource = false;
-	let usedSnapshotDestination = false;
-
-	const sourceFallbackKeys = context.entering
-		? [
-				context.previousScreenKey,
-				context.currentScreenKey,
-				context.nextScreenKey,
-			]
-		: [
-				context.currentScreenKey,
-				context.previousScreenKey,
-				context.nextScreenKey,
-			];
-
-	const destinationFallbackKeys = context.entering
-		? [context.currentScreenKey, context.nextScreenKey]
-		: [context.nextScreenKey, context.currentScreenKey];
-
-	if (!sourceBounds) {
-		const sourceSnapshot = getSnapshotBoundsByPriority(tag, sourceFallbackKeys);
-		if (sourceSnapshot) {
-			sourceBounds = sourceSnapshot.bounds;
-			sourceStyles = sourceSnapshot.styles;
-			sourceScreenKey = sourceSnapshot.screenKey;
-			usedSnapshotSource = true;
-		}
-	}
-
-	if (!destinationBounds) {
-		const destinationSnapshot = getSnapshotBoundsByPriority(
-			tag,
-			destinationFallbackKeys,
-		);
-		if (destinationSnapshot) {
-			destinationBounds = destinationSnapshot.bounds;
-			destinationStyles = destinationSnapshot.styles;
-			destinationScreenKey = destinationSnapshot.screenKey;
-			usedSnapshotDestination = true;
-		}
-	}
+	const sourceBounds = matchedLink?.source?.bounds ?? null;
+	const destinationBounds = matchedLink?.destination?.bounds ?? null;
+	const sourceStyles = matchedLink?.source?.styles ?? null;
+	const destinationStyles = matchedLink?.destination?.styles ?? null;
+	const sourceScreenKey = matchedLink?.source?.screenKey ?? null;
+	const destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
 
 	if (!sourceBounds || !destinationBounds) {
 		debugResolverLog(
@@ -217,8 +150,6 @@ function resolveTransitionPair(
 		sourceScreenKey,
 		destinationScreenKey,
 		usedPending,
-		usedSnapshotSource,
-		usedSnapshotDestination,
 	};
 }
 

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

@@ -48,8 +48,6 @@ export type ResolvedTransitionPair = {
 	sourceScreenKey: ScreenKey | null;
 	destinationScreenKey: ScreenKey | null;
 	usedPending: boolean;
-	usedSnapshotSource: boolean;
-	usedSnapshotDestination: boolean;
 };
 
 export type SnapshotEntry = Snapshot & {