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

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

@@ -0,0 +1,158 @@
+import { useMemo } from "react";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionTarget,
+} from "../../../../../types/animation.types";
+import { createBoundsAccessor } from "../../../../../utils/bounds";
+import { useScreenAnimationContext } from "../../animation.provider";
+import type {
+	ScreenAnimationDescendantSources,
+	ScreenAnimationSource,
+	ScreenAnimationTransitionSource,
+} from "../../types";
+
+type TransitionSourceIndex = number;
+
+export type TransitionAccessorSource = ScreenAnimationTransitionSource;
+
+const resolveTargetIndex = (
+	target: ScreenTransitionTarget | undefined,
+	currentIndex: TransitionSourceIndex,
+	sourceCount: number,
+): TransitionSourceIndex => {
+	"worklet";
+	if (sourceCount <= 0) return -1;
+
+	if (
+		target !== undefined &&
+		(typeof target !== "object" || target === null || !("depth" in target))
+	) {
+		return -1;
+	}
+
+	const depth = target?.depth ?? 0;
+	if (!Number.isInteger(depth)) return -1;
+
+	const resolvedIndex = currentIndex + depth;
+	return resolvedIndex >= 0 && resolvedIndex < sourceCount ? resolvedIndex : -1;
+};
+
+export const createTransitionAccessor = (
+	sources: readonly TransitionAccessorSource[],
+	originIndex = 0,
+	descendantSources?: ScreenAnimationDescendantSources,
+) => {
+	"worklet";
+
+	const getSources = (): TransitionAccessorSource[] => {
+		"worklet";
+		if (!descendantSources) {
+			return [...sources];
+		}
+
+		const descendants = descendantSources.get();
+		if (descendants.length === 0) {
+			return [...sources];
+		}
+
+		return [...sources, ...descendants.map(({ source }) => source)];
+	};
+
+	const buildScope = (
+		sourceIndex: TransitionSourceIndex,
+	): ScreenInterpolationProps | null => {
+		"worklet";
+		const currentSources = getSources();
+		const source = currentSources[sourceIndex];
+		if (!source) return null;
+
+		source.screenInterpolatorPropsRevision.get();
+		const frame = source.screenInterpolatorProps.get();
+
+		return {
+			...frame,
+			bounds: source.boundsAccessor,
+			transition: (target?: ScreenTransitionTarget) => {
+				"worklet";
+				const targetIndex = resolveTargetIndex(
+					target,
+					sourceIndex,
+					currentSources.length,
+				);
+
+				if (targetIndex === -1) {
+					return null;
+				}
+
+				return buildScope(targetIndex);
+			},
+		};
+	};
+
+	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
+		"worklet";
+		const currentSources = getSources();
+		const targetIndex = resolveTargetIndex(
+			target,
+			originIndex,
+			currentSources.length,
+		);
+		if (targetIndex === -1) {
+			return null;
+		}
+
+		return buildScope(targetIndex);
+	};
+};
+
+const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
+	"worklet";
+	return createBoundsAccessor(() => {
+		"worklet";
+		return source.screenInterpolatorProps.get();
+	});
+};
+
+export const useBuildTransitionAccessor = () => {
+	const {
+		screenInterpolatorProps,
+		screenInterpolatorPropsRevision,
+		ancestorScreenAnimationSources,
+		descendantScreenAnimationSources,
+	} = useScreenAnimationContext();
+
+	return useMemo(() => {
+		const selfSource = {
+			screenInterpolatorProps,
+			screenInterpolatorPropsRevision,
+		};
+
+		const ancestorTransitionSources = ancestorScreenAnimationSources.map(
+			(source) => ({
+				...source,
+				boundsAccessor: buildSourceBoundsAccessor(source),
+			}),
+		);
+
+		const selfTransitionSource = {
+			...selfSource,
+			boundsAccessor: buildSourceBoundsAccessor(selfSource),
+		};
+
+		const transitionSources: TransitionAccessorSource[] = [
+			...[...ancestorTransitionSources].reverse(),
+			selfTransitionSource,
+		];
+
+		return createTransitionAccessor(
+			transitionSources,
+			ancestorTransitionSources.length,
+			descendantScreenAnimationSources,
+		);
+	}, [
+		screenInterpolatorProps,
+		screenInterpolatorPropsRevision,
+		ancestorScreenAnimationSources,
+		descendantScreenAnimationSources,
+	]);
+};

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

@@ -4,6 +4,10 @@ import type {
 	ScreenTransitionConfig,
 	ScreenTransitionOptions,
 } from "../../../../types";
+import {
+	gestureProgressModeDrivesProgress,
+	resolveGestureProgressMode,
+} from "../../../../utils/gesture-progress-mode";
 import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
 
 const cloneGestureDirection = (
@@ -23,6 +27,15 @@ export const buildScreenTransitionOptions = (
 	const hasSheetScrollGestureBehavior =
 		options.sheetScrollGestureBehavior !== undefined ||
 		options.expandViaScrollView !== undefined;
+	const hasGestureProgressMode =
+		options.gestureProgressMode !== undefined ||
+		options.gestureDrivesProgress !== undefined;
+	const gestureProgressMode = hasGestureProgressMode
+		? resolveGestureProgressMode({
+				gestureProgressMode: options.gestureProgressMode,
+				gestureDrivesProgress: options.gestureDrivesProgress,
+			})
+		: undefined;
 
 	return {
 		gestureEnabled: options.gestureEnabled,
@@ -34,7 +47,10 @@ export const buildScreenTransitionOptions = (
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
 		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
 		gestureResponseDistance: options.gestureResponseDistance,
-		gestureDrivesProgress: options.gestureDrivesProgress,
+		gestureProgressMode,
+		gestureDrivesProgress: gestureProgressMode
+			? gestureProgressModeDrivesProgress(gestureProgressMode)
+			: undefined,
 		gestureActivationArea: cloneGestureActivationArea(
 			options.gestureActivationArea,
 		),

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);
+};