react-native-screen-transitions 3.5.2 → 3.6.0-alpha.1

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

@@ -0,0 +1,164 @@
+import { clamp } from "react-native-reanimated";
+import {
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_PROGRESS_MODE,
+	EPSILON,
+} from "../../../../../constants";
+import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
+import type {
+	GestureDirection,
+	GestureValues,
+} from "../../../../../types/gesture.types";
+import { resolveGestureProgressModeFromOptions } from "../../../../../utils/gesture-progress-mode";
+import {
+	getPanActivationDirections,
+	getPanSnapAxisConfigForDirection,
+	getPanSnapAxisDirections,
+	getPinchGestureDirections,
+	getSnapPinchDirectionConfig,
+	isResolvedPanGestureDirection,
+} from "../../../gestures/shared/directions";
+import type { SnapBounds } from "./types";
+
+const resolvePanGestureDrivenProgress = (
+	baseProgress: number,
+	gesture: GestureValues,
+	gestureDirection: GestureDirection | GestureDirection[],
+	hasSnapPoints: boolean,
+	snapBounds: SnapBounds | null,
+) => {
+	"worklet";
+
+	if (hasSnapPoints) {
+		const activeGesture = gesture.active;
+		const activeAxis = isResolvedPanGestureDirection(activeGesture)
+			? getPanSnapAxisConfigForDirection(
+					getPanSnapAxisDirections(gestureDirection),
+					activeGesture,
+				)
+			: null;
+
+		if (!activeAxis || !snapBounds) {
+			return baseProgress;
+		}
+
+		const axisValue =
+			activeAxis.axis === "horizontal" ? gesture.normX : gesture.normY;
+		const progressDelta = activeAxis.config.progressSign * axisValue;
+
+		return clamp(baseProgress + progressDelta, snapBounds.min, snapBounds.max);
+	}
+
+	const directions = getPanActivationDirections({
+		gestureDirection,
+		hasSnapPoints: false,
+	});
+	let progressOffset = 0;
+
+	if (directions.horizontal && gesture.normX > 0) {
+		progressOffset = Math.max(progressOffset, gesture.normX);
+	}
+
+	if (directions.horizontalInverted && gesture.normX < 0) {
+		progressOffset = Math.max(progressOffset, -gesture.normX);
+	}
+
+	if (directions.vertical && gesture.normY > 0) {
+		progressOffset = Math.max(progressOffset, gesture.normY);
+	}
+
+	if (directions.verticalInverted && gesture.normY < 0) {
+		progressOffset = Math.max(progressOffset, -gesture.normY);
+	}
+
+	return clamp(baseProgress - progressOffset, 0, baseProgress);
+};
+
+const resolvePinchGestureDrivenProgress = (
+	baseProgress: number,
+	gesture: GestureValues,
+	gestureDirection: GestureDirection | GestureDirection[],
+	hasSnapPoints: boolean,
+	snapBounds: SnapBounds | null,
+) => {
+	"worklet";
+	const pinchDirection =
+		gesture.normScale < 0
+			? "pinch-in"
+			: gesture.normScale > 0
+				? "pinch-out"
+				: null;
+
+	if (!pinchDirection) {
+		return baseProgress;
+	}
+
+	if (hasSnapPoints) {
+		const snapDirections = getSnapPinchDirectionConfig(gestureDirection);
+		if (!snapDirections || !snapBounds) {
+			return baseProgress;
+		}
+
+		const progressDelta =
+			snapDirections.collapse === pinchDirection
+				? -Math.abs(gesture.normScale)
+				: Math.abs(gesture.normScale);
+
+		return clamp(baseProgress + progressDelta, snapBounds.min, snapBounds.max);
+	}
+
+	const pinchDirections = getPinchGestureDirections(gestureDirection);
+	if (!pinchDirections.includes(pinchDirection)) {
+		return baseProgress;
+	}
+
+	return clamp(baseProgress - Math.abs(gesture.normScale), 0, baseProgress);
+};
+
+export const resolveGestureDrivenProgress = (
+	baseProgress: number,
+	gesture: GestureValues,
+	options: ScreenTransitionOptions,
+	effectiveOptions: ScreenTransitionOptions | undefined,
+	snapBounds: SnapBounds | null,
+) => {
+	"worklet";
+	const gestureProgressMode = resolveGestureProgressModeFromOptions(
+		effectiveOptions,
+		options,
+		DEFAULT_GESTURE_PROGRESS_MODE,
+	);
+
+	if (gestureProgressMode === "freeform") {
+		return baseProgress;
+	}
+
+	const gestureDirection =
+		effectiveOptions?.gestureDirection ??
+		options.gestureDirection ??
+		DEFAULT_GESTURE_DIRECTION;
+
+	const hasSnapPoints = snapBounds !== null;
+
+	if (
+		gesture.active === "pinch-in" ||
+		gesture.active === "pinch-out" ||
+		Math.abs(gesture.normScale) > EPSILON
+	) {
+		return resolvePinchGestureDrivenProgress(
+			baseProgress,
+			gesture,
+			gestureDirection,
+			hasSnapPoints,
+			snapBounds,
+		);
+	}
+
+	return resolvePanGestureDrivenProgress(
+		baseProgress,
+		gesture,
+		gestureDirection,
+		hasSnapPoints,
+		snapBounds,
+	);
+};

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

@@ -0,0 +1,160 @@
+import {
+	EPSILON,
+	LOGICAL_SETTLE_PROGRESS_THRESHOLD,
+	LOGICAL_SETTLE_REQUIRED_FRAMES,
+} from "../../../../../constants";
+import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
+import type { Layout } from "../../../../../types/screen.types";
+import { resolveGestureDrivenProgress } from "./gesture-progress";
+import {
+	computeLogicallySettled,
+	computeNextLogicalSettleFrameCount,
+	computeSettled,
+} from "./settle";
+import {
+	computeAnimatedSnapIndex,
+	computeTargetSnapIndex,
+	getResolvedSnapBounds,
+} from "./snap-points";
+import type { BuiltState } from "./types";
+
+export { computeLogicallySettled } from "./settle";
+
+const LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD =
+	LOGICAL_SETTLE_PROGRESS_THRESHOLD * 10;
+
+export const hydrateTransitionState = (
+	s: BuiltState,
+	dimensions: Layout,
+	effectiveOptions?: ScreenTransitionOptions,
+) => {
+	"worklet";
+	const out = s.unwrapped;
+	const baseProgress = s.progress.get();
+	out.willAnimate = s.willAnimate.get();
+	out.closing = s.closing.get();
+	out.entering = s.entering.get();
+	out.gesture.x = s.gesture.x.get();
+	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();
+	out.progress = resolveGestureDrivenProgress(
+		baseProgress,
+		out.gesture,
+		s.options,
+		effectiveOptions,
+		getResolvedSnapBounds(
+			s.sortedNumericSnapPoints,
+			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
+		),
+	);
+
+	const hasResidualGestureValues =
+		Math.abs(out.gesture.normX) > EPSILON ||
+		Math.abs(out.gesture.normY) > EPSILON ||
+		Math.abs(out.gesture.normScale) > EPSILON;
+
+	const isGestureActive =
+		out.gesture.dragging ||
+		out.gesture.settling ||
+		(!out.gesture.dismissing && hasResidualGestureValues)
+			? 1
+			: 0;
+
+	const isProgressAnimating = s.progressAnimating.get();
+
+	out.animating = isProgressAnimating || 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(
+		out.animating,
+		out.gesture.dismissing,
+		out.closing,
+	);
+	const targetProgress = s.targetProgress.get();
+	const logicalSettleFrameCount = s.logicalSettleFrameCount.get();
+	const nextLogicalSettleFrameCount = computeNextLogicalSettleFrameCount({
+		progress: out.progress,
+		targetProgress,
+		frameCount: logicalSettleFrameCount,
+	});
+
+	if (nextLogicalSettleFrameCount !== logicalSettleFrameCount) {
+		s.logicalSettleFrameCount.set(nextLogicalSettleFrameCount);
+	}
+
+	const progressDistanceFromTarget = Math.abs(out.progress - targetProgress);
+	const computedLogicallySettled =
+		computeLogicallySettled({
+			progress: out.progress,
+			targetProgress,
+			frameCount: nextLogicalSettleFrameCount,
+		}) && !isGestureActive;
+
+	const wasLogicallySettled =
+		out.logicallySettled &&
+		logicalSettleFrameCount >= LOGICAL_SETTLE_REQUIRED_FRAMES;
+
+	const shouldPreserveLogicalSettle =
+		wasLogicallySettled &&
+		!isProgressAnimating &&
+		!isGestureActive &&
+		progressDistanceFromTarget <= LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD;
+
+	out.logicallySettled =
+		computedLogicallySettled || shouldPreserveLogicalSettle ? 1 : 0;
+
+	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) {
+		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 && autoSnapPoint > 0 ? autoSnapPoint : null;
+
+	out.animatedSnapIndex = computeAnimatedSnapIndex(
+		out.progress,
+		s.sortedNumericSnapPoints,
+		resolvedAutoSnap,
+	);
+
+	out.snapIndex = computeTargetSnapIndex(
+		targetProgress,
+		s.sortedNumericSnapPoints,
+		resolvedAutoSnap,
+	);
+
+	return out;
+};

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

@@ -0,0 +1,41 @@
+import {
+	FALSE,
+	LOGICAL_SETTLE_PROGRESS_THRESHOLD,
+	LOGICAL_SETTLE_REQUIRED_FRAMES,
+	TRUE,
+} from "../../../../../constants";
+import type { ComputeLogicallySettledParams } from "./types";
+
+export const computeSettled = (
+	animating: number,
+	dismissing: number,
+	closing: number,
+) => {
+	"worklet";
+	return animating || dismissing || closing ? FALSE : TRUE;
+};
+
+export const computeLogicallySettled = (
+	params: ComputeLogicallySettledParams,
+) => {
+	"worklet";
+	return Math.abs(params.progress - params.targetProgress) <=
+		LOGICAL_SETTLE_PROGRESS_THRESHOLD &&
+		params.frameCount >= LOGICAL_SETTLE_REQUIRED_FRAMES
+		? TRUE
+		: FALSE;
+};
+
+export const computeNextLogicalSettleFrameCount = (
+	params: ComputeLogicallySettledParams,
+) => {
+	"worklet";
+	if (
+		Math.abs(params.progress - params.targetProgress) >
+		LOGICAL_SETTLE_PROGRESS_THRESHOLD
+	) {
+		return 0;
+	}
+
+	return Math.min(params.frameCount + 1, LOGICAL_SETTLE_REQUIRED_FRAMES);
+};

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

@@ -0,0 +1,188 @@
+import { EPSILON } from "../../../../../constants";
+import type { SnapBounds } from "./types";
+
+const getResolvedSnapPointCount = (
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+) => {
+	"worklet";
+	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];
+};
+
+export const getResolvedSnapBounds = (
+	snapPoints: number[],
+	resolvedAutoSnap: number | null,
+): SnapBounds | null => {
+	"worklet";
+	const snapPointCount = getResolvedSnapPointCount(
+		snapPoints,
+		resolvedAutoSnap,
+	);
+
+	if (snapPointCount === 0) {
+		return null;
+	}
+
+	const autoSnapPointIndex =
+		resolvedAutoSnap === null
+			? -1
+			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
+	const firstSnapPoint = getResolvedSnapPointAt(
+		snapPoints,
+		resolvedAutoSnap,
+		autoSnapPointIndex,
+		0,
+	);
+	const lastSnapPoint = getResolvedSnapPointAt(
+		snapPoints,
+		resolvedAutoSnap,
+		autoSnapPointIndex,
+		snapPointCount - 1,
+	);
+
+	return {
+		min: Math.min(0, firstSnapPoint),
+		max: lastSnapPoint,
+	};
+};
+
+export 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,
+	);
+
+	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 - currentSnapPoint) / (nextSnapPoint - currentSnapPoint);
+			return i + t;
+		}
+	}
+	return snapPointCount - 1;
+};
+
+export 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;
+};

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

@@ -0,0 +1,40 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { GestureStoreMap } from "../../../../../stores/gesture.store";
+import type {
+	ScreenTransitionOptions,
+	ScreenTransitionState,
+} from "../../../../../types/animation.types";
+import type { Layout } from "../../../../../types/screen.types";
+import type { BaseStackRoute } from "../../../../../types/stack.types";
+
+export type BuiltState = {
+	progress: SharedValue<number>;
+	willAnimate: SharedValue<number>;
+	closing: SharedValue<number>;
+	progressAnimating: SharedValue<number>;
+	entering: SharedValue<number>;
+	gesture: GestureStoreMap;
+	route: BaseStackRoute;
+	meta?: Record<string, unknown>;
+	options: ScreenTransitionOptions;
+	navigationMaskEnabled: boolean;
+	targetProgress: SharedValue<number>;
+	logicalSettleFrameCount: SharedValue<number>;
+	resolvedAutoSnapPoint: SharedValue<number>;
+	measuredContentLayout: SharedValue<Layout | null>;
+	contentLayoutSlot: Layout;
+	hasAutoSnapPoint: boolean;
+	sortedNumericSnapPoints: number[];
+	unwrapped: ScreenTransitionState;
+};
+
+export type ComputeLogicallySettledParams = {
+	progress: number;
+	targetProgress: number;
+	frameCount: number;
+};
+
+export type SnapBounds = {
+	min: number;
+	max: number;
+};