react-native-screen-transitions 3.9.0 → 3.11.0

package/src/shared/providers/screen/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -0,0 +1,138 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type { LocalStyleLayers } from "./resolve-slot-styles";
+
+const mergeBuckets = (
+	frozen: Record<string, unknown> | undefined,
+	live: Record<string, unknown> | undefined,
+	composeTransforms: boolean,
+) => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	if (!live) {
+		return frozen;
+	}
+
+	const merged: Record<string, unknown> = { ...frozen };
+
+	for (const key in live) {
+		const liveValue = live[key];
+
+		if (liveValue === undefined || liveValue === null) {
+			continue;
+		}
+
+		const frozenValue = frozen[key];
+
+		if (
+			composeTransforms &&
+			key === "transform" &&
+			Array.isArray(frozenValue) &&
+			Array.isArray(liveValue)
+		) {
+			merged[key] = [...frozenValue, ...liveValue];
+			continue;
+		}
+
+		merged[key] = liveValue;
+	}
+
+	return merged;
+};
+
+const mergeSlots = (
+	frozen: NormalizedTransitionSlotStyle | undefined,
+	live: NormalizedTransitionSlotStyle,
+): NormalizedTransitionSlotStyle => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	const merged: NormalizedTransitionSlotStyle = {};
+	const style = mergeBuckets(
+		frozen.style as Record<string, unknown> | undefined,
+		live.style as Record<string, unknown> | undefined,
+		true,
+	);
+
+	if (style) {
+		merged.style = style;
+	}
+
+	if (frozen.props || live.props) {
+		merged.props = mergeBuckets(frozen.props, live.props, false);
+	}
+
+	const boundsLocalTransform =
+		live.boundsLocalTransform ?? frozen.boundsLocalTransform;
+
+	if (boundsLocalTransform) {
+		merged.boundsLocalTransform = boundsLocalTransform;
+	}
+
+	return merged;
+};
+
+const composeFrozenAndLiveStyles = (
+	frozen: NormalizedTransitionInterpolatedStyle,
+	live: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...frozen };
+
+	for (const slotId in live) {
+		const liveSlot = live[slotId];
+
+		if (liveSlot) {
+			composed[slotId] = mergeSlots(frozen[slotId], liveSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+	frozenCurrentStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	frozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+}): {
+	localStylesMaps: LocalStyleLayers;
+	nextFrozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+			nextFrozenCurrentStylesMap: currentStylesMap ?? frozenCurrentStylesMap,
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: frozenCurrentStylesMap ? [frozenCurrentStylesMap] : [],
+			nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeFrozenAndLiveStyles(frozenCurrentStylesMap, nextStylesMap),
+		],
+		nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+	};
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -2,7 +2,7 @@ import type {
 	NormalizedTransitionInterpolatedStyle,
 	NormalizedTransitionSlotStyle,
 } from "../../../../../types/animation.types";
-import { shouldSlotInherit } from "../../constants";
+import { isReservedStyleSlot, shouldSlotInherit } from "../../constants";
 import { materializeResolvedSlot } from "./materialize-slot";
 import { getResolvedSlotState } from "./slot-state";
 import type {
@@ -72,15 +72,79 @@ const hasResettableDisappearedKeys = (
 	return false;
 };
 
+const mergeStateRecord = <Value>(
+	previous: Record<string, Value> | undefined,
+	current: Record<string, Value> | undefined,
+): Record<string, Value> | undefined => {
+	"worklet";
+
+	if (!previous) {
+		return current;
+	}
+
+	if (!current) {
+		return previous;
+	}
+
+	return {
+		...previous,
+		...current,
+	};
+};
+
+const mergeResettableStyleStates = (
+	previousState: ResettableStyleState | undefined,
+	currentState: ResettableStyleState | undefined,
+): ResettableStyleState | undefined => {
+	"worklet";
+
+	if (!previousState) {
+		return currentState;
+	}
+
+	if (!currentState) {
+		return previousState;
+	}
+
+	return {
+		styleKeys: mergeStateRecord(
+			previousState.styleKeys,
+			currentState.styleKeys,
+		),
+		styleResetValues: mergeStateRecord(
+			previousState.styleResetValues,
+			currentState.styleResetValues,
+		),
+		propKeys: mergeStateRecord(previousState.propKeys, currentState.propKeys),
+		propResetValues: mergeStateRecord(
+			previousState.propResetValues,
+			currentState.propResetValues,
+		),
+	};
+};
+
 const getResolvedSlotOutput = ({
 	slot,
 	previousState,
+	deferMissingKeyResets,
 }: {
 	slot: NormalizedTransitionSlotStyle | undefined;
 	previousState: ResettableStyleState | undefined;
+	deferMissingKeyResets: boolean;
 }) => {
 	"worklet";
 	const state = getResolvedSlotState(slot);
+
+	if (deferMissingKeyResets) {
+		// This used to force a reset when animationProgress reached zero during
+		// close. Zero is still drawable while ownership and native visibility
+		// settle, so it is not a safe cleanup boundary for reserved slots.
+		return {
+			resolvedSlot: getForwardedSlot(slot, state.hasAnyKeys),
+			nextState: mergeResettableStyleStates(previousState, state.nextState),
+		};
+	}
+
 	const hasStyleResetPatch = hasResettableDisappearedKeys(
 		previousState?.styleKeys,
 		previousState?.styleResetValues,
@@ -401,6 +465,7 @@ const appendResolvedSlot = (
 	const { resolvedSlot, nextState } = getResolvedSlotOutput({
 		slot: getSlotForId(context, slotId),
 		previousState: context.previousStyleStatesBySlot[slotId],
+		deferMissingKeyResets: isReservedStyleSlot(slotId),
 	});
 
 	writeResolvedSlotOutput({
@@ -470,9 +535,11 @@ const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
 };
 
 /**
- * Resolves slot styles for the current screen pass and emits reset values for
- * transition-owned keys that existed in the previous resolved map but no longer
- * exist in the current one.
+ * Resolves slot styles for the current screen pass.
+ *
+ * Custom slots reset omitted keys immediately. Reserved screen slots retain
+ * omitted keys because lifecycle progress does not define a safe visual reset
+ * boundary.
  */
 export const resolveSlotStyles = ({
 	localStylesMaps,

package/src/shared/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -0,0 +1,41 @@
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+
+export type SelectedInterpolatorFrame = Pick<
+	ScreenInterpolatorFrame,
+	| "progress"
+	| "transitionProgress"
+	| "next"
+	| "focused"
+	| "active"
+	| "inactive"
+	| "logicallySettled"
+>;
+
+export const selectInterpolatorFrame = (
+	frame: ScreenInterpolatorFrame,
+	useCurrentOnly: boolean,
+): SelectedInterpolatorFrame => {
+	"worklet";
+
+	if (!useCurrentOnly) {
+		return {
+			progress: frame.progress,
+			transitionProgress: frame.transitionProgress,
+			next: frame.next,
+			focused: frame.focused,
+			active: frame.active,
+			inactive: frame.inactive,
+			logicallySettled: frame.logicallySettled,
+		};
+	}
+
+	return {
+		progress: frame.current.progress,
+		transitionProgress: frame.current.transitionProgress,
+		next: undefined,
+		focused: true,
+		active: frame.current,
+		inactive: frame.previous,
+		logicallySettled: frame.current.settled,
+	};
+};

package/src/shared/providers/screen/styles/helpers/transition-visual-state.ts

@@ -0,0 +1,44 @@
+/**
+ * Visual lifecycle boundaries use the internal directional clock rather than
+ * physical transition progress, which may overshoot or revisit an endpoint.
+ */
+export const hasOpenTransitionStarted = ({
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return pendingLifecycleStartBlockCount === 0 && animationProgress > 0;
+};
+
+export const isOpenTransitionBlocked = ({
+	opening,
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	opening: boolean;
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return (
+		opening &&
+		!hasOpenTransitionStarted({
+			pendingLifecycleStartBlockCount,
+			animationProgress,
+		})
+	);
+};
+
+export const hasCloseTransitionFinished = ({
+	closing,
+	animationProgress,
+}: {
+	closing: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return !!closing && animationProgress === 0;
+};

package/src/shared/providers/screen/styles/helpers/visibility-gate.ts

@@ -1,11 +1,15 @@
 import { LifecycleTransitionRequestKind } from "../../../../stores/system.store";
+import {
+	hasOpenTransitionStarted,
+	isOpenTransitionBlocked,
+} from "./transition-visual-state";
 
 type ScreenVisibilityGateState = {
 	isFloatingOverlay?: boolean;
 	hasVisibilityGateOpened: boolean;
 	pendingLifecycleStartBlockCount: number;
 	pendingLifecycleRequestKind: LifecycleTransitionRequestKind;
-	progress: number;
+	animationProgress: number;
 	entering: number;
 };
 
@@ -14,12 +18,37 @@ type ScreenVisibilityGateDecision = {
 	shouldOpenGate: boolean;
 };
 
+type InitialDestinationStyleGateState = {
+	shouldPrepareStyles: boolean;
+	isVisibilityBlocked: boolean;
+	stylesReady: boolean;
+};
+
+type InitialDestinationStyleGateDecision = {
+	shouldMarkStylesReady: boolean;
+	shouldWithholdStyles: boolean;
+};
+
+export const resolveInitialDestinationStyleGate = ({
+	shouldPrepareStyles,
+	isVisibilityBlocked,
+	stylesReady,
+}: InitialDestinationStyleGateState): InitialDestinationStyleGateDecision => {
+	"worklet";
+
+	return {
+		shouldMarkStylesReady:
+			shouldPrepareStyles && isVisibilityBlocked && !stylesReady,
+		shouldWithholdStyles: shouldPrepareStyles && !stylesReady,
+	};
+};
+
 export const resolveScreenVisibilityGate = ({
 	isFloatingOverlay,
 	hasVisibilityGateOpened,
 	pendingLifecycleStartBlockCount,
 	pendingLifecycleRequestKind,
-	progress,
+	animationProgress,
 	entering,
 }: ScreenVisibilityGateState): ScreenVisibilityGateDecision => {
 	"worklet";
@@ -30,16 +59,22 @@ export const resolveScreenVisibilityGate = ({
 		};
 	}
 
-	const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount > 0;
 	const isPendingOpen =
 		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
 	const isOpening = isPendingOpen || !!entering;
-	const isWaitingForOpenToStart = progress <= 0;
-	const shouldBlock =
-		(hasPendingLifecycleBlock || isWaitingForOpenToStart) && isOpening;
+	const shouldBlock = isOpenTransitionBlocked({
+		opening: isOpening,
+		pendingLifecycleStartBlockCount,
+		animationProgress,
+	});
 
 	return {
 		shouldBlock,
-		shouldOpenGate: !shouldBlock && progress > 0,
+		shouldOpenGate:
+			!shouldBlock &&
+			hasOpenTransitionStarted({
+				pendingLifecycleStartBlockCount,
+				animationProgress,
+			}),
 	};
 };