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

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

@@ -1,5 +1,10 @@
 import { useMemo } from "react";
-import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import {
+	type SharedValue,
+	useAnimatedReaction,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { AnimationStore } from "../../../../stores/animation.store";
 import {
@@ -12,8 +17,7 @@ import type {
 	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 { useScreenAnimationStore } from "../../animation";
 import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 import { readScreenAnimationRevisions } from "../../animation/helpers/read-screen-animation-revisions";
@@ -21,13 +25,24 @@ import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selecte
 import { useDescriptorsStore } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "../../options";
 import { collectInterpolatorSharedValues } from "../helpers/collect-interpolator-shared-values";
+import { createInterpolatorScope } from "../helpers/create-interpolator-scope";
 import { normalizeSlots } from "../helpers/normalize-slots";
-import { isOpeningBeforeStart } from "../helpers/opening-phase";
+import { resolveInterpolatorStyleHandoff } from "../helpers/resolve-interpolator-style-handoff";
 import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
+import {
+	type SelectedInterpolatorFrame,
+	selectInterpolatorFrame,
+} from "../helpers/select-interpolator-frame";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
+import {
+	hasCloseTransitionFinished,
+	isOpenTransitionBlocked,
+	isScreenInterpolatorReady,
+} from "../helpers/transition-visual-state";
+import { resolveInitialDestinationStyleGate } from "../helpers/visibility-gate";
 
 const NO_STYLE_LAYERS: LocalStyleLayers = [];
 
@@ -39,9 +54,7 @@ type InterpolatorResult = {
 type RunInterpolatorParams = {
 	interpolator: ScreenStyleInterpolator | undefined;
 	props: ScreenInterpolatorFrame;
-	progress: ScreenInterpolatorFrame["progress"];
-	next: ScreenInterpolatorFrame["next"];
-	bounds: Parameters<ScreenStyleInterpolator>[0]["bounds"];
+	selectedFrame: SelectedInterpolatorFrame;
 	transition: Parameters<ScreenStyleInterpolator>[0]["transition"];
 };
 
@@ -62,9 +75,7 @@ const normalizeRawStyleMap = (
 const runInterpolator = ({
 	interpolator,
 	props,
-	progress,
-	next,
-	bounds,
+	selectedFrame,
 	transition,
 }: RunInterpolatorParams): InterpolatorResult | undefined => {
 	"worklet";
@@ -74,13 +85,13 @@ const runInterpolator = ({
 	}
 
 	try {
-		const raw = interpolator({
-			...props,
-			progress,
-			next,
-			bounds,
-			transition,
-		});
+		const raw = interpolator(
+			createInterpolatorScope({
+				frame: props,
+				selectedFrame,
+				transition,
+			}),
+		);
 
 		const rawStyleMap: TransitionInterpolatedStyle | undefined =
 			typeof raw === "object" && raw != null ? raw : undefined;
@@ -98,17 +109,6 @@ const runInterpolator = ({
 	}
 };
 
-const appendLayer = (
-	layers: LocalStyleLayers,
-	result: InterpolatorResult | undefined,
-) => {
-	"worklet";
-
-	if (result) {
-		layers.push(result.stylesMap);
-	}
-};
-
 /**
  * Builds the raw interpolated style layers for the current screen pass.
  *
@@ -125,28 +125,74 @@ const appendLayer = (
  * normal interpolator selection once the gesture-driven close is no longer in
  * play.
  *
- * 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.
+ * At an ownership handoff, the current interpolator remains live but is
+ * evaluated without the next-screen relationship. The next owner replaces
+ * matching scalar keys and composes its live transforms after the current
+ * screen's self-owned transforms.
  */
-export const useInterpolatedStylesMap = () => {
+export const useInterpolatedStylesMap = ({
+	enabled,
+	visibilityBlocked,
+}: {
+	enabled: boolean;
+	visibilityBlocked: SharedValue<boolean>;
+}) => {
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
 	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const screenOptions = useScreenOptionsContext();
+	const destinationPairKey = useDescriptorsStore(
+		(s) => s.derivations.destinationPairKey,
+	);
+	const screenOptions = useScreenOptionsStore();
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
+	const selectedInterpolatorOptions = useScreenAnimationStore(
+		(store) => store.selectedInterpolatorOptions,
+	);
+	const nextInterpolator = useScreenAnimationStore(
+		(store) => store.nextInterpolator,
+	);
+	const currentInterpolator = useScreenAnimationStore(
+		(store) => store.currentInterpolator,
+	);
+	const transitionSources = useScreenAnimationStore(
+		(store) => store.transitionSources,
+	);
+	const transitionOriginIndex = useScreenAnimationStore(
+		(store) => store.transitionOriginIndex,
+	);
+	const transition = useBuildTransitionAccessor({
+		transitionSources,
+		transitionOriginIndex,
+	});
+	const hasCurrentInterpolator = !!currentInterpolator;
+	const { closing: currentClosing, entering: currentEntering } =
+		AnimationStore.getBag(currentScreenKey);
 	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
-	const boundsAccessor = useBuildBoundsAccessor();
-	const transition = useBuildTransitionAccessor();
-	const nextInterpolatorReady = useSharedValue(0);
+		animationProgress: currentAnimationProgress,
+		pendingLifecycleRequestKind: currentPendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: currentPendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(currentScreenKey);
+	const interpolatorReady = useDerivedValue<number>(() => {
+		"worklet";
+		const isPendingOpen =
+			currentPendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const opening = isPendingOpen || !!currentEntering.get();
+
+		return isScreenInterpolatorReady({
+			hasInterpolator: hasCurrentInterpolator,
+			opening,
+			closing: currentClosing.get(),
+			pendingLifecycleStartBlockCount:
+				currentPendingLifecycleStartBlockCount.get(),
+			animationProgress: currentAnimationProgress.get(),
+		})
+			? 1
+			: 0;
+	});
 
 	// In some cases, a user may want to use external shared values to drive animations in the interpoaltor.
 	// We can now support this by collecting those shared values and reading them here to trigger an update.
@@ -157,26 +203,44 @@ export const useInterpolatedStylesMap = () => {
 	);
 
 	const activeScreenKey = nextScreenKey ?? currentScreenKey;
+	const { closing: activeClosing, entering: activeEntering } =
+		AnimationStore.getBag(activeScreenKey);
 	const {
-		entering: activeEntering,
-		transitionProgress: activeTransitionProgress,
-	} = AnimationStore.getBag(activeScreenKey);
-	const { pendingLifecycleRequestKind: activePendingLifecycleRequestKind } =
-		SystemStore.getBag(activeScreenKey);
+		animationProgress: activeAnimationProgress,
+		pendingLifecycleRequestKind: activePendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: activePendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
+	const initialDestinationStylesReady = useSharedValue(0);
+	const shouldPrepareInitialDestinationStyles =
+		enabled && !!destinationPairKey && !nextScreenKey && !!currentInterpolator;
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return visibilityBlocked.get();
+		},
+		(isVisibilityBlocked) => {
+			"worklet";
+			const styleGate = resolveInitialDestinationStyleGate({
+				shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+				isVisibilityBlocked,
+				stylesReady: !!initialDestinationStylesReady.get(),
+			});
+
+			if (styleGate.shouldMarkStylesReady) {
+				initialDestinationStylesReady.set(1);
+			}
+		},
+	);
 
 	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
-		readScreenAnimationRevisions(
-			screenInterpolatorPropsRevision,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			interpolatorSharedValues,
-		);
+		readScreenAnimationRevisions(transitionSources, interpolatorSharedValues);
 		const props = screenInterpolatorProps.get();
 
-		const { current, next, progress } = props;
+		const { current, next } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
 
@@ -194,44 +258,59 @@ export const useInterpolatedStylesMap = () => {
 		const isInGestureMode =
 			!!isDragging || isGesturingDuringCloseAnimation.get();
 
-		// The current screen keeps interpolator ownership until the next screen is
-		// genuinely live: never during a gesture-driven close, never before a next
-		// interpolator exists, and never in the next screen's pre-start window
-		// (entering, but no transformed frame yet). Only then does "next" take over.
+		// Interpolator ownership changes only at visual boundaries on the UI thread:
+		// the next screen attaches after its blockers clear and progress starts, then
+		// detaches once its closing progress has committed at zero. The downstream
+		// resolver sees the owner disappear in this same graph and resets its styles
+		// without waiting for React to remove the screen.
 		const isPendingOpen =
 			activePendingLifecycleRequestKind.get() ===
 			LifecycleTransitionRequestKind.Open;
 		const activeOpening = isPendingOpen || !!activeEntering.get();
+		const isOpeningBlocked = isOpenTransitionBlocked({
+			opening: activeOpening,
+			pendingLifecycleStartBlockCount:
+				activePendingLifecycleStartBlockCount.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
+		const hasCloseFinished = hasCloseTransitionFinished({
+			closing: activeClosing.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
 		const currentOwnsInterpolator =
 			isInGestureMode ||
 			!nextInterpolator ||
-			isOpeningBeforeStart(
-				activeOpening ? 1 : 0,
-				activeTransitionProgress.get(),
-			);
-		nextInterpolatorReady.set(currentOwnsInterpolator ? 0 : 1);
-
+			isOpeningBlocked ||
+			hasCloseFinished;
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
 			: "next";
 
-		let selectedProgress = progress;
-		let selectedNext = next;
-
-		if (isInGestureMode) {
-			selectedProgress = current.progress;
-			selectedNext = undefined;
-		}
-
+		// Once the next interpolator owns the relationship, the current
+		// interpolator remains responsible only for its own live presentation.
+		// This preserves snap-point transforms without letting current-screen
+		// unfocus rules compete with the next screen's outgoing transition.
+		const currentSelectedFrame = selectInterpolatorFrame(
+			props,
+			isInGestureMode || !!nextInterpolator,
+		);
 		const currentResult = runInterpolator({
 			interpolator: currentInterpolator,
 			props,
-			progress: selectedProgress,
-			next: selectedNext,
-			bounds: boundsAccessor,
+			selectedFrame: currentSelectedFrame,
 			transition,
 		});
 
+		const initialDestinationStyleGate = resolveInitialDestinationStyleGate({
+			shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+			isVisibilityBlocked: visibilityBlocked.get(),
+			stylesReady: !!initialDestinationStylesReady.get(),
+		});
+
+		if (initialDestinationStyleGate.shouldWithholdStyles) {
+			return NO_STYLE_LAYERS;
+		}
+
 		if (interpolatorOptionsOwner === "current") {
 			syncSelectedInterpolatorOptions(
 				selectedInterpolatorOptions,
@@ -240,19 +319,22 @@ export const useInterpolatedStylesMap = () => {
 			);
 			syncScreenOptionsOverrides(currentResult?.rawStyleMap, screenOptions);
 
-			if (!currentResult) {
-				return NO_STYLE_LAYERS;
-			}
+			const handoff = resolveInterpolatorStyleHandoff({
+				currentOwnsInterpolator: true,
+				currentStylesMap: currentResult?.stylesMap,
+				nextStylesMap: undefined,
+			});
 
-			return [currentResult.stylesMap];
+			return handoff.localStylesMaps.length
+				? handoff.localStylesMaps
+				: NO_STYLE_LAYERS;
 		}
 
+		const nextSelectedFrame = selectInterpolatorFrame(props, false);
 		const nextResult = runInterpolator({
 			interpolator: nextInterpolator,
 			props,
-			progress: selectedProgress,
-			next: selectedNext,
-			bounds: boundsAccessor,
+			selectedFrame: nextSelectedFrame,
 			transition,
 		});
 
@@ -263,20 +345,19 @@ export const useInterpolatedStylesMap = () => {
 		);
 		syncScreenOptionsOverrides(undefined, screenOptions);
 
-		const layers: LocalStyleLayers = [];
-
-		appendLayer(layers, currentResult);
-		appendLayer(layers, nextResult);
-
-		if (layers.length === 0) {
-			return NO_STYLE_LAYERS;
-		}
+		const handoff = resolveInterpolatorStyleHandoff({
+			currentOwnsInterpolator: false,
+			currentStylesMap: currentResult?.stylesMap,
+			nextStylesMap: nextResult?.stylesMap,
+		});
 
-		return layers;
+		return handoff.localStylesMaps.length
+			? handoff.localStylesMaps
+			: NO_STYLE_LAYERS;
 	});
 
 	return {
+		interpolatorReady,
 		localStylesMaps,
-		nextInterpolatorReady,
 	};
 };

package/src/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -1,5 +1,6 @@
 import { useWindowDimensions } from "react-native";
 import {
+	type SharedValue,
 	useAnimatedProps,
 	useAnimatedReaction,
 	useAnimatedStyle,
@@ -8,65 +9,92 @@ import {
 import { AnimationStore } from "../../../../stores/animation.store";
 import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
-import { useDescriptorDerivations } from "../../descriptors";
+import { useDescriptorsStore } from "../../descriptors";
+import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
+import { resolveVisibilityBlockOwnership } from "../helpers/visibility-block-ownership";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
-export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+type Params = {
+	ancestorVisibilityBlocked: SharedValue<boolean> | null;
+	isFloatingOverlay?: boolean;
+};
+
+export const useMaybeBlockVisibility = ({
+	ancestorVisibilityBlocked,
+	isFloatingOverlay,
+}: Params) => {
 	const { height } = useWindowDimensions();
-	const { currentScreenKey } = useDescriptorDerivations();
-	const { closing, entering, progressAnimating, transitionProgress } =
-		AnimationStore.getBag(currentScreenKey);
-	const { pendingLifecycleStartBlockCount, pendingLifecycleRequestKind } =
-		SystemStore.getBag(currentScreenKey);
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const { closing, entering } = AnimationStore.getBag(currentScreenKey);
+	const {
+		animationProgress,
+		pendingLifecycleStartBlockCount,
+		pendingLifecycleRequestKind,
+	} = SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
-	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
+	const localVisibilityBlocked = useSharedValue(!isFloatingOverlay);
+	const effectiveVisibilityBlocked = useSharedValue(!isFloatingOverlay);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			return resolveScreenVisibilityGate({
-				isFloatingOverlay,
-				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
-				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
-				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
-				progress: transitionProgress.get(),
-				entering: entering.get(),
-			});
+			return {
+				gate: resolveScreenVisibilityGate({
+					isFloatingOverlay,
+					hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
+					pendingLifecycleStartBlockCount:
+						pendingLifecycleStartBlockCount.get(),
+					pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
+					animationProgress: animationProgress.get(),
+					entering: entering.get(),
+				}),
+				ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+			};
 		},
-		(gate) => {
+		({ gate, ancestorBlocked }) => {
 			"worklet";
 
 			if (gate.shouldOpenGate) {
 				hasVisibilityGateOpened.set(true);
 			}
 
-			shouldBlockVisibility.set(gate.shouldBlock);
+			const ownership = resolveVisibilityBlockOwnership({
+				localBlocked: gate.shouldBlock,
+				ancestorBlocked,
+			});
+			localVisibilityBlocked.set(gate.shouldBlock);
+			effectiveVisibilityBlocked.set(ownership.effectiveBlocked);
 		},
 	);
 
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
 		const offset = getVisibilityBlockOffset(height);
-		// Keep opacity out of normal rendering so effects such as Liquid Glass
-		// retain native compositing. Once closing has fully finished, hiding the
-		// outgoing screen lets the handoff settle before React removes its host.
-		const shouldHideClosedScreen =
-			closing.get() === 1 &&
-			transitionProgress.get() <= 0 &&
-			progressAnimating.get() === 0;
-
+		// Hide the outgoing screen after its visual close while React removes its
+		// host asynchronously.
+		const shouldHideClosedScreen = hasCloseTransitionFinished({
+			closing: closing.get(),
+			animationProgress: animationProgress.get(),
+		});
 		if (shouldHideClosedScreen) {
 			return {
 				opacity: 0,
 			};
 		}
 
+		const ownership = resolveVisibilityBlockOwnership({
+			localBlocked: localVisibilityBlocked.get(),
+			ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+		});
+
 		return {
 			transform: [
 				{
-					translateY: shouldBlockVisibility.get() ? offset : 0,
+					translateY: ownership.appliesOffset ? offset : 0,
 				},
 			],
 		};
@@ -75,7 +103,7 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedProps = useAnimatedProps(() => {
 		"worklet";
 		return {
-			pointerEvents: shouldBlockVisibility.get()
+			pointerEvents: effectiveVisibilityBlocked.get()
 				? ("none" as const)
 				: ("box-none" as const),
 		};
@@ -84,6 +112,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
-		shouldBlockVisibility,
+		visibilityBlocked: effectiveVisibilityBlocked,
 	};
 };

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

@@ -7,8 +7,8 @@ export {
 } from "./hooks/slot-resolvers";
 
 export {
-	ScreenSlotContext,
 	type ScreenSlotName,
 	ScreenSlotProvider,
-	useScreenSlots,
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
 } from "./slot.provider";