react-native-screen-transitions 3.8.0-beta.0 → 3.8.0-beta.1

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

@@ -6,21 +6,18 @@ import type {
 import type { SharedValue } from "react-native-reanimated";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
-import type {
-	GestureCompositionActivation,
-	PinchGestureRuntime,
-} from "../../types";
+import type { GestureCompositionOwner, PinchGestureRuntime } from "../../types";
 
 interface UsePinchActivationProps {
 	runtime: SharedValue<PinchGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
-	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
 }
 
 export const usePinchActivation = ({
 	runtime,
 	screenOptions,
-	gestureCompositionActivation,
+	gestureCompositionOwner,
 }: UsePinchActivationProps) => {
 	const onTouchesDown = useCallback(
 		(
@@ -33,18 +30,15 @@ export const usePinchActivation = ({
 				screenOptions.get(),
 			);
 
-			if (gestureCompositionActivation.get() === "pan") {
-				stateManager?.fail();
-				return;
-			}
-
 			if (!participation.canTrackGesture || !policy.enabled) {
 				stateManager?.fail();
 				return;
 			}
 
 			if (event.numberOfTouches === 2) {
-				gestureCompositionActivation.set("pinch");
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
 				stateManager?.activate();
 				return;
 			}
@@ -53,7 +47,7 @@ export const usePinchActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionActivation],
+		[runtime, screenOptions, gestureCompositionOwner],
 	);
 
 	const onTouchesMove = useCallback(
@@ -70,14 +64,18 @@ export const usePinchActivation = ({
 			}
 
 			if (event.numberOfTouches === 2) {
-				gestureCompositionActivation.set("pinch");
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
 				stateManager.activate();
 				return;
 			}
 
-			stateManager.fail();
+			if (event.numberOfTouches > 2) {
+				stateManager.fail();
+			}
 		},
-		[runtime, screenOptions, gestureCompositionActivation],
+		[runtime, screenOptions, gestureCompositionOwner],
 	);
 
 	return useMemo(

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

@@ -3,6 +3,8 @@ import { EPSILON, FALSE, TRUE } from "../../../../../constants";
 import { animateToProgress } from "../../../../../utils/animation/animate-to-progress";
 import { emit } from "../../../../../utils/animation/emit";
 import { normalizePinchScale } from "../../shared/physics";
+import { snapshotGestureHandoff } from "../../shared/snapshot";
+import { clearTransformTrackingValues } from "../../shared/values";
 import type {
 	PinchGestureEvent,
 	PinchGestureRuntime,
@@ -18,7 +20,6 @@ export const startPinchBase = (
 	"worklet";
 	const {
 		stores: { gestures, animations },
-		gestureProgressBaseline,
 	} = runtime;
 
 	const wasSettling = gestures.settling.get();
@@ -36,15 +37,10 @@ export const startPinchBase = (
 	gestures.active.set(null);
 	gestures.direction.set(null);
 	gestures.velocity.set(0);
-	gestures.scale.set(1);
-	gestures.normScale.set(0);
-	gestures.rotation.set(0);
-	gestures.raw.scale.set(1);
-	gestures.raw.normScale.set(0);
-	gestures.raw.rotation.set(0);
+	clearTransformTrackingValues(gestures);
 	gestures.focalX.set(event.focalX);
 	gestures.focalY.set(event.focalY);
-	gestureProgressBaseline.set(animations.progress.get());
+	gestures.internal.progressBaseline.set(animations.transitionProgress.get());
 };
 
 export const trackPinchGesture = (
@@ -60,6 +56,8 @@ export const trackPinchGesture = (
 
 	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(
@@ -84,10 +82,16 @@ export const finalizePinchRelease = (
 	} = runtime;
 
 	if (typeof release.commitProgress === "number") {
-		animations.progress.set(release.commitProgress);
+		animations.transitionProgress.set(release.commitProgress);
 		system.targetProgress.set(release.commitProgress);
 	}
 
+	if (release.shouldDismiss) {
+		snapshotGestureHandoff(gestures, {
+			velocity: release.handoffVelocity,
+		});
+	}
+
 	resetPinchGestureValues({
 		spec: release.resetSpec,
 		gestures,

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

@@ -2,6 +2,7 @@ import { clamp } from "react-native-reanimated";
 import {
 	getPinchReleaseHandoffVelocity,
 	normalizePinchScale,
+	resolveGestureVelocityMagnitude,
 	shouldDismissFromPinch,
 } from "../../shared/physics";
 import {
@@ -66,7 +67,7 @@ const getPinchSnapReleaseProgress = ({
 	const snapDirections = runtime.policy.snapDirections;
 
 	if (!pinchDirection || !snapDirections) {
-		return runtime.stores.animations.progress.get();
+		return runtime.stores.animations.transitionProgress.get();
 	}
 
 	const progressDelta =
@@ -75,7 +76,7 @@ const getPinchSnapReleaseProgress = ({
 			: Math.abs(normalizedScale);
 
 	return clamp(
-		runtime.gestureProgressBaseline.get() + progressDelta,
+		runtime.stores.gestures.internal.progressBaseline.get() + progressDelta,
 		minSnapPoint,
 		maxSnapPoint,
 	);
@@ -94,11 +95,10 @@ export const resolvePinchRelease = (
 	const {
 		participation,
 		policy,
-		gestureProgressBaseline,
 		stores: { animations },
 	} = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
-	const currentProgress = animations.progress.get();
+	const currentProgress = animations.transitionProgress.get();
 	const shouldDismiss =
 		participation.canDismiss &&
 		shouldDismissFromPinch(
@@ -106,19 +106,26 @@ export const resolvePinchRelease = (
 			policy.pinchInEnabled,
 			policy.pinchOutEnabled,
 		);
-	const target = shouldDismiss ? 0 : gestureProgressBaseline.get();
+	const target = shouldDismiss
+		? 0
+		: runtime.stores.gestures.internal.progressBaseline.get();
+	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
+	const handoffVelocity = getPinchReleaseHandoffVelocity(
+		event.velocity,
+		policy.gestureReleaseVelocityScale,
+	);
 
 	return {
 		target,
 		shouldDismiss,
 		initialVelocity: getProgressVelocityTowardTarget({
-			handoffVelocity: getPinchReleaseHandoffVelocity(
-				event.velocity,
-				policy.gestureReleaseVelocityScale,
-			),
+			handoffVelocity: progressVelocity,
 			target,
 			currentProgress,
 		}),
+		handoffVelocity: shouldDismiss
+			? resolveGestureVelocityMagnitude(handoffVelocity)
+			: 0,
 		transitionSpec: policy.transitionSpec,
 		resetSpec: shouldDismiss
 			? policy.transitionSpec?.close
@@ -131,7 +138,7 @@ export const resolveSnapPinchRelease = (
 	runtime: PinchGestureRuntime,
 ): PinchReleaseResult => {
 	"worklet";
-	const { participation, policy, lockedSnapPoint } = runtime;
+	const { participation, policy } = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
 
 	const { resolvedSnapPoints, resolvedMinSnapPoint, resolvedMaxSnapPoint } =
@@ -146,7 +153,10 @@ export const resolveSnapPinchRelease = (
 	const result = determineSnapTarget({
 		currentProgress,
 		snapPoints: policy.gestureSnapLocked
-			? [lockedSnapPoint.get()]
+			? [
+					runtime.stores.gestures.internal.lockedSnapPoint.get() ??
+						resolvedMaxSnapPoint,
+				]
 			: resolvedSnapPoints,
 		velocity: getPinchSnapVelocity(event, runtime, normalizedScale),
 		dimension: 1,
@@ -156,20 +166,25 @@ export const resolveSnapPinchRelease = (
 
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
+	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
+	const handoffVelocity = getPinchReleaseHandoffVelocity(
+		event.velocity,
+		policy.gestureReleaseVelocityScale,
+	);
 
 	return {
 		target,
 		shouldDismiss,
 		initialVelocity: getProgressVelocityTowardTarget({
-			handoffVelocity: getPinchReleaseHandoffVelocity(
-				event.velocity,
-				policy.gestureReleaseVelocityScale,
-			),
+			handoffVelocity: progressVelocity,
 			target,
 			currentProgress,
 		}),
+		handoffVelocity: shouldDismiss
+			? resolveGestureVelocityMagnitude(handoffVelocity)
+			: 0,
 		commitProgress: currentProgress,
-		resetValuesImmediately: policy.gestureProgressMode === "progress-driven",
+		resetValuesImmediately: true,
 		transitionSpec: resolveGestureSnapTransitionSpec({
 			transitionSpec: policy.transitionSpec,
 			shouldDismiss,

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

@@ -1,11 +1,12 @@
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { FALSE, TRUE } from "../../../../../constants";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../../types/animation.types";
+import { animateMany } from "../../shared/reset";
 import {
-	animateResetValue,
-	clearGestureSettlingIfResting,
-	getGestureResetSpec,
-} from "../../shared/reset";
+	clearFocalPoint,
+	clearRawTransformValues,
+	clearTransformTrackingValues,
+} from "../../shared/values";
 
 interface ResetPinchGestureValuesProps {
 	spec?: AnimationConfig;
@@ -14,24 +15,6 @@ interface ResetPinchGestureValuesProps {
 	resetValuesImmediately?: boolean;
 }
 
-const clearPinchSettlingIfResting = (gestures: GestureStoreMap) => {
-	"worklet";
-
-	const isResting =
-		!gestures.dragging.get() &&
-		!gestures.dismissing.get() &&
-		Math.abs(gestures.scale.get() - 1) <= EPSILON &&
-		Math.abs(gestures.normScale.get()) <= EPSILON &&
-		Math.abs(gestures.rotation.get()) <= EPSILON;
-
-	if (isResting) {
-		gestures.focalX.set(0);
-		gestures.focalY.set(0);
-	}
-
-	clearGestureSettlingIfResting(gestures, isResting);
-};
-
 export const resetPinchGestureValues = ({
 	spec,
 	gestures,
@@ -39,33 +22,41 @@ export const resetPinchGestureValues = ({
 	resetValuesImmediately = false,
 }: ResetPinchGestureValuesProps) => {
 	"worklet";
-	const resetSpec = getGestureResetSpec(spec);
+	const finishPinchReset = () => {
+		"worklet";
+		if (shouldDismiss) {
+			return;
+		}
 
-	if (!shouldDismiss) {
-		gestures.raw.scale.set(1);
-		gestures.raw.normScale.set(0);
-		gestures.raw.rotation.set(0);
-	}
+		clearFocalPoint(gestures);
+		gestures.active.set(null);
+		gestures.direction.set(null);
+		gestures.settling.set(FALSE);
+	};
+
+	clearRawTransformValues(gestures);
 
 	gestures.dragging.set(FALSE);
 	gestures.dismissing.set(shouldDismiss ? TRUE : FALSE);
 	gestures.settling.set(shouldDismiss ? FALSE : TRUE);
 
+	if (shouldDismiss) {
+		clearFocalPoint(gestures);
+	}
+
 	if (resetValuesImmediately) {
-		gestures.scale.set(1);
-		gestures.normScale.set(0);
-		gestures.rotation.set(0);
-		clearPinchSettlingIfResting(gestures);
+		clearTransformTrackingValues(gestures);
+		finishPinchReset();
 		return;
 	}
 
-	animateResetValue(gestures.scale, 1, resetSpec, () =>
-		clearPinchSettlingIfResting(gestures),
-	);
-	animateResetValue(gestures.normScale, 0, resetSpec, () =>
-		clearPinchSettlingIfResting(gestures),
-	);
-	animateResetValue(gestures.rotation, 0, resetSpec, () =>
-		clearPinchSettlingIfResting(gestures),
+	animateMany(
+		[
+			{ value: gestures.scale, toValue: 1 },
+			{ value: gestures.normScale, toValue: 0 },
+			{ value: gestures.rotation, toValue: 0 },
+		],
+		spec,
+		finishPinchReset,
 	);
 };

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

@@ -5,7 +5,7 @@ import type { ScreenOptionsContextValue } from "../../../options";
 import { usePinchGestureSensitivity } from "../../hooks/use-gesture-sensitivity";
 import { resolvePinchRuntime } from "../../shared/runtime";
 import type {
-	GestureCompositionActivation,
+	GestureCompositionOwner,
 	PinchBehavior,
 	PinchGestureEvent,
 	PinchGestureRuntime,
@@ -24,7 +24,7 @@ import {
 export const usePinchBehavior = (
 	runtime: SharedValue<PinchGestureRuntime>,
 	screenOptions: ScreenOptionsContextValue,
-	gestureCompositionActivation: SharedValue<GestureCompositionActivation>,
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
 ): PinchBehavior => {
 	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
@@ -77,7 +77,7 @@ export const usePinchBehavior = (
 				dismissScreen,
 				requestDismiss,
 			);
-			gestureCompositionActivation.set(null);
+			gestureCompositionOwner.set(null);
 		},
 		[
 			runtime,
@@ -85,7 +85,7 @@ export const usePinchBehavior = (
 			dismissScreen,
 			requestDismiss,
 			withSensitivity,
-			gestureCompositionActivation,
+			gestureCompositionOwner,
 		],
 	);
 

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

@@ -2,10 +2,9 @@ import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useScreenOptionsContext } from "../../options";
-import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
-	GestureCompositionActivation,
+	GestureCompositionOwner,
 	PinchGesture,
 	ScreenGestureConfig,
 } from "../types";
@@ -14,35 +13,31 @@ import { usePinchBehavior } from "./behavior/use-pinch-behavior";
 
 interface UseBuildPinchGestureProps {
 	gestureConfig: ScreenGestureConfig;
-	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
 }
 
 export const useBuildPinchGesture = ({
 	gestureConfig,
-	gestureCompositionActivation,
+	gestureCompositionOwner,
 }: UseBuildPinchGestureProps): 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,
-		gestureCompositionActivation,
+		gestureCompositionOwner,
 	});
 
 	const behavior = usePinchBehavior(
 		runtime,
 		screenOptions,
-		gestureCompositionActivation,
+		gestureCompositionOwner,
 	);
 
 	const pinchGesture = useMemo(() => {

package/src/shared/providers/screen/gestures/rotation/activation/use-rotation-activation.ts

@@ -7,20 +7,20 @@ import type { SharedValue } from "react-native-reanimated";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
 import type {
-	GestureCompositionActivation,
+	GestureCompositionOwner,
 	RotationGestureRuntime,
 } from "../../types";
 
 interface UseRotationActivationProps {
 	runtime: SharedValue<RotationGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
-	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
 }
 
 export const useRotationActivation = ({
 	runtime,
 	screenOptions,
-	gestureCompositionActivation,
+	gestureCompositionOwner,
 }: UseRotationActivationProps) => {
 	const onTouchesDown = useCallback(
 		(
@@ -33,18 +33,15 @@ export const useRotationActivation = ({
 				screenOptions.get(),
 			);
 
-			if (gestureCompositionActivation.get() === "pan") {
-				stateManager?.fail();
-				return;
-			}
-
 			if (!participation.canTrackGesture || !policy.enabled) {
 				stateManager?.fail();
 				return;
 			}
 
 			if (event.numberOfTouches === 2) {
-				gestureCompositionActivation.set("pinch");
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
 				stateManager?.activate();
 				return;
 			}
@@ -53,7 +50,7 @@ export const useRotationActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionActivation],
+		[runtime, screenOptions, gestureCompositionOwner],
 	);
 
 	const onTouchesMove = useCallback(
@@ -70,14 +67,18 @@ export const useRotationActivation = ({
 			}
 
 			if (event.numberOfTouches === 2) {
-				gestureCompositionActivation.set("pinch");
+				if (gestureCompositionOwner.get() === null) {
+					gestureCompositionOwner.set("pinch");
+				}
 				stateManager.activate();
 				return;
 			}
 
-			stateManager.fail();
+			if (event.numberOfTouches > 2) {
+				stateManager.fail();
+			}
 		},
-		[runtime, screenOptions, gestureCompositionActivation],
+		[runtime, screenOptions, gestureCompositionOwner],
 	);
 
 	return useMemo(

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

@@ -2,10 +2,9 @@ import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useScreenOptionsContext } from "../../options";
-import { useGestureBuilderState } from "../hooks/use-gesture-builder-state";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
-	GestureCompositionActivation,
+	GestureCompositionOwner,
 	RotationGesture,
 	ScreenGestureConfig,
 } from "../types";
@@ -14,29 +13,25 @@ import { useRotationBehavior } from "./behavior/use-rotation-behavior";
 
 interface UseBuildRotationGestureProps {
 	gestureConfig: ScreenGestureConfig;
-	gestureCompositionActivation: SharedValue<GestureCompositionActivation>;
+	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
 }
 
 export const useBuildRotationGesture = ({
 	gestureConfig,
-	gestureCompositionActivation,
+	gestureCompositionOwner,
 }: UseBuildRotationGestureProps): RotationGesture => {
 	const { participation, pinch: policy } = gestureConfig;
 	const screenOptions = useScreenOptionsContext();
-	const { gestureProgressBaseline, lockedSnapPoint } =
-		useGestureBuilderState(participation);
 
 	const runtime = useStableRuntimeConfig({
 		participation,
 		policy,
-		gestureProgressBaseline,
-		lockedSnapPoint,
 	});
 
 	const activation = useRotationActivation({
 		runtime,
 		screenOptions,
-		gestureCompositionActivation,
+		gestureCompositionOwner,
 	});
 
 	const behavior = useRotationBehavior(runtime, screenOptions);