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

package/src/shared/providers/screen/gestures/behaviors/strategies/pan.strategy.ts

@@ -0,0 +1,76 @@
+import { clamp } from "react-native-reanimated";
+import {
+	getPanReleaseProgressVelocity,
+	mapGestureToProgress,
+} from "../../helpers/gesture-physics";
+import { determineDismissal } from "../../helpers/gesture-targets";
+import type { PanBehaviorStrategy } from "../../types";
+
+export const PanStrategy: PanBehaviorStrategy = {
+	primeStart(_runtime) {
+		"worklet";
+	},
+
+	resolveProgress(runtime, dimensions, track) {
+		"worklet";
+		const { policy, gestureProgressBaseline } = runtime;
+		const { x, y } = track;
+		const { width, height } = dimensions;
+
+		let maxProgress = 0;
+
+		if (policy.panActivationDirections.horizontal && x > 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(x, width));
+		}
+
+		if (policy.panActivationDirections.horizontalInverted && x < 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(-x, width));
+		}
+
+		if (policy.panActivationDirections.vertical && y > 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(y, height));
+		}
+
+		if (policy.panActivationDirections.verticalInverted && y < 0) {
+			maxProgress = Math.max(maxProgress, mapGestureToProgress(-y, height));
+		}
+
+		return clamp(gestureProgressBaseline.get() - maxProgress, 0, 1);
+	},
+
+	resolveRelease(event, runtime, dimensions) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations },
+		} = runtime;
+
+		const result = determineDismissal({
+			event,
+			directions: policy.panActivationDirections,
+			dimensions,
+			gestureVelocityImpact: policy.gestureVelocityImpact,
+		});
+
+		const shouldDismiss = participation.canDismiss && result.shouldDismiss;
+
+		return {
+			target: shouldDismiss ? 0 : 1,
+			shouldDismiss,
+			initialVelocity: getPanReleaseProgressVelocity({
+				animations,
+				shouldDismiss,
+				event,
+				dimensions,
+				directions: policy.panActivationDirections,
+				gestureReleaseVelocityScale: policy.gestureReleaseVelocityScale,
+				gestureReleaseVelocityMax: policy.gestureReleaseVelocityMax,
+			}),
+			transitionSpec: policy.transitionSpec,
+			resetSpec: shouldDismiss
+				? policy.transitionSpec?.close
+				: policy.transitionSpec?.open,
+		};
+	},
+};

package/src/shared/providers/screen/gestures/behaviors/strategies/pinch-snap.strategy.ts

@@ -0,0 +1,177 @@
+import { clamp } from "react-native-reanimated";
+import { resolveSnapTransitionSpec } from "../../../../../utils/animation/resolve-snap-transition-spec";
+import {
+	getPinchReleaseHandoffVelocity,
+	normalizePinchScale,
+} from "../../helpers/gesture-physics";
+import {
+	findNearestSnapPoint,
+	resolveRuntimeSnapPoints,
+} from "../../helpers/gesture-snap-points";
+import { determineSnapTarget } from "../../helpers/gesture-targets";
+import type { PinchBehaviorStrategy } from "../../types";
+
+export const SnapPinchStrategy: PinchBehaviorStrategy = {
+	primeStart(runtime) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations, system },
+			lockedSnapPoint,
+		} = runtime;
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+
+		const { resolvedSnapPoints, resolvedMaxSnapPoint } =
+			resolveRuntimeSnapPoints({
+				snapPoints,
+				hasAutoSnapPoint,
+				resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+				minSnapPoint,
+				maxSnapPoint,
+				canDismiss: participation.canDismiss,
+			});
+
+		if (policy.gestureSnapLocked) {
+			lockedSnapPoint.set(
+				findNearestSnapPoint(animations.progress.get(), resolvedSnapPoints),
+			);
+			return;
+		}
+
+		lockedSnapPoint.set(resolvedMaxSnapPoint);
+	},
+
+	resolveProgress(runtime, track) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { system },
+			gestureProgressBaseline,
+			lockedSnapPoint,
+		} = runtime;
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+		const { normScale } = track;
+		const pinchDirection =
+			normScale < 0 ? "pinch-in" : normScale > 0 ? "pinch-out" : null;
+
+		let progressDelta = 0;
+		if (pinchDirection && policy.snapDirections) {
+			progressDelta =
+				policy.snapDirections.collapse === pinchDirection
+					? -Math.abs(normScale)
+					: Math.abs(normScale);
+		}
+
+		const { resolvedMinSnapPoint, resolvedMaxSnapPoint } =
+			resolveRuntimeSnapPoints({
+				snapPoints,
+				hasAutoSnapPoint,
+				resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+				minSnapPoint,
+				maxSnapPoint,
+				canDismiss: participation.canDismiss,
+			});
+
+		const maxProgressForGesture = policy.gestureSnapLocked
+			? lockedSnapPoint.get()
+			: resolvedMaxSnapPoint;
+
+		const minProgressForGesture = policy.gestureSnapLocked
+			? participation.canDismiss
+				? 0
+				: lockedSnapPoint.get()
+			: participation.canDismiss
+				? 0
+				: resolvedMinSnapPoint;
+
+		return clamp(
+			gestureProgressBaseline.get() + progressDelta,
+			minProgressForGesture,
+			maxProgressForGesture,
+		);
+	},
+
+	resolveRelease(event, runtime) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			stores: { animations, system },
+			lockedSnapPoint,
+		} = runtime;
+		const { hasAutoSnapPoint, snapPoints, minSnapPoint, maxSnapPoint } =
+			participation.effectiveSnapPoints;
+		const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
+		const currentProgress = animations.progress.get();
+		const pinchDirection =
+			normalizedScale < 0
+				? "pinch-in"
+				: normalizedScale > 0
+					? "pinch-out"
+					: null;
+
+		const { resolvedSnapPoints } = resolveRuntimeSnapPoints({
+			snapPoints,
+			hasAutoSnapPoint,
+			resolvedAutoSnapPoint: system.resolvedAutoSnapPoint.get(),
+			minSnapPoint,
+			maxSnapPoint,
+			canDismiss: participation.canDismiss,
+		});
+
+		let snapVelocity = 0;
+		if (pinchDirection && policy.snapDirections) {
+			snapVelocity =
+				policy.snapDirections.collapse === pinchDirection
+					? Math.abs(event.velocity)
+					: -Math.abs(event.velocity);
+		}
+
+		const result = determineSnapTarget({
+			currentProgress,
+			snapPoints: policy.gestureSnapLocked
+				? [lockedSnapPoint.get()]
+				: resolvedSnapPoints,
+			velocity: snapVelocity,
+			dimension: 1,
+			velocityFactor: policy.gestureSnapVelocityImpact,
+			canDismiss: participation.canDismiss,
+		});
+
+		const shouldDismiss = participation.canDismiss && result.shouldDismiss;
+		const target = shouldDismiss ? 0 : result.targetProgress;
+		const isSnapping = !shouldDismiss;
+		const transitionSpec = isSnapping
+			? resolveSnapTransitionSpec(
+					policy.transitionSpec,
+					target < currentProgress ? "collapse" : "expand",
+				)
+			: policy.transitionSpec;
+		const progressDirection = Math.sign(target - currentProgress);
+		const initialVelocity =
+			progressDirection === 0
+				? 0
+				: progressDirection *
+					Math.abs(
+						getPinchReleaseHandoffVelocity(
+							event.velocity,
+							policy.gestureReleaseVelocityScale,
+							policy.gestureReleaseVelocityMax,
+						),
+					);
+
+		return {
+			target,
+			shouldDismiss,
+			initialVelocity,
+			transitionSpec,
+			resetSpec: shouldDismiss
+				? policy.transitionSpec?.close
+				: policy.transitionSpec?.open,
+		};
+	},
+};

package/src/shared/providers/screen/gestures/behaviors/strategies/pinch.strategy.ts

@@ -0,0 +1,73 @@
+import { clamp } from "react-native-reanimated";
+import {
+	getPinchReleaseHandoffVelocity,
+	normalizePinchScale,
+	shouldDismissFromPinch,
+} from "../../helpers/gesture-physics";
+import type { PinchBehaviorStrategy } from "../../types";
+
+export const PinchStrategy: PinchBehaviorStrategy = {
+	primeStart(_runtime) {
+		"worklet";
+	},
+
+	resolveProgress(runtime, track) {
+		"worklet";
+		const { policy, gestureProgressBaseline } = runtime;
+		const { normScale } = track;
+
+		const progressDelta =
+			(normScale < 0 && policy.pinchInEnabled) ||
+			(normScale > 0 && policy.pinchOutEnabled)
+				? Math.abs(normScale)
+				: 0;
+
+		return clamp(
+			gestureProgressBaseline.get() - progressDelta,
+			0,
+			gestureProgressBaseline.get(),
+		);
+	},
+
+	resolveRelease(event, runtime) {
+		"worklet";
+		const {
+			participation,
+			policy,
+			gestureProgressBaseline,
+			stores: { animations },
+		} = runtime;
+		const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
+		const currentProgress = animations.progress.get();
+		const shouldDismiss =
+			participation.canDismiss &&
+			shouldDismissFromPinch(
+				normalizedScale,
+				policy.pinchInEnabled,
+				policy.pinchOutEnabled,
+			);
+		const target = shouldDismiss ? 0 : gestureProgressBaseline.get();
+		const progressDirection = Math.sign(target - currentProgress);
+		const initialVelocity =
+			progressDirection === 0
+				? 0
+				: progressDirection *
+					Math.abs(
+						getPinchReleaseHandoffVelocity(
+							event.velocity,
+							policy.gestureReleaseVelocityScale,
+							policy.gestureReleaseVelocityMax,
+						),
+					);
+
+		return {
+			target,
+			shouldDismiss,
+			initialVelocity,
+			transitionSpec: policy.transitionSpec,
+			resetSpec: shouldDismiss
+				? policy.transitionSpec?.close
+				: policy.transitionSpec?.open,
+		};
+	},
+};

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

@@ -0,0 +1,100 @@
+import { useCallback } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useNavigationHelpers } from "../../../../hooks/navigation/use-navigation-helpers";
+import type { ScreenOptionsContextValue } from "../../options";
+import {
+	finalizePanRelease,
+	startPanBase,
+	trackPanGesture,
+} from "../helpers/pan-phases";
+import { resolvePanRuntime } from "../helpers/runtime-options";
+import { usePanGestureSensitivity } from "../hooks/use-gesture-sensitivity";
+import type {
+	GestureDimensions,
+	PanBehavior,
+	PanBehaviorStrategy,
+	PanGestureEvent,
+	PanGestureRuntime,
+} from "../types";
+import { PanStrategy } from "./strategies/pan.strategy";
+import { SnapPanStrategy } from "./strategies/pan-snap.strategy";
+
+const getPanStrategy = (runtime: PanGestureRuntime): PanBehaviorStrategy => {
+	"worklet";
+	return runtime.participation.effectiveSnapPoints.hasSnapPoints
+		? SnapPanStrategy
+		: PanStrategy;
+};
+
+export const usePanBehavior = (
+	runtime: SharedValue<PanGestureRuntime>,
+	screenOptions: ScreenOptionsContextValue,
+	dimensions: GestureDimensions,
+): PanBehavior => {
+	const { dismissScreen } = useNavigationHelpers();
+	const { withSensitivity, resetSensitivity } =
+		usePanGestureSensitivity(screenOptions);
+
+	const onStart = useCallback(() => {
+		"worklet";
+		const latestRuntime = resolvePanRuntime(runtime.get(), screenOptions.get());
+		const strategy = getPanStrategy(latestRuntime);
+		strategy.primeStart(latestRuntime);
+		startPanBase(latestRuntime);
+		resetSensitivity();
+	}, [runtime, screenOptions, resetSensitivity]);
+
+	const onUpdate = useCallback(
+		(rawEvent: PanGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const strategy = getPanStrategy(latestRuntime);
+			const event = withSensitivity(rawEvent);
+			const track = trackPanGesture(
+				event,
+				rawEvent,
+				latestRuntime.stores.gestures,
+				dimensions,
+			);
+
+			if (!latestRuntime.policy.gestureDrivesProgress) {
+				return;
+			}
+
+			latestRuntime.stores.animations.progress.set(
+				strategy.resolveProgress(latestRuntime, dimensions, track),
+			);
+		},
+		[runtime, screenOptions, dimensions, withSensitivity],
+	);
+
+	const onEnd = useCallback(
+		(rawEvent: PanGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const strategy = getPanStrategy(latestRuntime);
+			const event = withSensitivity(rawEvent);
+			const release = strategy.resolveRelease(event, latestRuntime, dimensions);
+			finalizePanRelease(
+				release,
+				latestRuntime,
+				dismissScreen,
+				dimensions,
+				rawEvent,
+			);
+		},
+		[runtime, screenOptions, dimensions, dismissScreen, withSensitivity],
+	);
+
+	return {
+		onStart,
+		onUpdate,
+		onEnd,
+	};
+};

package/src/shared/providers/screen/gestures/behaviors/use-pinch-behavior.ts

@@ -0,0 +1,99 @@
+import { useCallback } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useNavigationHelpers } from "../../../../hooks/navigation/use-navigation-helpers";
+import type { ScreenOptionsContextValue } from "../../options";
+import {
+	finalizePinchRelease,
+	startPinchBase,
+	trackPinchGesture,
+} from "../helpers/pinch-phases";
+import { resolvePinchRuntime } from "../helpers/runtime-options";
+import { usePinchGestureSensitivity } from "../hooks/use-gesture-sensitivity";
+import type {
+	PinchBehavior,
+	PinchBehaviorStrategy,
+	PinchGestureEvent,
+	PinchGestureRuntime,
+} from "../types";
+import { PinchStrategy } from "./strategies/pinch.strategy";
+import { SnapPinchStrategy } from "./strategies/pinch-snap.strategy";
+
+const getPinchStrategy = (
+	runtime: PinchGestureRuntime,
+): PinchBehaviorStrategy => {
+	"worklet";
+	return runtime.participation.effectiveSnapPoints.hasSnapPoints
+		? SnapPinchStrategy
+		: PinchStrategy;
+};
+
+export const usePinchBehavior = (
+	runtime: SharedValue<PinchGestureRuntime>,
+	screenOptions: ScreenOptionsContextValue,
+): PinchBehavior => {
+	const { dismissScreen } = useNavigationHelpers();
+	const { withSensitivity, resetSensitivity } =
+		usePinchGestureSensitivity(screenOptions);
+
+	const onStart = useCallback(
+		(event: PinchGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const strategy = getPinchStrategy(latestRuntime);
+			strategy.primeStart(latestRuntime);
+			startPinchBase(latestRuntime, event);
+			resetSensitivity();
+		},
+		[runtime, screenOptions, resetSensitivity],
+	);
+
+	const onUpdate = useCallback(
+		(rawEvent: PinchGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const strategy = getPinchStrategy(latestRuntime);
+			const event = withSensitivity(rawEvent);
+			const track = trackPinchGesture(
+				event,
+				rawEvent,
+				latestRuntime.stores.gestures,
+			);
+
+			if (!latestRuntime.policy.gestureDrivesProgress) {
+				return;
+			}
+
+			latestRuntime.stores.animations.progress.set(
+				strategy.resolveProgress(latestRuntime, track),
+			);
+		},
+		[runtime, screenOptions, withSensitivity],
+	);
+
+	const onEnd = useCallback(
+		(rawEvent: PinchGestureEvent) => {
+			"worklet";
+			const latestRuntime = resolvePinchRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const strategy = getPinchStrategy(latestRuntime);
+			const event = withSensitivity(rawEvent);
+			const release = strategy.resolveRelease(event, latestRuntime);
+			finalizePinchRelease(release, latestRuntime, dismissScreen);
+		},
+		[runtime, screenOptions, dismissScreen, withSensitivity],
+	);
+
+	return {
+		onStart,
+		onUpdate,
+		onEnd,
+	};
+};

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

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { Gesture } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import { useScreenOptionsContext } from "../../options";
+import { usePanActivation } from "../activation/use-pan-activation";
+import { usePanBehavior } from "../behaviors/use-pan-behavior";
+import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
+import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
+import type {
+	DirectionClaimMap,
+	PanGesture,
+	ScreenGestureConfig,
+	ScrollGestureState,
+} from "../types";
+
+interface BuildPanGestureHookProps {
+	scrollState: SharedValue<ScrollGestureState | null>;
+	gestureConfig: ScreenGestureConfig;
+	childDirectionClaims: SharedValue<DirectionClaimMap>;
+}
+
+export const useBuildPanGesture = ({
+	scrollState,
+	gestureConfig,
+	childDirectionClaims,
+}: BuildPanGestureHookProps): PanGesture => {
+	const dimensions = useWindowDimensions();
+	const { participation, pan: policy } = gestureConfig;
+	const screenOptions = useScreenOptionsContext();
+
+	const { gestureProgressBaseline, lockedSnapPoint } =
+		useGestureBuilderState(participation);
+
+	const runtime = useStableRuntimeConfig({
+		participation,
+		policy,
+		gestureProgressBaseline,
+		lockedSnapPoint,
+	});
+
+	const activation = usePanActivation({
+		scrollState,
+		childDirectionClaims,
+		runtime,
+		screenOptions,
+		dimensions,
+	});
+
+	const behavior = usePanBehavior(runtime, screenOptions, dimensions);
+
+	const panGesture = useMemo(() => {
+		return Gesture.Pan()
+			.enabled(true)
+			.manualActivation(true)
+			.maxPointers(1)
+			.onTouchesDown(activation.onTouchesDown)
+			.onTouchesMove(activation.onTouchesMove)
+			.onStart(behavior.onStart)
+			.onUpdate(behavior.onUpdate)
+			.onEnd(behavior.onEnd);
+	}, [activation, behavior]);
+
+	return panGesture;
+};

package/src/shared/providers/screen/gestures/builders/use-build-pinch-gesture.ts

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import { useScreenOptionsContext } from "../../options";
+import { usePinchActivation } from "../activation/use-pinch-activation";
+import { usePinchBehavior } from "../behaviors/use-pinch-behavior";
+import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
+import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
+import type { PinchGesture, ScreenGestureConfig } from "../types";
+
+interface BuildPinchGestureHookProps {
+	gestureConfig: ScreenGestureConfig;
+}
+
+export const useBuildPinchGesture = ({
+	gestureConfig,
+}: BuildPinchGestureHookProps): PinchGesture => {
+	const { participation, pinch: policy } = gestureConfig;
+	const screenOptions = useScreenOptionsContext();
+	const { gestureProgressBaseline, lockedSnapPoint } =
+		useGestureBuilderState(participation);
+
+	const runtime = useStableRuntimeConfig({
+		participation,
+		policy,
+		gestureProgressBaseline,
+		lockedSnapPoint,
+	});
+
+	const activation = usePinchActivation({
+		runtime,
+		screenOptions,
+	});
+
+	const behavior = usePinchBehavior(runtime, screenOptions);
+
+	const pinchGesture = useMemo(() => {
+		return Gesture.Pinch()
+			.enabled(true)
+			.manualActivation(true)
+			.onTouchesDown(activation.onTouchesDown)
+			.onTouchesMove(activation.onTouchesMove)
+			.onStart(behavior.onStart)
+			.onUpdate(behavior.onUpdate)
+			.onEnd(behavior.onEnd);
+	}, [activation, behavior]);
+
+	return pinchGesture;
+};