react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -3,7 +3,7 @@ import type {
 	GestureStateManager,
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
@@ -34,6 +34,48 @@ export const updateAbsolutePinchFocalPoint = (
 	}
 };
 
+export const updatePinchRotation = (
+	event: GestureTouchEvent,
+	gestures: GestureStoreMap,
+	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;
@@ -45,6 +87,9 @@ export const usePinchActivation = ({
 	screenOptions,
 	gestureCompositionOwner,
 }: UsePinchActivationProps) => {
+	const lastAngle = useSharedValue(0);
+	const accumulatedRotation = useSharedValue(0);
+
 	const onTouchesDown = useCallback(
 		(
 			event: GestureTouchEvent,
@@ -68,6 +113,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					true,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					true,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -79,7 +131,13 @@ export const usePinchActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	const onTouchesMove = useCallback(
@@ -102,6 +160,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					false,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					false,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -113,7 +178,13 @@ export const usePinchActivation = ({
 				stateManager.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	return useMemo(

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

@@ -1,8 +1,8 @@
 import { clamp } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { EPSILON, TRUE } from "../../../../../constants";
+import { emitMotionStart } from "../../../../../stores/animation.store";
 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";
@@ -20,20 +20,11 @@ export const startPinchBase = (runtime: PinchGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normScale.get()) > EPSILON ||
-		Math.abs(gestures.rotation.get()) > EPSILON;
-
-	if (!wasSettling || !hasResidualGesture) {
-		emit(animations.willAnimate, TRUE, FALSE);
-	}
-
+	emitMotionStart(animations);
 	gestures.dragging.set(TRUE);
 	gestures.dismissing.set(0);
 	gestures.settling.set(0);
-	gestures.active.set(null);
-	gestures.direction.set(null);
+	gestures.initiator.set(null);
 	gestures.velocity.set(0);
 	clearTransformTrackingValues(gestures);
 	gestures.internal.progressBaseline.set(animations.transitionProgress.get());
@@ -55,8 +46,8 @@ export const trackPinchGesture = (
 	gestures.raw.scale.set(rawScale);
 	gestures.raw.normScale.set(rawNormScale);
 
-	if (gestures.active.get() === null) {
-		gestures.active.set(
+	if (gestures.initiator.get() === null) {
+		gestures.initiator.set(
 			normScale < 0 ? "pinch-in" : normScale > 0 ? "pinch-out" : null,
 		);
 	}
@@ -70,7 +61,6 @@ export const trackPinchGesture = (
 export const finalizePinchRelease = (
 	release: PinchReleaseResult,
 	runtime: PinchGestureRuntime,
-	dismissScreen: ((finished: boolean) => void) | undefined,
 	requestDismiss?: () => void,
 ) => {
 	"worklet";
@@ -83,6 +73,9 @@ export const finalizePinchRelease = (
 		system.targetProgress.set(release.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - release.target) <= EPSILON;
+
 	if (release.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: release.handoffVelocity,
@@ -92,22 +85,28 @@ export const finalizePinchRelease = (
 	resetPinchGestureValues({
 		spec: release.resetSpec,
 		gestures,
+		animations,
 		shouldDismiss: release.shouldDismiss,
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
 
-	if (release.shouldDismiss && requestDismiss) {
-		scheduleOnRN(requestDismiss);
+	if (!release.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(release.target);
+		return;
 	}
 
 	animateToProgress({
 		target: release.target,
-		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
 		spec: release.transitionSpec,
 		emitWillAnimate: false,
 		markEntering: false,
 		animations,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		initialVelocity: release.initialVelocity,
 	});
+
+	if (release.shouldDismiss && requestDismiss) {
+		scheduleOnRN(requestDismiss);
+	}
 };

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

@@ -10,8 +10,12 @@ import {
 	resolveGestureSnapTransitionSpec,
 } from "../../shared/release";
 import {
+	getStepSnapProgressVelocityScale,
 	primeRuntimeSnapPoint,
 	resolveRuntimeGestureSnapPoints,
+	resolveRuntimeGestureSnapTargets,
+	resolveStepSnapProgress,
+	resolveStepSnapTargets,
 } from "../../shared/snap-points";
 import { determineSnapTarget } from "../../shared/targets";
 import type {
@@ -56,11 +60,13 @@ const getPinchSnapReleaseProgress = ({
 	normalizedScale,
 	minSnapPoint,
 	maxSnapPoint,
+	snapPoints,
 }: {
 	runtime: PinchGestureRuntime;
 	normalizedScale: number;
 	minSnapPoint: number;
 	maxSnapPoint: number;
+	snapPoints: number[];
 }) => {
 	"worklet";
 	const pinchDirection = getPinchSnapDirection(normalizedScale);
@@ -74,6 +80,13 @@ const getPinchSnapReleaseProgress = ({
 		snapDirections.collapse === pinchDirection
 			? -Math.abs(normalizedScale)
 			: Math.abs(normalizedScale);
+	if (runtime.policy.sheetSnapBehavior === "step") {
+		return resolveStepSnapProgress({
+			baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+			normalizedDelta: progressDelta,
+			snapPoints,
+		});
+	}
 
 	return clamp(
 		runtime.stores.gestures.internal.progressBaseline.get() + progressDelta,
@@ -95,7 +108,7 @@ export const resolvePinchRelease = (
 	const {
 		participation,
 		policy,
-		stores: { animations },
+		stores: { animations, system },
 	} = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
 	const currentProgress = animations.transitionProgress.get();
@@ -106,9 +119,7 @@ export const resolvePinchRelease = (
 			policy.pinchInEnabled,
 			policy.pinchOutEnabled,
 		);
-	const target = shouldDismiss
-		? 0
-		: runtime.stores.gestures.internal.progressBaseline.get();
+	const target = shouldDismiss ? 0 : system.targetProgress.get();
 	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,
@@ -143,11 +154,34 @@ export const resolveSnapPinchRelease = (
 
 	const { resolvedSnapPoints, resolvedMinSnapPoint, resolvedMaxSnapPoint } =
 		resolveRuntimeGestureSnapPoints(runtime);
+	const allSnapTargets = resolveRuntimeGestureSnapTargets(runtime);
+	const snapVelocity = getPinchSnapVelocity(event, runtime, normalizedScale);
+	const pinchDirection = getPinchSnapDirection(normalizedScale);
+	const progressDirection =
+		pinchDirection && policy.snapDirections
+			? policy.snapDirections.collapse === pinchDirection
+				? -1
+				: 1
+			: -snapVelocity;
+	const releaseSnapPoints =
+		policy.sheetSnapBehavior === "step"
+			? resolveStepSnapTargets({
+					baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+					direction: progressDirection,
+					snapPoints: allSnapTargets,
+				})
+			: resolvedSnapPoints;
+	const canDismissToReleaseTarget =
+		participation.canDismiss &&
+		(policy.gestureSnapLocked ||
+			policy.sheetSnapBehavior === "continuous" ||
+			releaseSnapPoints.includes(0));
 	const currentProgress = getPinchSnapReleaseProgress({
 		runtime,
 		normalizedScale,
 		minSnapPoint: resolvedMinSnapPoint,
 		maxSnapPoint: resolvedMaxSnapPoint,
+		snapPoints: allSnapTargets,
 	});
 
 	const result = determineSnapTarget({
@@ -157,16 +191,21 @@ export const resolveSnapPinchRelease = (
 					runtime.stores.gestures.internal.lockedSnapPoint.get() ??
 						resolvedMaxSnapPoint,
 				]
-			: resolvedSnapPoints,
-		velocity: getPinchSnapVelocity(event, runtime, normalizedScale),
+			: releaseSnapPoints,
+		velocity: snapVelocity,
 		dimension: 1,
 		velocityFactor: policy.gestureSnapVelocityImpact,
-		canDismiss: participation.canDismiss,
+		canDismiss: canDismissToReleaseTarget,
 	});
 
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
-	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
+	const progressVelocityScale =
+		policy.sheetSnapBehavior === "step" && !policy.gestureSnapLocked
+			? getStepSnapProgressVelocityScale(releaseSnapPoints)
+			: 1;
+	const progressVelocity =
+		getPinchReleaseHandoffVelocity(event.velocity) * progressVelocityScale;
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,
 		policy.gestureReleaseVelocityScale,

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

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../../types/animation.types";
 import { animateMany } from "../../shared/reset";
@@ -11,6 +12,7 @@ import {
 interface ResetPinchGestureValuesProps {
 	spec?: AnimationConfig;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
 	shouldDismiss: boolean;
 	resetValuesImmediately?: boolean;
 }
@@ -18,6 +20,7 @@ interface ResetPinchGestureValuesProps {
 export const resetPinchGestureValues = ({
 	spec,
 	gestures,
+	animations,
 	shouldDismiss,
 	resetValuesImmediately = false,
 }: ResetPinchGestureValuesProps) => {
@@ -29,11 +32,17 @@ export const resetPinchGestureValues = ({
 		}
 
 		clearFocalPoint(gestures);
-		gestures.active.set(null);
-		gestures.direction.set(null);
+		gestures.initiator.set(null);
 		gestures.settling.set(FALSE);
+		animations?.progressAnimating.set(FALSE);
+		animations?.progressSettled.set(TRUE);
 	};
 
+	if (animations && !shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawTransformValues(gestures);
 
 	gestures.dragging.set(FALSE);

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

@@ -26,7 +26,7 @@ export const usePinchBehavior = (
 	screenOptions: ScreenOptionsContextValue,
 	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
 ): PinchBehavior => {
-	const { dismissScreen, requestDismiss } = useNavigationHelpers();
+	const { requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
 		usePinchGestureSensitivity(screenOptions);
 
@@ -68,18 +68,12 @@ export const usePinchBehavior = (
 				.hasSnapPoints
 				? resolveSnapPinchRelease(event, latestRuntime)
 				: resolvePinchRelease(event, latestRuntime);
-			finalizePinchRelease(
-				release,
-				latestRuntime,
-				dismissScreen,
-				requestDismiss,
-			);
+			finalizePinchRelease(release, latestRuntime, requestDismiss);
 			gestureCompositionOwner.set(null);
 		},
 		[
 			runtime,
 			screenOptions,
-			dismissScreen,
 			requestDismiss,
 			withSensitivity,
 			gestureCompositionOwner,

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

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	GestureCompositionOwner,
@@ -21,7 +21,7 @@ export const useBuildPinchGesture = ({
 	gestureCompositionOwner,
 }: UseBuildPinchGestureProps): PinchGesture => {
 	const { participation, pinch: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

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

@@ -14,21 +14,20 @@ const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
 	horizontal: false,
 };
 
-const {
+export const {
 	ScrollMetadataOwnerProvider,
-	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
-} = createProvider("ScrollMetadataOwner", { guarded: false })<
+	useOptionalScrollMetadataOwnerStore,
+} = createProvider("ScrollMetadataOwner")<
 	ScrollMetadataOwnerProviderProps,
 	ScrollMetadataOwnerContextValue
 >(({ children, value }) => ({ children, value }));
 
-export const useScrollMetadataOwnerContext = () =>
-	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
-
 export const useScrollMetadataOwnerProviderValue = (
 	axis: ScrollGestureAxis,
 ) => {
-	const parent = useScrollMetadataOwnerContext();
+	const parent =
+		useOptionalScrollMetadataOwnerStore() ??
+		DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
 
 	return useMemo(() => {
 		if (parent[axis]) return parent;
@@ -39,5 +38,3 @@ export const useScrollMetadataOwnerProviderValue = (
 		};
 	}, [axis, parent]);
 };
-
-export { ScrollMetadataOwnerProvider };

package/src/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -10,7 +10,7 @@ import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-val
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
-import { useGestureContext } from "../gestures.provider";
+import { useOptionalScreenGestureStore } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
@@ -18,7 +18,7 @@ import type {
 	ScrollMetadataState,
 } from "../types";
 import {
-	useScrollMetadataOwnerContext,
+	useOptionalScrollMetadataOwnerStore,
 	useScrollMetadataOwnerProviderValue,
 } from "./scroll-metadata-owner";
 import {
@@ -88,21 +88,25 @@ const clearScrollMetadataAxis = (
 export const useScrollGestureCoordination = (
 	props: ScrollGestureCoordinationProps,
 ) => {
-	const context = useGestureContext();
+	const context = useOptionalScreenGestureStore();
 	const scrollDirection = props.direction ?? "vertical";
+	const gesturePath = useMemo(
+		() => (context ? [context, ...context.ancestorGestures] : []),
+		[context],
+	);
 
-	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerContext = useOptionalScrollMetadataOwnerStore();
 	const metadataOwnerProviderValue =
 		useScrollMetadataOwnerProviderValue(scrollDirection);
-	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];
+	const isFirstMetadataWriterInTree = !metadataOwnerContext?.[scrollDirection];
 	const [metadataWriterId] = useState(() =>
 		ScrollStore.createMetadataWriterId(),
 	);
 	const [writesMetadata, setWritesMetadata] = useState(false);
 
 	const { scrollStates, panGestures, pinchGestures, ownerRouteKeys } = useMemo(
-		() => walkUpScrollGestureCoordination(context, scrollDirection),
-		[context, scrollDirection],
+		() => walkUpScrollGestureCoordination(gesturePath, scrollDirection),
+		[gesturePath, scrollDirection],
 	);
 
 	const routeKey = context?.routeKey;

package/src/providers/screen/gestures/scroll-coordination/walk-up-scroll-gesture-coordination.ts

@@ -1,19 +1,18 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { Direction } from "../../../../types/ownership.types";
-import { walkGestureAncestors } from "../shared/ancestors";
 import type {
-	GestureContextType,
 	PanGesture,
 	PinchGesture,
+	ScreenGestureSource,
 	ScrollGestureAxis,
 	ScrollGestureState,
 } from "../types";
 
 /** Walks up the gesture tree until it finds the owner for a specific direction. */
 function findGestureOwnerForDirection(
-	ancestors: GestureContextType[],
+	ancestors: readonly ScreenGestureSource[],
 	direction: Direction,
-): GestureContextType | null {
+): ScreenGestureSource | null {
 	for (const ancestor of ancestors) {
 		if (ancestor.claimedDirections?.[direction]) return ancestor;
 	}
@@ -28,8 +27,10 @@ const getDirectionsForAxis = (
 		? ["vertical", "vertical-inverted"]
 		: ["horizontal", "horizontal-inverted"];
 
-const collectAncestorPinchGestures = (ancestors: GestureContextType[]) => {
-	const pinchGestures: GestureContextType["pinchGesture"][] = [];
+const collectAncestorPinchGestures = (
+	ancestors: readonly ScreenGestureSource[],
+) => {
+	const pinchGestures: ScreenGestureSource["pinchGesture"][] = [];
 
 	for (const ancestor of ancestors) {
 		if (!pinchGestures.includes(ancestor.pinchGesture)) {
@@ -41,12 +42,12 @@ const collectAncestorPinchGestures = (ancestors: GestureContextType[]) => {
 };
 
 const collectAxisOwners = (
-	ancestors: GestureContextType[],
+	ancestors: readonly ScreenGestureSource[],
 	directions: readonly [Direction, Direction],
 ) => {
-	const seenOwners: GestureContextType[] = [];
-	const panGestures: GestureContextType["panGesture"][] = [];
-	const scrollStates: GestureContextType["scrollState"][] = [];
+	const seenOwners: ScreenGestureSource[] = [];
+	const panGestures: ScreenGestureSource["panGesture"][] = [];
+	const scrollStates: ScreenGestureSource["scrollState"][] = [];
 	const ownerRouteKeys: string[] = [];
 
 	for (const direction of directions) {
@@ -73,10 +74,9 @@ interface WalkUpScrollGestureCoordinationResult {
 }
 
 export function walkUpScrollGestureCoordination(
-	context: GestureContextType | null,
+	ancestors: readonly ScreenGestureSource[],
 	axis: ScrollGestureAxis,
 ): WalkUpScrollGestureCoordinationResult {
-	const ancestors = walkGestureAncestors(context);
 	const axisOwners = collectAxisOwners(ancestors, getDirectionsForAxis(axis));
 
 	return {