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

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

package/src/shared/providers/screen/gestures/scroll-coordination/index.ts

@@ -1 +1,2 @@
+export { ScrollMetadataOwnerProvider } from "./scroll-metadata-owner";
 export { useScrollGestureCoordination } from "./use-scroll-gesture-coordination";

package/src/shared/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode, useMemo } from "react";
+import createProvider from "../../../../utils/create-provider";
+import type { ScrollGestureAxis } from "../types";
+
+type ScrollMetadataOwnerContextValue = Record<ScrollGestureAxis, boolean>;
+
+interface ScrollMetadataOwnerProviderProps {
+	children: ReactNode;
+	value: ScrollMetadataOwnerContextValue;
+}
+
+const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
+	vertical: false,
+	horizontal: false,
+};
+
+const {
+	ScrollMetadataOwnerProvider,
+	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
+} = createProvider("ScrollMetadataOwner", { guarded: false })<
+	ScrollMetadataOwnerProviderProps,
+	ScrollMetadataOwnerContextValue
+>(({ children, value }) => ({ children, value }));
+
+export const useScrollMetadataOwnerContext = () =>
+	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
+
+export const useScrollMetadataOwnerProviderValue = (
+	axis: ScrollGestureAxis,
+) => {
+	const parent = useScrollMetadataOwnerContext();
+
+	return useMemo(() => {
+		if (parent[axis]) return parent;
+
+		return {
+			...parent,
+			[axis]: true,
+		};
+	}, [axis, parent]);
+};
+
+export { ScrollMetadataOwnerProvider };

package/src/shared/providers/screen/gestures/scroll-coordination/update-scroll-gesture-state.ts

@@ -2,14 +2,27 @@ import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 } from "../types";
 
+function createScrollGestureAxisState(): ScrollGestureAxisState {
+	"worklet";
+	return { offset: 0, contentSize: 0, layoutSize: 0, isTouched: false };
+}
+
 const createScrollGestureState = (): ScrollGestureState => {
 	"worklet";
 	return {
-		vertical: { offset: 0, contentSize: 0, layoutSize: 0 },
-		horizontal: { offset: 0, contentSize: 0, layoutSize: 0 },
-		isTouched: false,
+		vertical: createScrollGestureAxisState(),
+		horizontal: createScrollGestureAxisState(),
+	};
+};
+
+const createScrollMetadataState = (): ScrollMetadataState => {
+	"worklet";
+	return {
+		vertical: null,
+		horizontal: null,
 	};
 };
 
@@ -37,8 +50,50 @@ export const updateScrollGestureAxisState = (
 	}
 
 	if (patch.isTouched !== undefined) {
-		nextState.isTouched = patch.isTouched;
+		axisState.isTouched = patch.isTouched;
+	}
+
+	return nextState;
+};
+
+export const updateScrollMetadataAxisState = (
+	state: ScrollMetadataState | null,
+	axis: ScrollGestureAxis,
+	patch: Partial<ScrollGestureAxisState> & { isTouched?: boolean },
+): ScrollMetadataState => {
+	"worklet";
+
+	const nextState = state ?? createScrollMetadataState();
+	const axisState = nextState[axis] ?? createScrollGestureAxisState();
+	nextState[axis] = axisState;
+
+	if (patch.offset !== undefined) {
+		axisState.offset = patch.offset;
+	}
+
+	if (patch.contentSize !== undefined) {
+		axisState.contentSize = patch.contentSize;
+	}
+
+	if (patch.layoutSize !== undefined) {
+		axisState.layoutSize = patch.layoutSize;
+	}
+
+	if (patch.isTouched !== undefined) {
+		axisState.isTouched = patch.isTouched;
 	}
 
 	return nextState;
 };
+
+export const clearScrollMetadataAxisState = (
+	state: ScrollMetadataState | null,
+	axis: ScrollGestureAxis,
+): ScrollMetadataState | null => {
+	"worklet";
+	if (!state) return null;
+
+	state[axis] = null;
+
+	return state.vertical || state.horizontal ? state : null;
+};