react-native-screen-transitions 3.9.0-alpha.0 → 3.9.0-alpha.2

package/src/shared/hooks/navigation/use-stack.tsx

@@ -5,10 +5,14 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
+	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
 import type { StackCoreContextValue } from "../../providers/stack/core.provider";
+import { AnimationStore } from "../../stores/animation.store";
 import type { OverlayProps } from "../../types/overlay.types";
 import type {
 	BaseStackDescriptor,
@@ -87,6 +91,30 @@ const createStackStore = (
 const StackContext = createContext<StackStoreApi | null>(null);
 StackContext.displayName = "Stack";
 
+function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
+	const visualProgressValues = useMemo(
+		() =>
+			routeKeys.map((routeKey) =>
+				AnimationStore.getValue(routeKey, "visualProgress"),
+			),
+		[routeKeys],
+	);
+
+	const stackProgressValues = useMemo(
+		() =>
+			routeKeys.map((routeKey) =>
+				AnimationStore.getValue(routeKey, "stackProgress"),
+			),
+		[routeKeys],
+	);
+
+	useDerivedValue(() => {
+		syncStackProgressValues(visualProgressValues, stackProgressValues);
+	});
+
+	return null;
+}
+
 export function StackProvider({
 	children,
 	value,
@@ -116,7 +144,10 @@ export function StackProvider({
 	});
 
 	return (
-		<StackContext.Provider value={store}>{children}</StackContext.Provider>
+		<StackContext.Provider value={store}>
+			<StackProgressOwner routeKeys={value.routeKeys} />
+			{children}
+		</StackContext.Provider>
 	);
 }
 

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -11,6 +11,7 @@ import type { BaseStackRoute } from "../../../../../types/stack.types";
 export type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
+	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -7,21 +7,26 @@ import {
 	useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../../../constants";
+import {
+	createScreenTransitionState,
+	DEFAULT_SCREEN_TRANSITION_STATE,
+} from "../../../../constants";
 import { useStack } from "../../../../hooks/navigation/use-stack";
-import { AnimationStore } from "../../../../stores/animation.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
+	ScreenTransitionState,
 } from "../../../../types/animation.types";
 
-import { useDescriptors } from "../../descriptors";
+import { type BaseDescriptor, useDescriptors } from "../../descriptors";
+import { buildScreenTransitionOptions } from "./build-screen-transition-options";
 import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
-import { deriveStackProgress } from "./stack-progress";
+import { resolveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
+import { toPlainRoute, toPlainValue } from "./worklet";
 
 export type ScreenInterpolatorFrame = Omit<
 	ScreenInterpolationProps,
@@ -36,21 +41,148 @@ interface ScreenAnimationPipeline {
 	currentInterpolator: ScreenStyleInterpolator | undefined;
 }
 
-const createInitialBaseInterpolatorProps = (
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"],
-	insets: ScreenInterpolatorFrame["insets"],
-): ScreenInterpolatorFrame => {
-	const current = {
-		...DEFAULT_SCREEN_TRANSITION_STATE,
-		layouts: { screen: dimensions },
-	};
+const getInitialSettledProgress = (descriptor: BaseDescriptor) => {
+	const { snapPoints, initialSnapIndex = 0 } = descriptor.options;
 
-	return {
+	if (!snapPoints?.length) {
+		return 1;
+	}
+
+	const clampedIndex = Math.min(
+		Math.max(0, initialSnapIndex),
+		snapPoints.length - 1,
+	);
+	const snapPoint = snapPoints[clampedIndex];
+
+	return typeof snapPoint === "number" ? snapPoint : 0;
+};
+
+const applyInitialProgress = ({
+	state,
+	dimensions,
+	progress,
+	entering = 0,
+	closing = 0,
+	animating = 0,
+	willAnimate = 0,
+	settled = entering || closing || animating ? 0 : 1,
+}: {
+	state: ScreenTransitionState;
+	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
+	progress: number;
+	entering?: number;
+	closing?: number;
+	animating?: number;
+	willAnimate?: number;
+	settled?: number;
+}) => {
+	state.progress = progress;
+	state.transitionProgress = progress;
+	state.entering = entering;
+	state.closing = closing;
+	state.animating = animating;
+	state.willAnimate = willAnimate;
+	state.settled = settled;
+	state.logicallySettled = settled;
+	state.layouts.screen = dimensions;
+
+	return state;
+};
+
+const createInitialTransitionState = ({
+	descriptor,
+	dimensions,
+	progress,
+	entering,
+	animating,
+	willAnimate,
+	settled,
+}: {
+	descriptor: BaseDescriptor;
+	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
+	progress: number;
+	entering?: number;
+	animating?: number;
+	willAnimate?: number;
+	settled?: number;
+}) => {
+	const meta = descriptor.options.meta
+		? (toPlainValue(descriptor.options.meta) as Record<string, unknown>)
+		: undefined;
+	const state = createScreenTransitionState(
+		toPlainRoute(descriptor.route),
+		meta,
+		buildScreenTransitionOptions(descriptor.options),
+	);
+
+	return applyInitialProgress({
+		state,
+		dimensions,
+		progress,
+		entering,
+		animating,
+		willAnimate,
+		settled,
+	});
+};
+
+const createInitialInterpolatorProps = ({
+	dimensions,
+	insets,
+	currentDescriptor,
+	nextDescriptor,
+	prevDescriptor,
+}: {
+	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
+	insets: ScreenInterpolatorFrame["insets"];
+	currentDescriptor: BaseDescriptor;
+	nextDescriptor?: BaseDescriptor;
+	prevDescriptor?: BaseDescriptor;
+}): ScreenInterpolatorFrame => {
+	const hasIncomingNext = !!nextDescriptor;
+	const isFocusedEntering = !!prevDescriptor && !nextDescriptor;
+	const shouldAnimateInitialMount =
+		!prevDescriptor &&
+		!nextDescriptor &&
+		!!currentDescriptor.options.experimental_animateOnInitialMount;
+	const currentProgress =
+		hasIncomingNext || (!isFocusedEntering && !shouldAnimateInitialMount)
+			? getInitialSettledProgress(currentDescriptor)
+			: 0;
+	const currentEntering =
+		isFocusedEntering || shouldAnimateInitialMount ? 1 : 0;
+	const current = createInitialTransitionState({
+		descriptor: currentDescriptor,
+		dimensions,
+		progress: currentProgress,
+		entering: currentEntering,
+		animating: currentEntering,
+		willAnimate: currentEntering,
+	});
+	const previous = prevDescriptor
+		? createInitialTransitionState({
+				descriptor: prevDescriptor,
+				dimensions,
+				progress: getInitialSettledProgress(prevDescriptor),
+			})
+		: undefined;
+	const next = nextDescriptor
+		? createInitialTransitionState({
+				descriptor: nextDescriptor,
+				dimensions,
+				progress: 0,
+				entering: 1,
+				animating: 1,
+				willAnimate: 1,
+				settled: 0,
+			})
+		: undefined;
+	const frame: ScreenInterpolatorFrame = {
 		layouts: current.layouts,
 		insets,
-		previous: undefined,
+		previous,
 		current,
-		next: undefined,
+		next,
 		progress: 0,
 		stackProgress: 0,
 		logicallySettled: 1,
@@ -58,13 +190,94 @@ const createInitialBaseInterpolatorProps = (
 		active: current,
 		inactive: undefined,
 	};
+
+	updateDerivations(frame);
+	frame.stackProgress = frame.progress;
+	frame.logicallySettled = frame.active.settled;
+
+	return frame;
+};
+
+type BuiltTransitionState = NonNullable<
+	ReturnType<typeof useBuildTransitionState>
+>;
+
+const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
+	frame,
+	dimensions,
+	insets,
+	currentAnimation,
+	nextAnimation,
+	prevAnimation,
+	nextHasTransitions,
+	interpolatorOptions,
+}: {
+	frame: TFrame;
+	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
+	insets: ScreenInterpolatorFrame["insets"];
+	currentAnimation: BuiltTransitionState | undefined;
+	nextAnimation: BuiltTransitionState | undefined;
+	prevAnimation: BuiltTransitionState | undefined;
+	nextHasTransitions: boolean;
+	interpolatorOptions: SelectedInterpolatorOptions;
+}): TFrame => {
+	"worklet";
+	const shouldApplyOptionsToCurrent = interpolatorOptions.owner === "current";
+	const shouldApplyOptionsToNext =
+		interpolatorOptions.owner === "next" &&
+		!!nextAnimation &&
+		nextHasTransitions;
+	const previousCurrentProgress = currentAnimation?.visualProgress.get();
+	const previousNextProgress =
+		nextAnimation && nextHasTransitions
+			? nextAnimation.visualProgress.get()
+			: undefined;
+
+	frame.previous = prevAnimation
+		? hydrateTransitionState(prevAnimation, dimensions)
+		: undefined;
+
+	frame.current = currentAnimation
+		? hydrateTransitionState(
+				currentAnimation,
+				dimensions,
+				shouldApplyOptionsToCurrent ? interpolatorOptions.options : undefined,
+			)
+		: DEFAULT_SCREEN_TRANSITION_STATE;
+
+	frame.next =
+		nextAnimation && nextHasTransitions
+			? hydrateTransitionState(
+					nextAnimation,
+					dimensions,
+					shouldApplyOptionsToNext ? interpolatorOptions.options : undefined,
+				)
+			: undefined;
+
+	frame.layouts = frame.current.layouts;
+	frame.insets = insets;
+
+	updateDerivations(frame);
+
+	frame.stackProgress = resolveStackProgress(
+		currentAnimation?.stackProgress,
+		frame.progress,
+		frame.current.progress,
+		previousCurrentProgress,
+		frame.next?.progress,
+		previousNextProgress,
+	);
+	frame.logicallySettled = frame.active.settled;
+
+	return frame;
 };
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
-	const { flags, routeKeys } = useStack();
+	const transitionsAlwaysOn = useStack(
+		(stack) => stack.flags.TRANSITIONS_ALWAYS_ON,
+	);
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
-	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
 
 	const {
 		current: currDescriptor,
@@ -76,84 +289,47 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const nextAnimation = useBuildTransitionState(nextDescriptor);
 	const prevAnimation = useBuildTransitionState(prevDescriptor);
 
-	const currentRouteKey = currDescriptor?.route?.key;
-	const currentIndex = routeKeys.indexOf(currentRouteKey);
-	const visualProgressValues = useMemo(() => {
-		return routeKeys.map((routeKey) =>
-			AnimationStore.getValue(routeKey, "visualProgress"),
-		);
-	}, [routeKeys]);
-
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
 		!!nextRouteKey &&
 		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
 
-	const screenInterpolatorProps = useSharedValue(
-		createInitialBaseInterpolatorProps(dimensions, insets),
+	const initialInterpolatorProps = useMemo(
+		() =>
+			createInitialInterpolatorProps({
+				dimensions,
+				insets,
+				currentDescriptor: currDescriptor,
+				nextDescriptor,
+				prevDescriptor,
+			}),
+		[dimensions, insets, currDescriptor, nextDescriptor, prevDescriptor],
 	);
+
+	const screenInterpolatorProps = useSharedValue(initialInterpolatorProps);
 	const selectedInterpolatorOptions =
 		useSharedValue<SelectedInterpolatorOptions>({
 			owner: "current",
 		});
 
 	const propsRevisionState = useSharedValue({ value: 0 });
+
 	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
 		"worklet";
 
 		screenInterpolatorProps.modify((frame) => {
 			"worklet";
 			const interpolatorOptions = selectedInterpolatorOptions.get();
-			const shouldApplyOptionsToCurrent =
-				interpolatorOptions.owner === "current";
-			const shouldApplyOptionsToNext =
-				interpolatorOptions.owner === "next" &&
-				!!nextAnimation &&
-				nextHasTransitions;
-
-			frame.previous = prevAnimation
-				? hydrateTransitionState(prevAnimation, dimensions)
-				: undefined;
-
-			frame.current = currentAnimation
-				? hydrateTransitionState(
-						currentAnimation,
-						dimensions,
-						shouldApplyOptionsToCurrent
-							? interpolatorOptions.options
-							: undefined,
-					)
-				: DEFAULT_SCREEN_TRANSITION_STATE;
-
-			frame.next =
-				nextAnimation && nextHasTransitions
-					? hydrateTransitionState(
-							nextAnimation,
-							dimensions,
-							shouldApplyOptionsToNext
-								? interpolatorOptions.options
-								: undefined,
-						)
-					: undefined;
-
-			frame.layouts = frame.current.layouts;
-			frame.insets = insets;
-
-			updateDerivations(frame);
-
-			frame.stackProgress = deriveStackProgress(
-				routeKeys,
-				visualProgressValues,
-				currentIndex,
-				frame.progress,
-				currentRouteKey,
-				frame.current.progress,
-				nextRouteKey,
-				frame.next?.progress,
-			);
-			frame.logicallySettled = frame.active.settled;
-
-			return frame;
+			return hydrateInterpolatorFrame({
+				frame,
+				dimensions,
+				insets,
+				currentAnimation,
+				nextAnimation,
+				prevAnimation,
+				nextHasTransitions,
+				interpolatorOptions,
+			});
 		}, false);
 
 		// Critical reactive dependency for `screenInterpolatorProps`.

package/src/shared/providers/screen/animation/helpers/stack-progress.ts

@@ -1,28 +1,43 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export const deriveStackProgress = (
-	routeKeys: string[],
+export const syncStackProgressValues = (
 	visualProgressValues: SharedValue<number>[],
-	currentIndex: number,
+	stackProgressValues: SharedValue<number>[],
+) => {
+	"worklet";
+	let total = 0;
+
+	for (let i = visualProgressValues.length - 1; i >= 0; i--) {
+		total += visualProgressValues[i]?.get() ?? 0;
+		const stackProgress = stackProgressValues[i];
+
+		if (stackProgress && stackProgress.get() !== total) {
+			stackProgress.set(total);
+		}
+	}
+};
+
+export const resolveStackProgress = (
+	stackProgress: SharedValue<number> | undefined,
 	fallbackProgress: number,
-	currentRouteKey: string | undefined,
 	currentProgress: number,
-	nextRouteKey: string | undefined,
+	previousCurrentProgress: number | undefined,
 	nextProgress: number | undefined,
+	previousNextProgress: number | undefined,
 ) => {
 	"worklet";
-	if (currentIndex < 0) return fallbackProgress;
+	if (!stackProgress) {
+		return fallbackProgress;
+	}
 
-	let total = 0;
-	for (let i = currentIndex; i < visualProgressValues.length; i++) {
-		const routeKey = routeKeys[i];
-		if (routeKey === currentRouteKey) {
-			total += currentProgress;
-		} else if (routeKey === nextRouteKey && nextProgress !== undefined) {
-			total += nextProgress;
-		} else {
-			total += visualProgressValues[i].get();
-		}
+	let total = stackProgress.get();
+
+	if (previousCurrentProgress !== undefined) {
+		total += currentProgress - previousCurrentProgress;
+	}
+
+	if (nextProgress !== undefined && previousNextProgress !== undefined) {
+		total += nextProgress - previousNextProgress;
 	}
 
 	return total;

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -22,6 +22,7 @@ import { toPlainRoute, toPlainValue } from "./worklet";
 type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
+	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -67,6 +68,7 @@ export const useBuildTransitionState = (
 		return {
 			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
 			visualProgress: AnimationStore.getValue(key, "visualProgress"),
+			stackProgress: AnimationStore.getValue(key, "stackProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),

package/src/shared/providers/screen/screen-composer.tsx

@@ -5,7 +5,7 @@ import { ScreenAnimationProvider } from "./animation";
 import { type BaseDescriptor, DescriptorsProvider } from "./descriptors";
 import { ScreenGestureProvider } from "./gestures";
 import { ScreenOptionsProvider } from "./options";
-import { ScreenStylesProvider } from "./styles";
+import { ScreenSlotProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;
@@ -26,9 +26,9 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 				<ScreenOptionsProvider>
 					<ScreenGestureProvider>
 						<ScreenAnimationProvider>
-							<ScreenStylesProvider>
+							<ScreenSlotProvider>
 								<ScreenContainer>{children}</ScreenContainer>
-							</ScreenStylesProvider>
+							</ScreenSlotProvider>
 						</ScreenAnimationProvider>
 					</ScreenGestureProvider>
 				</ScreenOptionsProvider>

package/src/shared/providers/screen/styles/helpers/opening-phase.ts

@@ -0,0 +1,25 @@
+/**
+ * The "pre-start" window of an opening transition: the screen has committed to
+ * opening (`entering`) but `transitionProgress` has not yet moved past 0, so no
+ * transformed frame has been produced yet.
+ *
+ * This window is a quarantine, and two source-level guards key off it:
+ * - the visibility gate keeps the entering screen hidden (it must not be SEEN), and
+ * - interpolator ownership stays on "current" so the entering screen does not
+ *   DRIVE other screens' styles until its transition is actually live.
+ *
+ * Both must agree on when the open transition has started, so the threshold
+ * lives here in one place rather than being re-derived at each site.
+ */
+export const hasOpenTransitionStarted = (transitionProgress: number) => {
+	"worklet";
+	return transitionProgress > 0;
+};
+
+export const isOpeningBeforeStart = (
+	entering: number,
+	transitionProgress: number,
+) => {
+	"worklet";
+	return !!entering && !hasOpenTransitionStarted(transitionProgress);
+};

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

@@ -35,6 +35,11 @@ const getForwardedSlot = (
 	return slot;
 };
 
+const hasDefinedBucketValue = (value: unknown) => {
+	"worklet";
+	return value !== undefined && value !== null;
+};
+
 const hasEitherResetPatch = (
 	hasStyleResetPatch: boolean,
 	hasPropResetPatch: boolean,
@@ -43,11 +48,6 @@ const hasEitherResetPatch = (
 	return hasStyleResetPatch || hasPropResetPatch;
 };
 
-const hasDefinedBucketValue = (value: unknown) => {
-	"worklet";
-	return value !== undefined && value !== null;
-};
-
 const hasResettableDisappearedKeys = (
 	previousKeys: Record<string, true> | undefined,
 	previousResetValues: Record<string, unknown> | undefined,
@@ -81,7 +81,6 @@ const getResolvedSlotOutput = ({
 }) => {
 	"worklet";
 	const state = getResolvedSlotState(slot);
-
 	const hasStyleResetPatch = hasResettableDisappearedKeys(
 		previousState?.styleKeys,
 		previousState?.styleResetValues,
@@ -459,10 +458,9 @@ const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
 };
 
 /**
- * Resolves slot styles for the current screen pass and resets keys a slot
- * emitted previously but no longer returns. Reanimated does not reliably clear
- * animated values with undefined, so known keys and numeric values are reset to
- * concrete identity values.
+ * 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.
  */
 export const resolveSlotStyles = ({
 	localStylesMaps,

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

@@ -139,7 +139,6 @@ export const materializeResolvedSlot = ({
 		hasAnyStyleKeys,
 		hasStyleResetPatch,
 	});
-
 	const resolvedProps = materializeResolvedProps({
 		baseProps,
 		previousState,

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

@@ -2,11 +2,6 @@ import type { NormalizedTransitionSlotStyle } from "../../../../../types/animati
 import { getPropResetValue, getStyleResetValue } from "./reset-values";
 import type { ResettableStyleState } from "./types";
 
-const hasTrackedKey = (keys: Record<string, true> | undefined, key: string) => {
-	"worklet";
-	return keys !== undefined && keys[key] === true;
-};
-
 const isDefinedStyleValue = (value: unknown) => {
 	"worklet";
 	return value !== undefined && value !== null;
@@ -52,25 +47,6 @@ const collectDefinedKeys = ({
 	};
 };
 
-export const hasDisappearedKeys = (
-	previousKeys: Record<string, true> | undefined,
-	currentKeys: Record<string, true> | undefined,
-) => {
-	"worklet";
-
-	if (!previousKeys) {
-		return false;
-	}
-
-	for (const key in previousKeys) {
-		if (!hasTrackedKey(currentKeys, key)) {
-			return true;
-		}
-	}
-
-	return false;
-};
-
 const hasEitherKeySet = (
 	styleKeys: Record<string, true> | undefined,
 	propKeys: Record<string, true> | undefined,