react-native-screen-transitions 3.5.1 → 3.6.0-alpha.0

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

@@ -0,0 +1,47 @@
+import type {
+	GestureActivationArea,
+	GestureDirection,
+	ScreenTransitionConfig,
+	ScreenTransitionOptions,
+} from "../../../../types";
+import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
+
+const cloneGestureDirection = (
+	direction: GestureDirection | GestureDirection[] | undefined,
+) => (Array.isArray(direction) ? [...direction] : direction);
+
+const cloneGestureActivationArea = (
+	activationArea: GestureActivationArea | undefined,
+) =>
+	typeof activationArea === "object" && activationArea !== null
+		? { ...activationArea }
+		: activationArea;
+
+export const buildScreenTransitionOptions = (
+	options: ScreenTransitionConfig,
+): ScreenTransitionOptions => {
+	const hasSheetScrollGestureBehavior =
+		options.sheetScrollGestureBehavior !== undefined ||
+		options.expandViaScrollView !== undefined;
+
+	return {
+		gestureEnabled: options.gestureEnabled,
+		experimental_allowDisabledGestureTracking:
+			options.experimental_allowDisabledGestureTracking,
+		gestureDirection: cloneGestureDirection(options.gestureDirection),
+		gestureSensitivity: options.gestureSensitivity,
+		gestureVelocityImpact: options.gestureVelocityImpact,
+		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
+		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
+		gestureResponseDistance: options.gestureResponseDistance,
+		gestureDrivesProgress: options.gestureDrivesProgress,
+		gestureActivationArea: cloneGestureActivationArea(
+			options.gestureActivationArea,
+		),
+		gestureSnapLocked: options.gestureSnapLocked,
+		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior
+			? resolveSheetScrollGestureBehavior(options)
+			: undefined,
+		backdropBehavior: options.backdropBehavior,
+	};
+};

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

@@ -1,33 +1,20 @@
 import type { ScreenTransitionState } from "../../../../types/animation.types";
 
-interface DerivationsParams {
+interface DerivationsTarget {
 	previous?: ScreenTransitionState;
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
+	progress: number;
+	focused: boolean;
+	active: ScreenTransitionState;
+	inactive: ScreenTransitionState | undefined;
 }
 
-/**
- * Additional values to help make defining animations easier.
- */
-export const derivations = ({ previous, current, next }: DerivationsParams) => {
+export const updateDerivations = (frame: DerivationsTarget) => {
 	"worklet";
 
-	// The combined progress (current + next, 0-2 range)
-	const progress = current.progress + (next?.progress ?? 0);
-
-	// Whether the current screen is focused
-	const focused = !next;
-
-	// The screen driving the transition
-	const active = focused ? current : (next ?? current);
-
-	// The screen NOT driving the transition
-	const inactive = focused ? previous : current;
-
-	return {
-		progress,
-		focused,
-		active,
-		inactive,
-	};
+	frame.progress = frame.current.progress + (frame.next?.progress ?? 0);
+	frame.focused = !frame.next;
+	frame.active = frame.focused ? frame.current : (frame.next ?? frame.current);
+	frame.inactive = frame.focused ? frame.previous : frame.current;
 };

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

@@ -6,7 +6,10 @@ import {
 	TRUE,
 } from "../../../../constants";
 import type { GestureStoreMap } from "../../../../stores/gesture.store";
-import type { ScreenTransitionState } from "../../../../types/animation.types";
+import type {
+	ScreenTransitionOptions,
+	ScreenTransitionState,
+} from "../../../../types/animation.types";
 import type { Layout } from "../../../../types/screen.types";
 import type { BaseStackRoute } from "../../../../types/stack.types";
 
@@ -21,9 +24,12 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	options: ScreenTransitionOptions;
+	navigationMaskEnabled: boolean;
 	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
+	contentLayoutSlot: Layout;
 	hasAutoSnapPoint: boolean;
 	sortedNumericSnapPoints: number[];
 	unwrapped: ScreenTransitionState;
@@ -33,49 +39,180 @@ interface ComputeLogicallySettledParams {
 	progress: number;
 	targetProgress: number;
 	settled: number;
-	dragging: number;
+	gestureActive: number;
 }
 
-const computeSettled = (params: {
-	animating: number;
-	dismissing: number;
-	closing: number;
-}) => {
+const computeSettled = (
+	animating: number,
+	dismissing: number,
+	closing: number,
+) => {
 	"worklet";
-	const { animating, dismissing, closing } = params;
 	return animating || dismissing || closing ? FALSE : TRUE;
 };
 
-const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
+const getResolvedSnapPointCount = (
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+) => {
 	"worklet";
-	if (snapPoints.length === 0) return -1;
-	if (progress <= snapPoints[0]) return 0;
-	if (progress >= snapPoints[snapPoints.length - 1])
-		return snapPoints.length - 1;
+	return snapPoints.length + (resolvedAutoSnap !== null ? 1 : 0);
+};
+
+const getAutoSnapPointIndex = (
+	snapPoints: number[],
+	resolvedAutoSnap: number,
+) => {
+	"worklet";
+	let index = 0;
+
+	while (index < snapPoints.length && snapPoints[index] <= resolvedAutoSnap) {
+		index++;
+	}
+
+	return index;
+};
+
+const getResolvedSnapPointAt = (
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+	autoSnapPointIndex: number,
+	index: number,
+) => {
+	"worklet";
+	if (resolvedAutoSnap === null) {
+		return snapPoints[index];
+	}
+
+	if (index < autoSnapPointIndex) {
+		return snapPoints[index];
+	}
+
+	if (index === autoSnapPointIndex) {
+		return resolvedAutoSnap;
+	}
+
+	return snapPoints[index - 1];
+};
+
+const computeAnimatedSnapIndex = (
+	progress: number,
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+): number => {
+	"worklet";
+	const snapPointCount = getResolvedSnapPointCount(
+		snapPoints,
+		resolvedAutoSnap,
+	);
+
+	if (snapPointCount === 0) return -1;
+
+	const autoSnapPointIndex =
+		resolvedAutoSnap === null
+			? -1
+			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
+	const firstSnapPoint = getResolvedSnapPointAt(
+		snapPoints,
+		resolvedAutoSnap,
+		autoSnapPointIndex,
+		0,
+	);
+	const lastSnapPoint = getResolvedSnapPointAt(
+		snapPoints,
+		resolvedAutoSnap,
+		autoSnapPointIndex,
+		snapPointCount - 1,
+	);
 
-	for (let i = 0; i < snapPoints.length - 1; i++) {
-		if (progress <= snapPoints[i + 1]) {
+	if (progress <= firstSnapPoint) return 0;
+	if (progress >= lastSnapPoint) return snapPointCount - 1;
+
+	for (let i = 0; i < snapPointCount - 1; i++) {
+		const currentSnapPoint = getResolvedSnapPointAt(
+			snapPoints,
+			resolvedAutoSnap,
+			autoSnapPointIndex,
+			i,
+		);
+		const nextSnapPoint = getResolvedSnapPointAt(
+			snapPoints,
+			resolvedAutoSnap,
+			autoSnapPointIndex,
+			i + 1,
+		);
+
+		if (progress <= nextSnapPoint) {
 			const t =
-				(progress - snapPoints[i]) / (snapPoints[i + 1] - snapPoints[i]);
+				(progress - currentSnapPoint) / (nextSnapPoint - currentSnapPoint);
 			return i + t;
 		}
 	}
-	return snapPoints.length - 1;
+	return snapPointCount - 1;
+};
+
+const computeTargetSnapIndex = (
+	targetProgress: number,
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+): number => {
+	"worklet";
+	const snapPointCount = getResolvedSnapPointCount(
+		snapPoints,
+		resolvedAutoSnap,
+	);
+
+	if (snapPointCount === 0) return -1;
+
+	const autoSnapPointIndex =
+		resolvedAutoSnap === null
+			? -1
+			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
+	const firstSnapPoint = getResolvedSnapPointAt(
+		snapPoints,
+		resolvedAutoSnap,
+		autoSnapPointIndex,
+		0,
+	);
+
+	if (targetProgress <= 0 && Math.abs(firstSnapPoint) > EPSILON) {
+		return -1;
+	}
+
+	let nearestIndex = 0;
+	let smallestDistance = Math.abs(targetProgress - firstSnapPoint);
+
+	for (let i = 1; i < snapPointCount; i++) {
+		const snapPoint = getResolvedSnapPointAt(
+			snapPoints,
+			resolvedAutoSnap,
+			autoSnapPointIndex,
+			i,
+		);
+		const distance = Math.abs(targetProgress - snapPoint);
+
+		if (distance < smallestDistance) {
+			smallestDistance = distance;
+			nearestIndex = i;
+		}
+	}
+
+	return nearestIndex;
 };
 
-export const computeLogicallySettled = ({
-	progress,
-	targetProgress,
-	settled,
-	dragging,
-}: ComputeLogicallySettledParams) => {
+const computeLogicallySettledValue = (
+	progress: number,
+	targetProgress: number,
+	settled: number,
+	gestureActive: number,
+) => {
 	"worklet";
 
 	if (settled) {
 		return TRUE;
 	}
 
-	if (dragging) {
+	if (gestureActive) {
 		return FALSE;
 	}
 
@@ -84,6 +221,18 @@ export const computeLogicallySettled = ({
 		: FALSE;
 };
 
+export const computeLogicallySettled = (
+	params: ComputeLogicallySettledParams,
+) => {
+	"worklet";
+	return computeLogicallySettledValue(
+		params.progress,
+		params.targetProgress,
+		params.settled,
+		params.gestureActive,
+	);
+};
+
 export const hydrateTransitionState = (
 	s: BuiltState,
 	dimensions: Layout,
@@ -98,33 +247,50 @@ export const hydrateTransitionState = (
 	out.gesture.y = s.gesture.y.get();
 	out.gesture.normX = s.gesture.normX.get();
 	out.gesture.normY = s.gesture.normY.get();
+	out.gesture.scale = s.gesture.scale.get();
+	out.gesture.normScale = s.gesture.normScale.get();
+	out.gesture.focalX = s.gesture.focalX.get();
+	out.gesture.focalY = s.gesture.focalY.get();
+	out.gesture.raw.x = s.gesture.raw.x.get();
+	out.gesture.raw.y = s.gesture.raw.y.get();
+	out.gesture.raw.normX = s.gesture.raw.normX.get();
+	out.gesture.raw.normY = s.gesture.raw.normY.get();
+	out.gesture.raw.scale = s.gesture.raw.scale.get();
+	out.gesture.raw.normScale = s.gesture.raw.normScale.get();
 	out.gesture.dismissing = s.gesture.dismissing.get();
 	out.gesture.dragging = s.gesture.dragging.get();
+	out.gesture.settling = s.gesture.settling.get();
+	out.gesture.active = s.gesture.active.get();
 	out.gesture.direction = s.gesture.direction.get();
 
 	const isGestureSettling =
 		Math.abs(out.gesture.normX) > EPSILON ||
-		Math.abs(out.gesture.normY) > EPSILON;
+		Math.abs(out.gesture.normY) > EPSILON ||
+		Math.abs(out.gesture.normScale) > EPSILON;
+	const isGestureActive =
+		out.gesture.dragging || out.gesture.settling || isGestureSettling
+			? TRUE
+			: FALSE;
 
-	out.animating =
-		s.animating.get() || out.gesture.dragging || isGestureSettling ? 1 : 0;
+	out.animating = s.animating.get() || isGestureActive ? 1 : 0;
 
 	out.gesture.normalizedX = out.gesture.normX;
 	out.gesture.normalizedY = out.gesture.normY;
 	out.gesture.isDismissing = out.gesture.dismissing;
 	out.gesture.isDragging = out.gesture.dragging;
 
-	out.settled = computeSettled({
-		animating: out.animating,
-		dismissing: out.gesture.dismissing,
-		closing: out.closing,
-	});
-	out.logicallySettled = computeLogicallySettled({
-		progress: out.progress,
-		targetProgress: s.targetProgress.get(),
-		settled: out.settled,
-		dragging: out.gesture.dragging,
-	});
+	out.settled = computeSettled(
+		out.animating,
+		out.gesture.dismissing,
+		out.closing,
+	);
+	const targetProgress = s.targetProgress.get();
+	out.logicallySettled = computeLogicallySettledValue(
+		out.progress,
+		targetProgress,
+		out.settled,
+		isGestureActive,
+	);
 
 	if (s.settled.get() !== out.settled) {
 		s.settled.set(out.settled);
@@ -135,35 +301,35 @@ export const hydrateTransitionState = (
 	}
 
 	out.meta = s.meta;
+	out.options = s.options;
+	out.route = s.route;
 	out.layouts.screen.width = dimensions.width;
 	out.layouts.screen.height = dimensions.height;
+	out.layouts.navigationMaskEnabled = s.navigationMaskEnabled;
 
 	const content = s.measuredContentLayout.get();
 	if (content) {
-		if (!out.layouts.content) {
-			out.layouts.content = {
-				width: content.width,
-				height: content.height,
-			};
-		} else {
-			out.layouts.content.width = content.width;
-			out.layouts.content.height = content.height;
-		}
+		s.contentLayoutSlot.width = content.width;
+		s.contentLayoutSlot.height = content.height;
+		out.layouts.content = s.contentLayoutSlot;
 	} else {
 		out.layouts.content = undefined;
 	}
 
+	const autoSnapPoint = s.resolvedAutoSnapPoint.get();
 	const resolvedAutoSnap =
-		s.hasAutoSnapPoint && s.resolvedAutoSnapPoint.get() > 0
-			? s.resolvedAutoSnapPoint.get()
-			: null;
-
-	const resolvedSnapPoints =
-		resolvedAutoSnap !== null
-			? [...s.sortedNumericSnapPoints, resolvedAutoSnap].sort((a, b) => a - b)
-			: s.sortedNumericSnapPoints;
+		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
 
-	out.snapIndex = computeSnapIndex(out.progress, resolvedSnapPoints);
+	out.animatedSnapIndex = computeAnimatedSnapIndex(
+		out.progress,
+		s.sortedNumericSnapPoints,
+		resolvedAutoSnap,
+	);
+	out.snapIndex = computeTargetSnapIndex(
+		targetProgress,
+		s.sortedNumericSnapPoints,
+		resolvedAutoSnap,
+	);
 
 	return out;
 };

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

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
+	type DerivedValue,
 	type SharedValue,
-	useAnimatedReaction,
+	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -16,7 +17,7 @@ import type { BoundsAccessor } from "../../../../types/bounds.types";
 
 import { createBoundsAccessor } from "../../../../utils/bounds";
 import { useDescriptors } from "../../descriptors";
-import { derivations } from "./derivations";
+import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import { useBuildTransitionState } from "./use-build-transition-state";
@@ -25,6 +26,7 @@ export type ScreenInterpolatorFrame = Omit<ScreenInterpolationProps, "bounds">;
 
 interface ScreenAnimationPipeline {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
+	screenInterpolatorFrameUpdater: DerivedValue<number>;
 	nextInterpolator: ScreenStyleInterpolator | undefined;
 	currentInterpolator: ScreenStyleInterpolator | undefined;
 	boundsAccessor: BoundsAccessor;
@@ -33,20 +35,26 @@ interface ScreenAnimationPipeline {
 const createInitialBaseInterpolatorProps = (
 	dimensions: ScreenInterpolatorFrame["layouts"]["screen"],
 	insets: ScreenInterpolatorFrame["insets"],
-): ScreenInterpolatorFrame => ({
-	layouts: { screen: dimensions, navigationMaskEnabled: false },
-	insets,
-	previous: undefined,
-	current: DEFAULT_SCREEN_TRANSITION_STATE,
-	next: undefined,
-	progress: 0,
-	stackProgress: 0,
-	snapIndex: -1,
-	logicallySettled: 1,
-	focused: true,
-	active: DEFAULT_SCREEN_TRANSITION_STATE,
-	inactive: undefined,
-});
+): ScreenInterpolatorFrame => {
+	const current = {
+		...DEFAULT_SCREEN_TRANSITION_STATE,
+		layouts: { screen: dimensions, navigationMaskEnabled: false },
+	};
+
+	return {
+		layouts: current.layouts,
+		insets,
+		previous: undefined,
+		current,
+		next: undefined,
+		progress: 0,
+		stackProgress: 0,
+		logicallySettled: 1,
+		focused: true,
+		active: current,
+		inactive: undefined,
+	};
+};
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
@@ -60,9 +68,9 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		previous: prevDescriptor,
 	} = useDescriptors();
 
-	const currentAnimation = useBuildTransitionState(currDescriptor, "current");
-	const nextAnimation = useBuildTransitionState(nextDescriptor, "next");
-	const prevAnimation = useBuildTransitionState(prevDescriptor, "previous");
+	const currentAnimation = useBuildTransitionState(currDescriptor);
+	const nextAnimation = useBuildTransitionState(nextDescriptor);
+	const prevAnimation = useBuildTransitionState(prevDescriptor);
 
 	const currentRouteKey = currDescriptor?.route?.key;
 	const currentIndex = routeKeys.indexOf(currentRouteKey);
@@ -72,100 +80,70 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		!!nextRouteKey &&
 		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
 
-	const screenInterpolatorProps = useSharedValue<ScreenInterpolatorFrame>(
+	const screenInterpolatorProps = useSharedValue(
 		createInitialBaseInterpolatorProps(dimensions, insets),
 	);
 
-	const boundsAccessor = useMemo(() => {
-		return createBoundsAccessor(() => {
-			"worklet";
-			return screenInterpolatorProps.get();
-		});
-	}, [screenInterpolatorProps]);
+	const screenInterpolatorFrameRevisionState = useSharedValue({ value: 0 });
+	const screenInterpolatorFrameUpdater = useDerivedValue<number>(() => {
+		"worklet";
 
-	useAnimatedReaction(
-		() => {
+		screenInterpolatorProps.modify((frame) => {
 			"worklet";
-
-			const previous = prevAnimation
+			frame.previous = prevAnimation
 				? hydrateTransitionState(prevAnimation, dimensions)
 				: undefined;
 
-			const next =
+			frame.current = currentAnimation
+				? hydrateTransitionState(currentAnimation, dimensions)
+				: DEFAULT_SCREEN_TRANSITION_STATE;
+
+			frame.next =
 				nextAnimation && nextHasTransitions
 					? hydrateTransitionState(nextAnimation, dimensions)
 					: undefined;
 
-			const current = currentAnimation
-				? hydrateTransitionState(currentAnimation, dimensions)
-				: DEFAULT_SCREEN_TRANSITION_STATE;
+			frame.layouts = frame.current.layouts;
+			frame.insets = insets;
+
+			updateDerivations(frame);
+
+			frame.stackProgress =
+				currentIndex >= 0
+					? rootStackProgress.get() - currentIndex
+					: frame.progress;
+			frame.logicallySettled = frame.active.logicallySettled;
 
-			const { progress, ...helpers } = derivations({
-				previous,
-				current,
-				next,
-			});
-
-			const stackProgress =
-				currentIndex >= 0 ? rootStackProgress.get() - currentIndex : progress;
-
-			const focused = helpers.focused;
-			const active = helpers.active;
-			const inactive = helpers.inactive;
-			const snapIndex = current.snapIndex;
-			const logicallySettled = active.logicallySettled;
-
-			return {
-				previous,
-				current,
-				next,
-				progress,
-				stackProgress,
-				snapIndex,
-				logicallySettled,
-				focused,
-				active,
-				inactive,
-			};
-		},
-		({
-			previous,
-			current,
-			next,
-			progress,
-			stackProgress,
-			snapIndex,
-			logicallySettled,
-			focused,
-			active,
-			inactive,
-		}) => {
+			return frame;
+		}, false);
+
+		// MAINTAINER NOTE: We increment a revision counter instead of returning a
+		// new frame object so consumers can subscribe to in-place frame updates.
+		//
+		// Since we mutate the frame in place for performance reasons, readers must
+		// call `screenInterpolatorFrameUpdater.get()` before reading the frame.
+		screenInterpolatorFrameRevisionState.modify((revision) => {
 			"worklet";
+			revision.value += 1;
+			return revision;
+		}, false);
 
-			screenInterpolatorProps.modify((frame) => {
-				"worklet";
-				frame.layouts = current.layouts;
-				frame.insets = insets;
-				frame.previous = previous;
-				frame.current = current;
-				frame.next = next;
-				frame.progress = progress;
-				frame.stackProgress = stackProgress;
-				frame.snapIndex = snapIndex;
-				frame.logicallySettled = logicallySettled;
-				frame.focused = focused;
-				frame.active = active;
-				frame.inactive = inactive;
-				return frame;
-			});
-		},
-	);
+		return screenInterpolatorFrameRevisionState.get().value;
+	});
+
+	const boundsAccessor = useMemo(() => {
+		return createBoundsAccessor(() => {
+			"worklet";
+			return screenInterpolatorProps.get();
+		});
+	}, [screenInterpolatorProps]);
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
 	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;
 
 	return {
 		screenInterpolatorProps,
+		screenInterpolatorFrameUpdater,
 		nextInterpolator,
 		currentInterpolator,
 		boundsAccessor,