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

package/src/shared/providers/screen/gestures/helpers/gesture-reset.ts

@@ -0,0 +1,158 @@
+import type { SharedValue } from "react-native-reanimated";
+import { EPSILON, FALSE, TRUE } from "../../../../constants";
+import type { GestureStoreMap } from "../../../../stores/gesture.store";
+import type { AnimationConfig } from "../../../../types/animation.types";
+import { animate } from "../../../../utils/animation/animate";
+
+interface ResetGestureValuesProps {
+	spec?: AnimationConfig;
+	gestures: GestureStoreMap;
+	shouldDismiss: boolean;
+	velocityX?: number;
+	velocityY?: number;
+	velocityNormX?: number;
+	velocityNormY?: number;
+}
+
+const getGestureResetSpec = (
+	spec?: AnimationConfig,
+	velocity?: number,
+): AnimationConfig | undefined => {
+	"worklet";
+
+	const isSpring =
+		typeof spec === "object" && !("duration" in spec) && !("easing" in spec);
+
+	if (!isSpring) {
+		return spec;
+	}
+
+	const { velocity: _velocity, ...resetSpec } = spec as AnimationConfig & {
+		velocity?: number;
+	};
+	return (
+		typeof velocity === "number" ? { ...resetSpec, velocity } : resetSpec
+	) as AnimationConfig;
+};
+
+const animateResetValue = (
+	value: SharedValue<number>,
+	toValue: number,
+	config: AnimationConfig | undefined,
+	onFinished: () => void,
+) => {
+	"worklet";
+	value.set(
+		animate(toValue, config, (finished) => {
+			"worklet";
+			if (finished) {
+				onFinished();
+			}
+		}),
+	);
+};
+
+const clearPanSettlingIfResting = (gestures: GestureStoreMap) => {
+	"worklet";
+
+	if (
+		gestures.dragging.get() ||
+		gestures.dismissing.get() ||
+		Math.abs(gestures.x.get()) > EPSILON ||
+		Math.abs(gestures.y.get()) > EPSILON ||
+		Math.abs(gestures.normX.get()) > EPSILON ||
+		Math.abs(gestures.normY.get()) > EPSILON
+	) {
+		return;
+	}
+
+	gestures.active.set(null);
+	gestures.direction.set(null);
+	gestures.settling.set(FALSE);
+};
+
+const clearPinchSettlingIfResting = (gestures: GestureStoreMap) => {
+	"worklet";
+
+	if (
+		gestures.dragging.get() ||
+		gestures.dismissing.get() ||
+		Math.abs(gestures.scale.get() - 1) > EPSILON ||
+		Math.abs(gestures.normScale.get()) > EPSILON
+	) {
+		return;
+	}
+
+	gestures.focalX.set(0);
+	gestures.focalY.set(0);
+	gestures.active.set(null);
+	gestures.direction.set(null);
+	gestures.settling.set(FALSE);
+};
+
+export const resetGestureValues = ({
+	spec,
+	gestures,
+	shouldDismiss,
+	velocityX,
+	velocityY,
+	velocityNormX,
+	velocityNormY,
+}: ResetGestureValuesProps) => {
+	"worklet";
+
+	gestures.raw.x.set(0);
+	gestures.raw.y.set(0);
+	gestures.raw.normX.set(0);
+	gestures.raw.normY.set(0);
+	gestures.dragging.set(FALSE);
+	gestures.dismissing.set(shouldDismiss ? TRUE : FALSE);
+	gestures.settling.set(shouldDismiss ? FALSE : TRUE);
+
+	animateResetValue(gestures.x, 0, getGestureResetSpec(spec, velocityX), () =>
+		clearPanSettlingIfResting(gestures),
+	);
+	animateResetValue(gestures.y, 0, getGestureResetSpec(spec, velocityY), () =>
+		clearPanSettlingIfResting(gestures),
+	);
+	animateResetValue(
+		gestures.normX,
+		0,
+		getGestureResetSpec(spec, velocityNormX),
+		() => clearPanSettlingIfResting(gestures),
+	);
+	animateResetValue(
+		gestures.normY,
+		0,
+		getGestureResetSpec(spec, velocityNormY),
+		() => clearPanSettlingIfResting(gestures),
+	);
+};
+
+interface ResetPinchGestureValuesProps {
+	spec?: AnimationConfig;
+	gestures: GestureStoreMap;
+	shouldDismiss: boolean;
+}
+
+export const resetPinchGestureValues = ({
+	spec,
+	gestures,
+	shouldDismiss,
+}: ResetPinchGestureValuesProps) => {
+	"worklet";
+	const resetSpec = getGestureResetSpec(spec);
+
+	gestures.raw.scale.set(1);
+	gestures.raw.normScale.set(0);
+	gestures.dragging.set(FALSE);
+	gestures.dismissing.set(shouldDismiss ? TRUE : FALSE);
+	gestures.settling.set(shouldDismiss ? FALSE : TRUE);
+
+	animateResetValue(gestures.scale, 1, resetSpec, () =>
+		clearPinchSettlingIfResting(gestures),
+	);
+	animateResetValue(gestures.normScale, 0, resetSpec, () =>
+		clearPinchSettlingIfResting(gestures),
+	);
+};

package/src/shared/providers/{gestures → screen/gestures}/helpers/gesture-snap-points.ts

@@ -8,7 +8,6 @@ interface ResolveRuntimeSnapPointsProps {
 }
 
 interface ResolvedRuntimeSnapPointsResult {
-	resolvedAutoSnapPoint: number | null;
 	resolvedSnapPoints: number[];
 	resolvedMinSnapPoint: number;
 	resolvedMaxSnapPoint: number;
@@ -43,7 +42,6 @@ export const resolveRuntimeSnapPoints = ({
 			: minSnapPoint;
 
 	return {
-		resolvedAutoSnapPoint: nextResolvedAutoSnapPoint,
 		resolvedSnapPoints,
 		resolvedMinSnapPoint,
 		resolvedMaxSnapPoint:

package/src/shared/providers/{gestures → screen/gestures}/helpers/gesture-targets.ts

@@ -1,14 +1,7 @@
-import { DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT } from "../../../constants";
-import type { GestureDirections } from "../../../types/gesture.types";
-import { sanitizeSnapPoints } from "../../../utils/gesture/validate-snap-points";
-import { shouldDismissFromTranslationAndVelocity } from "./gesture-physics";
-
-interface GetAxisThresholdProps {
-	translation: number;
-	velocity: number;
-	screenSize: number;
-	gestureVelocityImpact: number;
-}
+import { DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT } from "../../../../constants";
+import type { GestureDirections } from "../../../../types/gesture.types";
+import { shouldDismissFromProjection } from "./gesture-physics";
+import { sanitizeSnapPoints } from "./validate-snap-points";
 
 interface DetermineDismissalProps {
 	event: {
@@ -44,21 +37,6 @@ interface DetermineSnapTargetResult {
 	shouldDismiss: boolean;
 }
 
-const getAxisThreshold = ({
-	translation,
-	velocity,
-	screenSize,
-	gestureVelocityImpact,
-}: GetAxisThresholdProps) => {
-	"worklet";
-	return shouldDismissFromTranslationAndVelocity(
-		translation,
-		velocity,
-		screenSize,
-		gestureVelocityImpact,
-	);
-};
-
 export const determineDismissal = ({
 	event,
 	directions,
@@ -73,12 +51,12 @@ export const determineDismissal = ({
 		(directions.vertical && event.translationY > 0) ||
 		(directions.verticalInverted && event.translationY < 0)
 	) {
-		const dismiss = getAxisThreshold({
-			translation: event.translationY,
-			velocity: event.velocityY,
-			screenSize: dimensions.height,
+		const dismiss = shouldDismissFromProjection(
+			event.translationY,
+			event.velocityY,
+			dimensions.height,
 			gestureVelocityImpact,
-		});
+		);
 		if (dismiss) shouldDismiss = true;
 	}
 
@@ -86,12 +64,12 @@ export const determineDismissal = ({
 		(directions.horizontal && event.translationX > 0) ||
 		(directions.horizontalInverted && event.translationX < 0)
 	) {
-		const dismiss = getAxisThreshold({
-			translation: event.translationX,
-			velocity: event.velocityX,
-			screenSize: dimensions.width,
+		const dismiss = shouldDismissFromProjection(
+			event.translationX,
+			event.velocityX,
+			dimensions.width,
 			gestureVelocityImpact,
-		});
+		);
 
 		if (dismiss) shouldDismiss = true;
 	}

package/src/shared/providers/screen/gestures/helpers/pan-phases.ts

@@ -0,0 +1,124 @@
+import { clamp } from "react-native-reanimated";
+import { EPSILON, FALSE, TRUE } from "../../../../constants";
+import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
+import { emit } from "../../../../utils/animation/emit";
+import type {
+	GestureDimensions,
+	PanGestureEvent,
+	PanGestureRuntime,
+	PanReleaseResult,
+	PanTrackState,
+} from "../types";
+import { normalizeGestureTranslation } from "./gesture-physics";
+import { resetGestureValues } from "./gesture-reset";
+
+export const startPanBase = (runtime: PanGestureRuntime) => {
+	"worklet";
+	const {
+		stores: { gestures, animations },
+		gestureProgressBaseline,
+	} = runtime;
+
+	const wasSettling = gestures.settling.get();
+	const hasResidualGesture =
+		Math.abs(gestures.normX.get()) > EPSILON ||
+		Math.abs(gestures.normY.get()) > EPSILON;
+
+	if (!wasSettling || !hasResidualGesture) {
+		emit(animations.willAnimate, TRUE, FALSE);
+	}
+
+	gestures.dragging.set(TRUE);
+	gestures.dismissing.set(0);
+	gestures.settling.set(0);
+	gestures.x.set(0);
+	gestures.y.set(0);
+	gestures.normX.set(0);
+	gestures.normY.set(0);
+	gestures.raw.x.set(0);
+	gestures.raw.y.set(0);
+	gestures.raw.normX.set(0);
+	gestures.raw.normY.set(0);
+	gestureProgressBaseline.set(animations.progress.get());
+};
+
+export const trackPanGesture = (
+	event: PanGestureEvent,
+	rawEvent: PanGestureEvent,
+	gestures: PanGestureRuntime["stores"]["gestures"],
+	dimensions: GestureDimensions,
+): PanTrackState => {
+	"worklet";
+	const { translationX: x, translationY: y } = event;
+	const { translationX: rawX, translationY: rawY } = rawEvent;
+	const { width, height } = dimensions;
+
+	const normX = clamp(normalizeGestureTranslation(x, width), -1, 1);
+	const normY = clamp(normalizeGestureTranslation(y, height), -1, 1);
+	const rawNormX = clamp(normalizeGestureTranslation(rawX, width), -1, 1);
+	const rawNormY = clamp(normalizeGestureTranslation(rawY, height), -1, 1);
+
+	gestures.x.set(x);
+	gestures.y.set(y);
+	gestures.normX.set(normX);
+	gestures.normY.set(normY);
+	gestures.raw.x.set(rawX);
+	gestures.raw.y.set(rawY);
+	gestures.raw.normX.set(rawNormX);
+	gestures.raw.normY.set(rawNormY);
+
+	return {
+		x,
+		y,
+		normX,
+		normY,
+	};
+};
+
+export const finalizePanRelease = (
+	release: PanReleaseResult,
+	runtime: PanGestureRuntime,
+	dismissScreen: (() => void) | undefined,
+	dimensions: GestureDimensions,
+	rawEvent: PanGestureEvent,
+) => {
+	"worklet";
+	const {
+		policy,
+		stores: { gestures, animations, system },
+	} = runtime;
+	const { width, height } = dimensions;
+	const releaseVelocityScale = Math.max(0, policy.gestureReleaseVelocityScale);
+	const resetVelocityX = rawEvent.velocityX * releaseVelocityScale;
+	const resetVelocityY = rawEvent.velocityY * releaseVelocityScale;
+
+	resetGestureValues({
+		spec: release.resetSpec,
+		gestures,
+		shouldDismiss: release.shouldDismiss,
+		velocityX: resetVelocityX,
+		velocityY: resetVelocityY,
+		velocityNormX: resetVelocityX / Math.max(1, width),
+		velocityNormY: resetVelocityY / Math.max(1, height),
+	});
+
+	const progressAlreadyAtTarget =
+		Math.abs(animations.progress.get() - release.target) <= EPSILON;
+
+	if (!release.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(release.target);
+		animations.animating.set(FALSE);
+		return;
+	}
+
+	animateToProgress({
+		target: release.target,
+		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
+		spec: release.transitionSpec,
+		emitWillAnimate: false,
+		markEntering: false,
+		targetProgress: system.targetProgress,
+		animations,
+		initialVelocity: release.initialVelocity,
+	});
+};

package/src/shared/providers/screen/gestures/helpers/pinch-phases.ts

@@ -0,0 +1,98 @@
+import { clamp } from "react-native-reanimated";
+import { EPSILON, FALSE, TRUE } from "../../../../constants";
+import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
+import { emit } from "../../../../utils/animation/emit";
+import type {
+	PinchGestureEvent,
+	PinchGestureRuntime,
+	PinchReleaseResult,
+	PinchTrackState,
+} from "../types";
+import { normalizePinchScale } from "./gesture-physics";
+import { resetPinchGestureValues } from "./gesture-reset";
+
+export const startPinchBase = (
+	runtime: PinchGestureRuntime,
+	event: PinchGestureEvent,
+) => {
+	"worklet";
+	const {
+		stores: { gestures, animations },
+		gestureProgressBaseline,
+	} = runtime;
+
+	const wasSettling = gestures.settling.get();
+	const hasResidualGesture = Math.abs(gestures.normScale.get()) > EPSILON;
+
+	if (!wasSettling || !hasResidualGesture) {
+		emit(animations.willAnimate, TRUE, FALSE);
+	}
+
+	gestures.dragging.set(TRUE);
+	gestures.dismissing.set(0);
+	gestures.settling.set(0);
+	gestures.active.set(null);
+	gestures.direction.set(null);
+	gestures.scale.set(1);
+	gestures.normScale.set(0);
+	gestures.raw.scale.set(1);
+	gestures.raw.normScale.set(0);
+	gestures.focalX.set(event.focalX);
+	gestures.focalY.set(event.focalY);
+	gestureProgressBaseline.set(animations.progress.get());
+};
+
+export const trackPinchGesture = (
+	event: PinchGestureEvent,
+	rawEvent: PinchGestureEvent,
+	gestures: PinchGestureRuntime["stores"]["gestures"],
+): PinchTrackState => {
+	"worklet";
+	const normScale = clamp(normalizePinchScale(event.scale), -1, 1);
+	const scale = clamp(1 + normScale, 0, 2);
+	const rawNormScale = clamp(normalizePinchScale(rawEvent.scale), -1, 1);
+	const rawScale = clamp(1 + rawNormScale, 0, 2);
+
+	gestures.scale.set(scale);
+	gestures.normScale.set(normScale);
+	gestures.focalX.set(event.focalX);
+	gestures.focalY.set(event.focalY);
+	gestures.raw.scale.set(rawScale);
+	gestures.raw.normScale.set(rawNormScale);
+	gestures.active.set(
+		normScale < 0 ? "pinch-in" : normScale > 0 ? "pinch-out" : null,
+	);
+
+	return {
+		scale,
+		normScale,
+	};
+};
+
+export const finalizePinchRelease = (
+	release: PinchReleaseResult,
+	runtime: PinchGestureRuntime,
+	dismissScreen: (() => void) | undefined,
+) => {
+	"worklet";
+	const {
+		stores: { gestures, animations, system },
+	} = runtime;
+
+	resetPinchGestureValues({
+		spec: release.resetSpec,
+		gestures,
+		shouldDismiss: release.shouldDismiss,
+	});
+
+	animateToProgress({
+		target: release.target,
+		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
+		spec: release.transitionSpec,
+		emitWillAnimate: false,
+		markEntering: false,
+		animations,
+		targetProgress: system.targetProgress,
+		initialVelocity: release.initialVelocity,
+	});
+};

package/src/shared/providers/screen/gestures/helpers/resolve-can-track-gesture.ts

@@ -0,0 +1,23 @@
+export type GestureTrackingParticipationInput = {
+	isFirstKey: boolean;
+	canDismiss: boolean;
+	hasSnapPoints: boolean;
+	allowDisabledGestureTracking?: boolean;
+};
+
+export function resolveCanTrackGesture({
+	isFirstKey,
+	canDismiss,
+	hasSnapPoints,
+	allowDisabledGestureTracking,
+}: GestureTrackingParticipationInput) {
+	if (isFirstKey) {
+		return false;
+	}
+
+	if (allowDisabledGestureTracking) {
+		return true;
+	}
+
+	return canDismiss || hasSnapPoints;
+}

package/src/shared/providers/screen/gestures/helpers/runtime-options.ts

@@ -0,0 +1,159 @@
+import type { ScreenOptionsSnapshot } from "../../options";
+import type {
+	PanGesturePolicy,
+	PanGestureRuntime,
+	PinchGesturePolicy,
+	PinchGestureRuntime,
+} from "../types";
+import {
+	getPanActivationDirections,
+	getPanGestureDirections,
+	getPanSnapAxisDirections,
+	getPinchGestureDirections,
+	getSnapPinchDirectionConfig,
+} from "./gesture-directions";
+
+export const resolveRuntimeCanTrackGesture = (
+	runtime: PanGestureRuntime | PinchGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+) => {
+	"worklet";
+	const { participation } = runtime;
+
+	if (participation.isFirstKey) {
+		return false;
+	}
+
+	if (screenOptions.experimental_allowDisabledGestureTracking === true) {
+		return true;
+	}
+
+	const gestureEnabled = screenOptions.gestureEnabled;
+	if (gestureEnabled === true) {
+		return true;
+	}
+
+	if (gestureEnabled === false) {
+		return participation.effectiveSnapPoints.hasSnapPoints;
+	}
+
+	return participation.canTrackGesture;
+};
+
+export const resolveRuntimeCanDismiss = (
+	runtime: PanGestureRuntime | PinchGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+) => {
+	"worklet";
+	const { participation } = runtime;
+
+	if (participation.isFirstKey) {
+		return false;
+	}
+
+	const gestureEnabled = screenOptions.gestureEnabled;
+	if (gestureEnabled === false) {
+		return false;
+	}
+
+	if (gestureEnabled === true) {
+		return true;
+	}
+
+	return participation.canDismiss;
+};
+
+export const resolvePanRuntimePolicy = (
+	runtime: PanGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PanGesturePolicy => {
+	"worklet";
+	const { policy, participation } = runtime;
+	const gestureDirection = screenOptions.gestureDirection;
+	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
+
+	return {
+		...policy,
+		enabled: getPanGestureDirections(gestureDirection).length > 0,
+		gestureDirection,
+		panActivationDirections: getPanActivationDirections({
+			gestureDirection,
+			hasSnapPoints,
+		}),
+		snapAxisDirections: getPanSnapAxisDirections(gestureDirection),
+		gestureDrivesProgress: screenOptions.gestureDrivesProgress,
+		gestureSensitivity: screenOptions.gestureSensitivity,
+		gestureVelocityImpact: screenOptions.gestureVelocityImpact,
+		gestureSnapVelocityImpact: screenOptions.gestureSnapVelocityImpact,
+		gestureReleaseVelocityScale: screenOptions.gestureReleaseVelocityScale,
+		gestureResponseDistance: screenOptions.gestureResponseDistance,
+		gestureActivationArea: screenOptions.gestureActivationArea,
+		gestureSnapLocked: screenOptions.gestureSnapLocked,
+		sheetScrollGestureBehavior: screenOptions.sheetScrollGestureBehavior,
+	};
+};
+
+export const resolvePinchRuntimePolicy = (
+	runtime: PinchGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PinchGesturePolicy => {
+	"worklet";
+	const { policy, participation } = runtime;
+	const gestureDirection = screenOptions.gestureDirection;
+	const pinchDirections = getPinchGestureDirections(gestureDirection);
+	const snapDirections = participation.effectiveSnapPoints.hasSnapPoints
+		? getSnapPinchDirectionConfig(gestureDirection)
+		: null;
+	const pinchInEnabled = snapDirections
+		? true
+		: pinchDirections.includes("pinch-in");
+	const pinchOutEnabled = snapDirections
+		? true
+		: pinchDirections.includes("pinch-out");
+
+	return {
+		...policy,
+		enabled: pinchInEnabled || pinchOutEnabled,
+		gestureDirection,
+		snapDirections,
+		pinchInEnabled,
+		pinchOutEnabled,
+		gestureDrivesProgress: screenOptions.gestureDrivesProgress,
+		gestureSensitivity: screenOptions.gestureSensitivity,
+		gestureSnapVelocityImpact: screenOptions.gestureSnapVelocityImpact,
+		gestureReleaseVelocityScale: screenOptions.gestureReleaseVelocityScale,
+		gestureSnapLocked: screenOptions.gestureSnapLocked,
+	};
+};
+
+export const resolvePanRuntime = (
+	runtime: PanGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PanGestureRuntime => {
+	"worklet";
+	return {
+		...runtime,
+		participation: {
+			...runtime.participation,
+			canDismiss: resolveRuntimeCanDismiss(runtime, screenOptions),
+			canTrackGesture: resolveRuntimeCanTrackGesture(runtime, screenOptions),
+		},
+		policy: resolvePanRuntimePolicy(runtime, screenOptions),
+	};
+};
+
+export const resolvePinchRuntime = (
+	runtime: PinchGestureRuntime,
+	screenOptions: ScreenOptionsSnapshot,
+): PinchGestureRuntime => {
+	"worklet";
+	return {
+		...runtime,
+		participation: {
+			...runtime.participation,
+			canDismiss: resolveRuntimeCanDismiss(runtime, screenOptions),
+			canTrackGesture: resolveRuntimeCanTrackGesture(runtime, screenOptions),
+		},
+		policy: resolvePinchRuntimePolicy(runtime, screenOptions),
+	};
+};

package/src/shared/{utils/gesture → providers/screen/gestures/helpers}/validate-snap-points.ts

@@ -1,4 +1,4 @@
-import type { SnapPoint } from "../../types/screen.types";
+import type { SnapPoint } from "../../../../types/screen.types";
 
 /**
  * Filters snap points to only valid, finite numeric values.

package/src/shared/providers/screen/gestures/helpers/walk-gesture-ancestors.ts

@@ -0,0 +1,27 @@
+type GestureAncestorNode<T> = {
+	gestureContext: T | null;
+	isIsolated?: boolean;
+};
+
+/**
+ * Returns the gesture context chain, starting at `context`, then walking upward.
+ * When `isIsolated` is provided, the walk stops at a stack isolation boundary.
+ */
+export function walkGestureAncestors<T extends GestureAncestorNode<T>>(
+	context: T | null | undefined,
+	isIsolated?: boolean,
+): T[] {
+	const ancestors: T[] = [];
+	let ancestor = context ?? null;
+
+	while (ancestor) {
+		if (isIsolated !== undefined && ancestor.isIsolated !== isIsolated) {
+			break;
+		}
+
+		ancestors.push(ancestor);
+		ancestor = ancestor.gestureContext;
+	}
+
+	return ancestors;
+}