react-native-screen-transitions 4.0.0 → 4.1.0-beta.0

package/src/providers/screen/motion/gestures/pan/behavior/pan-lifecycle.ts

@@ -0,0 +1,167 @@
+import { clamp, type SharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { EPSILON, TRUE } from "../../../../../../constants";
+import { animateToProgress } from "../../../../../../utils/animation/animate-to-progress";
+import { emitMotionStart } from "../../../animation/emit-motion-start";
+import {
+	normalizeGestureTranslation,
+	resolveGestureVelocity,
+} from "../../shared/physics";
+import { snapshotGestureHandoff } from "../../shared/snapshot";
+import {
+	clearFocalPoint,
+	clearPanTrackingValues,
+	clearTransformTrackingValues,
+} from "../../shared/values";
+import type {
+	GestureCompositionOwner,
+	GestureDimensions,
+	PanGestureEvent,
+	PanGestureRuntime,
+	PanReleaseResult,
+	PanTrackState,
+} from "../../types";
+import { buildPanReleasePlan } from "./pan-release";
+import { resetPanGestureValues } from "./pan-reset";
+
+export const startPanBase = (runtime: PanGestureRuntime) => {
+	"worklet";
+	const {
+		stores: { gestures, animations },
+	} = runtime;
+
+	emitMotionStart(animations);
+
+	gestures.dragging.set(TRUE);
+	gestures.dismissing.set(0);
+	gestures.settling.set(0);
+	clearPanTrackingValues(gestures);
+	clearTransformTrackingValues(gestures);
+	clearFocalPoint(gestures);
+	gestures.internal.progressBaseline.set(animations.transitionProgress.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,
+		velocityX,
+		velocityY,
+	} = 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);
+	const velocity = resolveGestureVelocity(
+		velocityX / Math.max(1, width),
+		velocityY / Math.max(1, height),
+	);
+
+	gestures.x.set(x);
+	gestures.y.set(y);
+	gestures.normX.set(normX);
+	gestures.normY.set(normY);
+	gestures.internal.progressDeltaX.set(normX);
+	gestures.internal.progressDeltaY.set(normY);
+	gestures.velocity.set(velocity);
+	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,
+		velocity,
+	};
+};
+
+export const finalizePanRelease = (
+	release: PanReleaseResult,
+	runtime: PanGestureRuntime,
+	dimensions: GestureDimensions,
+	rawEvent: PanGestureEvent,
+	requestDismiss?: () => void,
+	gestureCompositionOwner?: SharedValue<GestureCompositionOwner>,
+) => {
+	"worklet";
+	const {
+		policy,
+		stores: { gestures, animations, system },
+	} = runtime;
+
+	const canDriveRelease =
+		!gestureCompositionOwner || gestureCompositionOwner.get() === "pan";
+
+	const plan = buildPanReleasePlan(
+		canDriveRelease
+			? release
+			: {
+					target: animations.transitionProgress.get(),
+					shouldDismiss: false,
+					initialVelocity: 0,
+					transitionSpec: undefined,
+					resetSpec: policy.transitionSpec?.open,
+				},
+		runtime,
+		dimensions,
+		rawEvent,
+	);
+
+	if (typeof plan.commitProgress === "number") {
+		animations.transitionProgress.set(plan.commitProgress);
+		system.targetProgress.set(plan.commitProgress);
+	}
+
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - plan.target) <= EPSILON;
+
+	if (canDriveRelease && plan.shouldDismiss) {
+		snapshotGestureHandoff(gestures, {
+			velocity: plan.handoffVelocity,
+		});
+	}
+
+	resetPanGestureValues({
+		plan,
+		gestures,
+		animations,
+		completeMotion: !plan.shouldDismiss && progressAlreadyAtTarget,
+		updateLifecycle: canDriveRelease,
+	});
+
+	if (!canDriveRelease) {
+		return;
+	}
+
+	if (!plan.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(plan.target);
+		return;
+	}
+
+	animateToProgress({
+		target: plan.target,
+		spec: plan.transitionSpec,
+		emitWillAnimate: false,
+		markEntering: false,
+		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
+		animations,
+		initialVelocity: plan.progressVelocity,
+	});
+
+	if (plan.shouldDismiss && requestDismiss) {
+		scheduleOnRN(requestDismiss);
+	}
+};

package/src/providers/screen/motion/gestures/pan/behavior/pan-reset.ts

@@ -0,0 +1,88 @@
+import { FALSE, TRUE } from "../../../../../../constants";
+import type {
+	MotionAnimationValues,
+	MotionGestureValues,
+} from "../../../types";
+import { animateMany } from "../../shared/reset";
+import {
+	clearPanProgressDeltaValues,
+	clearRawPanValues,
+} from "../../shared/values";
+import type { PanReleasePlan } from "../../types";
+
+interface ResetPanGestureValuesProps {
+	plan: PanReleasePlan;
+	gestures: MotionGestureValues;
+	animations?: MotionAnimationValues;
+	completeMotion?: boolean;
+	updateLifecycle?: boolean;
+}
+
+export const resetPanGestureValues = ({
+	plan,
+	gestures,
+	animations,
+	completeMotion = false,
+	updateLifecycle = true,
+}: ResetPanGestureValuesProps) => {
+	"worklet";
+	const finishPanReset = () => {
+		"worklet";
+		if (!updateLifecycle || plan.shouldDismiss) {
+			return;
+		}
+
+		gestures.initiator.set(null);
+		gestures.settling.set(FALSE);
+		if (completeMotion) {
+			animations?.progressAnimating.set(FALSE);
+			animations?.progressSettled.set(TRUE);
+		}
+	};
+
+	if (animations && updateLifecycle && !plan.shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
+	clearRawPanValues(gestures);
+
+	if (updateLifecycle) {
+		gestures.dragging.set(FALSE);
+		gestures.dismissing.set(plan.shouldDismiss ? TRUE : FALSE);
+		gestures.settling.set(plan.shouldDismiss ? FALSE : TRUE);
+	}
+
+	gestures.velocity.set(0);
+
+	const progressDeltaWasCommitted = typeof plan.commitProgress === "number";
+
+	if (progressDeltaWasCommitted) {
+		clearPanProgressDeltaValues(gestures);
+	}
+
+	animateMany(
+		[
+			{ value: gestures.x, toValue: 0, velocity: plan.resetVelocityX },
+			{ value: gestures.y, toValue: 0, velocity: plan.resetVelocityY },
+			{ value: gestures.normX, toValue: 0, velocity: plan.resetVelocityNormX },
+			{ value: gestures.normY, toValue: 0, velocity: plan.resetVelocityNormY },
+			...(progressDeltaWasCommitted
+				? []
+				: [
+						{
+							value: gestures.internal.progressDeltaX,
+							toValue: 0,
+							velocity: plan.resetVelocityNormX,
+						},
+						{
+							value: gestures.internal.progressDeltaY,
+							toValue: 0,
+							velocity: plan.resetVelocityNormY,
+						},
+					]),
+		],
+		plan.resetSpec,
+		finishPanReset,
+	);
+};

package/src/providers/screen/motion/gestures/pan/behavior/use-pan-behavior.ts

@@ -0,0 +1,138 @@
+import { useCallback, useMemo } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { Direction } from "../../../../../../types/ownership.types";
+import type { ScreenOptionsContextValue } from "../../../options";
+import { usePanGestureSensitivity } from "../../ownership/hooks/use-gesture-sensitivity";
+import { resolvePanRuntime } from "../../shared/runtime";
+import { clearPanTrackingValues } from "../../shared/values";
+import type {
+	GestureCompositionOwner,
+	GestureDimensions,
+	PanBehavior,
+	PanGestureEvent,
+	PanGestureRuntime,
+} from "../../types";
+import {
+	finalizePanRelease,
+	startPanBase,
+	trackPanGesture,
+} from "./pan-lifecycle";
+import {
+	primeSnapPanRelease,
+	resolvePanRelease,
+	resolveSnapPanRelease,
+} from "./pan-release";
+
+export const usePanBehavior = (
+	runtime: SharedValue<PanGestureRuntime>,
+	screenOptions: ScreenOptionsContextValue,
+	dimensions: GestureDimensions,
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
+	pendingDirection: SharedValue<Direction | null>,
+	requestDismiss?: () => void,
+): PanBehavior => {
+	const { withSensitivity, resetSensitivity } =
+		usePanGestureSensitivity(screenOptions);
+
+	const onStart = useCallback(() => {
+		"worklet";
+		const latestRuntime = resolvePanRuntime(runtime.get(), screenOptions.get());
+		if (gestureCompositionOwner.get() === "pinch") {
+			clearPanTrackingValues(latestRuntime.stores.gestures);
+			pendingDirection.set(null);
+			resetSensitivity();
+			return;
+		}
+
+		const direction = pendingDirection.get();
+		if (direction) {
+			latestRuntime.stores.gestures.initiator.set(direction);
+		}
+		pendingDirection.set(null);
+		gestureCompositionOwner.set("pan");
+
+		if (latestRuntime.participation.effectiveSnapPoints.hasSnapPoints) {
+			primeSnapPanRelease(latestRuntime);
+		}
+		startPanBase(latestRuntime);
+		resetSensitivity();
+	}, [
+		runtime,
+		screenOptions,
+		resetSensitivity,
+		gestureCompositionOwner,
+		pendingDirection,
+	]);
+
+	const onUpdate = useCallback(
+		(rawEvent: PanGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const event = withSensitivity(rawEvent);
+			trackPanGesture(
+				event,
+				rawEvent,
+				latestRuntime.stores.gestures,
+				dimensions,
+			);
+		},
+		[runtime, screenOptions, dimensions, withSensitivity],
+	);
+
+	const onEnd = useCallback(
+		(rawEvent: PanGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const event = withSensitivity(rawEvent);
+
+			const release = !latestRuntime.policy.enabled
+				? {
+						target: latestRuntime.stores.animations.transitionProgress.get(),
+						shouldDismiss: false,
+						initialVelocity: 0,
+						transitionSpec: undefined,
+						resetSpec: latestRuntime.policy.transitionSpec?.open,
+					}
+				: latestRuntime.participation.effectiveSnapPoints.hasSnapPoints
+					? resolveSnapPanRelease(event, latestRuntime, dimensions)
+					: resolvePanRelease(event, latestRuntime, dimensions);
+			const isPanCompositionOwner = gestureCompositionOwner.get() === "pan";
+
+			finalizePanRelease(
+				release,
+				latestRuntime,
+				dimensions,
+				rawEvent,
+				requestDismiss,
+				gestureCompositionOwner,
+			);
+
+			if (isPanCompositionOwner) {
+				gestureCompositionOwner.set(null);
+			}
+		},
+		[
+			runtime,
+			screenOptions,
+			dimensions,
+			requestDismiss,
+			withSensitivity,
+			gestureCompositionOwner,
+		],
+	);
+
+	return useMemo(
+		() => ({
+			onStart,
+			onUpdate,
+			onEnd,
+		}),
+		[onStart, onUpdate, onEnd],
+	);
+};

package/src/providers/screen/motion/gestures/pan/use-build-pan-gesture.ts

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { Gesture } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import type { ScreenOptionsContextValue } from "../../options/types";
+import type { MotionValues } from "../../types";
+import { useStableRuntimeConfig } from "../ownership/hooks/use-stable-runtime-config";
+import type {
+	GestureCompositionOwner,
+	GestureOwnerMap,
+	PanGesture,
+	ScreenGestureConfig,
+	ScrollGestureState,
+} from "../types";
+import { usePanActivation } from "./activation/use-pan-activation";
+import { usePanBehavior } from "./behavior/use-pan-behavior";
+
+interface UseBuildPanGestureProps {
+	values: MotionValues;
+	onDismissRequest?: () => void;
+	screenOptions: ScreenOptionsContextValue;
+	scrollState: SharedValue<ScrollGestureState | null>;
+	gestureConfig: ScreenGestureConfig;
+	gestureOwners: SharedValue<GestureOwnerMap>;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
+}
+
+export const useBuildPanGesture = ({
+	values,
+	onDismissRequest,
+	screenOptions,
+	scrollState,
+	gestureConfig,
+	gestureOwners,
+	gestureCompositionOwner,
+}: UseBuildPanGestureProps): PanGesture => {
+	const dimensions = useWindowDimensions();
+	const { participation, pan: policy } = gestureConfig;
+
+	const runtime = useStableRuntimeConfig(
+		{
+			participation,
+			policy,
+		},
+		values,
+	);
+
+	const activation = usePanActivation({
+		scrollState,
+		gestureOwners,
+		runtime,
+		screenOptions,
+		dimensions,
+		gestureCompositionOwner,
+	});
+
+	const behavior = usePanBehavior(
+		runtime,
+		screenOptions,
+		dimensions,
+		gestureCompositionOwner,
+		activation.pendingDirection,
+		onDismissRequest,
+	);
+
+	const panGesture = useMemo(() => {
+		return Gesture.Pan()
+			.enabled(true)
+			.manualActivation(true)
+			.averageTouches(true)
+			.onTouchesDown(activation.onTouchesDown)
+			.onTouchesMove(activation.onTouchesMove)
+			.onStart(behavior.onStart)
+			.onUpdate(behavior.onUpdate)
+			.onEnd(behavior.onEnd);
+	}, [activation, behavior]);
+
+	return panGesture;
+};

package/src/providers/screen/motion/gestures/pinch/activation/use-pinch-activation.ts

@@ -0,0 +1,194 @@
+import { useCallback, useMemo } from "react";
+import type {
+	GestureStateManager,
+	GestureTouchEvent,
+} from "react-native-gesture-handler";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import type { ScreenOptionsContextValue } from "../../../options";
+import type { MotionGestureValues } from "../../../types";
+import { resolvePinchRuntime } from "../../shared/runtime";
+import type { GestureCompositionOwner, PinchGestureRuntime } from "../../types";
+
+export const updateAbsolutePinchFocalPoint = (
+	event: GestureTouchEvent,
+	gestures: MotionGestureValues,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const focalX = (firstTouch.absoluteX + secondTouch.absoluteX) / 2;
+	const focalY = (firstTouch.absoluteY + secondTouch.absoluteY) / 2;
+
+	gestures.focalX.set(focalX);
+	gestures.focalY.set(focalY);
+
+	if (captureOrigin) {
+		gestures.pinchOriginX.set(focalX);
+		gestures.pinchOriginY.set(focalY);
+	}
+};
+
+export const updatePinchRotation = (
+	event: GestureTouchEvent,
+	gestures: MotionGestureValues,
+	lastAngle: SharedValue<number>,
+	accumulatedRotation: SharedValue<number>,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const angle = Math.atan2(
+		secondTouch.absoluteY - firstTouch.absoluteY,
+		secondTouch.absoluteX - firstTouch.absoluteX,
+	);
+
+	if (captureOrigin) {
+		lastAngle.set(angle);
+		accumulatedRotation.set(0);
+		gestures.rotation.set(0);
+		gestures.raw.rotation.set(0);
+		return;
+	}
+
+	let angleDelta = angle - lastAngle.get();
+	if (angleDelta > Math.PI) {
+		angleDelta -= 2 * Math.PI;
+	} else if (angleDelta < -Math.PI) {
+		angleDelta += 2 * Math.PI;
+	}
+
+	const rotation = accumulatedRotation.get() + angleDelta;
+	lastAngle.set(angle);
+	accumulatedRotation.set(rotation);
+	gestures.rotation.set(rotation);
+	gestures.raw.rotation.set(rotation);
+};
+
+interface UsePinchActivationProps {
+	runtime: SharedValue<PinchGestureRuntime>;
+	screenOptions: ScreenOptionsContextValue;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
+}
+
+export const usePinchActivation = ({
+	runtime,
+	screenOptions,
+	gestureCompositionOwner,
+}: UsePinchActivationProps) => {
+	const lastAngle = useSharedValue(0);
+	const accumulatedRotation = useSharedValue(0);
+
+	const onTouchesDown = useCallback(
+		(
+			event: GestureTouchEvent,
+			stateManager: GestureStateManager | undefined,
+		) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const { participation, policy } = latestRuntime;
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				stateManager?.fail();
+				return;
+			}
+
+			if (event.numberOfTouches === 2) {
+				updateAbsolutePinchFocalPoint(
+					event,
+					latestRuntime.stores.gestures,
+					true,
+				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					true,
+				);
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
+				stateManager?.activate();
+				return;
+			}
+
+			if (event.numberOfTouches > 2) {
+				stateManager?.fail();
+			}
+		},
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
+	);
+
+	const onTouchesMove = useCallback(
+		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const { participation, policy } = latestRuntime;
+
+			if (!participation.canTrackGesture || !policy.enabled) {
+				stateManager.fail();
+				return;
+			}
+
+			if (event.numberOfTouches === 2) {
+				updateAbsolutePinchFocalPoint(
+					event,
+					latestRuntime.stores.gestures,
+					false,
+				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					false,
+				);
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
+				stateManager.activate();
+				return;
+			}
+
+			if (event.numberOfTouches > 2) {
+				stateManager.fail();
+			}
+		},
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
+	);
+
+	return useMemo(
+		() => ({ onTouchesDown, onTouchesMove }),
+		[onTouchesDown, onTouchesMove],
+	);
+};