react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/providers/screen/styles/helpers/create-interpolator-scope.ts

@@ -0,0 +1,45 @@
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionAccessor,
+} from "../../../../types/animation.types";
+import { createBoundsAccessor } from "../../../../utils/bounds";
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+import type { SelectedInterpolatorFrame } from "./select-interpolator-frame";
+
+export const createInterpolatorScope = ({
+	frame,
+	selectedFrame,
+	transition,
+}: {
+	frame: ScreenInterpolatorFrame;
+	selectedFrame: SelectedInterpolatorFrame;
+	transition: ScreenTransitionAccessor;
+}): ScreenInterpolationProps => {
+	"worklet";
+
+	const selectedProps = {
+		...frame,
+		...selectedFrame,
+	};
+	let scope: ScreenInterpolationProps;
+	const scopedTransition: ScreenTransitionAccessor = (target) => {
+		"worklet";
+
+		if ((target?.depth ?? 0) === 0) {
+			return scope;
+		}
+
+		return transition(target);
+	};
+
+	scope = {
+		...selectedProps,
+		bounds: createBoundsAccessor(() => {
+			"worklet";
+			return selectedProps;
+		}),
+		transition: scopedTransition,
+	};
+
+	return scope;
+};

package/src/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 composeCurrentAndNextStyles = (
+	current: NormalizedTransitionInterpolatedStyle,
+	next: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...current };
+
+	for (const slotId in next) {
+		const nextSlot = next[slotId];
+
+		if (nextSlot) {
+			composed[slotId] = mergeSlots(current[slotId], nextSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+}): {
+	localStylesMaps: LocalStyleLayers;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!currentStylesMap) {
+		return {
+			localStylesMaps: [nextStylesMap],
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeCurrentAndNextStyles(currentStylesMap, nextStylesMap),
+		],
+	};
+};

package/src/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/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -0,0 +1,33 @@
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+
+export type SelectedInterpolatorFrame = Pick<
+	ScreenInterpolatorFrame,
+	"progress" | "transitionProgress" | "next" | "focused" | "active" | "inactive"
+>;
+
+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,
+		};
+	}
+
+	return {
+		progress: frame.current.progress,
+		transitionProgress: frame.current.transitionProgress,
+		next: undefined,
+		focused: true,
+		active: frame.current,
+		inactive: frame.previous,
+	};
+};

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

@@ -0,0 +1,70 @@
+/**
+ * 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;
+};
+
+export const isScreenInterpolatorReady = ({
+	hasInterpolator,
+	opening,
+	closing,
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	hasInterpolator: boolean;
+	opening: boolean;
+	closing: number;
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+
+	return (
+		hasInterpolator &&
+		!isOpenTransitionBlocked({
+			opening,
+			pendingLifecycleStartBlockCount,
+			animationProgress,
+		}) &&
+		!hasCloseTransitionFinished({ closing, animationProgress })
+	);
+};

package/src/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -0,0 +1,16 @@
+type VisibilityBlockOwnershipParams = {
+	localBlocked: boolean;
+	ancestorBlocked: boolean;
+};
+
+export const resolveVisibilityBlockOwnership = ({
+	localBlocked,
+	ancestorBlocked,
+}: VisibilityBlockOwnershipParams) => {
+	"worklet";
+
+	return {
+		appliesOffset: localBlocked && !ancestorBlocked,
+		effectiveBlocked: localBlocked || ancestorBlocked,
+	};
+};

package/src/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,
+			}),
 	};
 };

package/src/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,14 +1,33 @@
 import { useMemo } from "react";
 import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import { useNavigationRoute } from "../../../navigation/navigation-host.provider";
 import {
 	composeSlotStyleWithLocalTransform,
 	getLocalTransformForSlotComposition,
 } from "../helpers/compose-slot-style";
-import { useScreenSlots } from "../slot.provider";
+import { useOptionalScreenSlotStore } from "../slot.provider";
+
+const useCurrentScreenSlotsMap = () => {
+	const routeKey = useNavigationRoute().key;
+	const localSlotsMap = useOptionalScreenSlotStore(
+		(store) => store?.slotsMap ?? null,
+	);
+	const keyedSlotsMap = useOptionalScreenSlotStore(
+		localSlotsMap ? null : routeKey,
+		(store) => store.slotsMap,
+	);
+	const slotsMap = localSlotsMap ?? keyedSlotsMap;
+
+	if (!slotsMap) {
+		throw new Error(`ScreenSlotStore is unavailable for route "${routeKey}"`);
+	}
+
+	return slotsMap;
+};
 
 export const useSlotStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const slot = slotId ? slotsMap.get()[slotId] : undefined;
@@ -26,7 +45,7 @@ export const useComposedSlotStyles = (
 	slotId: string | undefined,
 	style: unknown,
 ) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 	const localTransform = useMemo(
 		() => getLocalTransformForSlotComposition(style),
 		[style],
@@ -50,7 +69,7 @@ export const useComposedSlotStyles = (
  * target takes the full associated style. Yields `NO_STYLES` when neither is set.
  */
 export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -66,7 +85,7 @@ export const useSlotStackingStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotLayoutStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -103,7 +122,7 @@ export const useSlotLayoutStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotProps = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedProps(() => {
 		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;