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

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

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	type DerivedValue,
@@ -6,20 +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 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 { resolveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
+import { toPlainRoute, toPlainValue } from "./worklet";
 
 export type ScreenInterpolatorFrame = Omit<
 	ScreenInterpolationProps,
@@ -34,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,
@@ -56,6 +190,86 @@ 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 {
@@ -80,74 +294,42 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		!!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;
-			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;
+			return hydrateInterpolatorFrame({
+				frame,
+				dimensions,
+				insets,
+				currentAnimation,
+				nextAnimation,
+				prevAnimation,
+				nextHasTransitions,
+				interpolatorOptions,
+			});
 		}, false);
 
 		// Critical reactive dependency for `screenInterpolatorProps`.

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,

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

@@ -34,12 +34,7 @@ export const resolveScreenVisibilityGate = ({
 	const isPendingOpen =
 		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
 	const isOpening = isPendingOpen || !!entering;
-
-	// Keep the screen hidden until the first transformed opening frame exists.
-	// The lifecycle request is cleared before the RAF-scheduled progress
-	// animation starts, so `entering` carries the gate through that one-frame gap.
 	const isWaitingForOpenToStart = progress <= 0;
-
 	const shouldBlock =
 		(hasPendingLifecycleBlock || isWaitingForOpenToStart) && isOpening;
 
@@ -48,10 +43,3 @@ export const resolveScreenVisibilityGate = ({
 		shouldOpenGate: !shouldBlock && progress > 0,
 	};
 };
-
-export const shouldBlockScreenVisibility = (
-	state: ScreenVisibilityGateState,
-) => {
-	"worklet";
-	return resolveScreenVisibilityGate(state).shouldBlock;
-};