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

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
 import {
@@ -9,13 +9,23 @@ import {
 import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-value-state";
 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 type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 } from "../types";
-import { updateScrollGestureAxisState } from "./update-scroll-gesture-state";
+import {
+	useScrollMetadataOwnerContext,
+	useScrollMetadataOwnerProviderValue,
+} from "./scroll-metadata-owner";
+import {
+	clearScrollMetadataAxisState,
+	updateScrollGestureAxisState,
+	updateScrollMetadataAxisState,
+} from "./update-scroll-gesture-state";
 import { walkUpScrollGestureCoordination } from "./walk-up-scroll-gesture-coordination";
 
 interface ScrollGestureCoordinationProps {
@@ -41,6 +51,31 @@ const modifyScrollGestureAxisState = (
 	});
 };
 
+const modifyScrollMetadataAxisState = (
+	scrollState: SharedValue<ScrollMetadataState | null>,
+	axis: ScrollGestureAxis,
+	patch: ScrollGesturePatch,
+) => {
+	"worklet";
+
+	scrollState.modify(<T extends ScrollMetadataState | null>(state: T): T => {
+		"worklet";
+		return updateScrollMetadataAxisState(state, axis, patch) as T;
+	});
+};
+
+const clearScrollMetadataAxis = (
+	scrollState: SharedValue<ScrollMetadataState | null>,
+	axis: ScrollGestureAxis,
+) => {
+	"worklet";
+
+	scrollState.modify(<T extends ScrollMetadataState | null>(state: T): T => {
+		"worklet";
+		return clearScrollMetadataAxisState(state, axis) as T;
+	});
+};
+
 /**
  * Returns scroll handlers and a native gesture for ScrollView coordination.
  *
@@ -56,11 +91,63 @@ export const useScrollGestureCoordination = (
 	const context = useGestureContext();
 	const scrollDirection = props.direction ?? "vertical";
 
+	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerProviderValue =
+		useScrollMetadataOwnerProviderValue(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],
 	);
 
+	const routeKey = context?.routeKey;
+	const metadataState = useMemo(
+		() => (routeKey ? ScrollStore.getValue(routeKey, "metadata") : null),
+		[routeKey],
+	);
+
+	useLayoutEffect(() => {
+		if (!routeKey || !isFirstMetadataWriterInTree) {
+			setWritesMetadata(false);
+			return;
+		}
+
+		const claimed = ScrollStore.claimMetadataWriter(
+			routeKey,
+			scrollDirection,
+			metadataWriterId,
+		);
+		setWritesMetadata(claimed);
+
+		return () => {
+			const released = ScrollStore.releaseMetadataWriter(
+				routeKey,
+				scrollDirection,
+				metadataWriterId,
+			);
+
+			if (!released || !metadataState) return;
+
+			if (!ScrollStore.hasMetadataWriters(routeKey)) {
+				metadataState.set(null);
+				return;
+			}
+
+			clearScrollMetadataAxis(metadataState, scrollDirection);
+		};
+	}, [
+		routeKey,
+		scrollDirection,
+		isFirstMetadataWriterInTree,
+		metadataState,
+		metadataWriterId,
+	]);
+
 	const ownerClosingValues = useMemo(
 		() =>
 			ownerRouteKeys.map((routeKey) =>
@@ -92,6 +179,12 @@ export const useScrollGestureCoordination = (
 					isTouched: true,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					isTouched: true,
+				});
+			}
 		};
 
 		const clearIsTouched = () => {
@@ -101,6 +194,12 @@ export const useScrollGestureCoordination = (
 					isTouched: false,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					isTouched: false,
+				});
+			}
 		};
 
 		let gesture = Gesture.Native()
@@ -121,12 +220,17 @@ export const useScrollGestureCoordination = (
 		}
 
 		return gesture;
-	}, [panGestures, pinchGestures, scrollStates, scrollDirection]);
+	}, [
+		panGestures,
+		pinchGestures,
+		scrollStates,
+		scrollDirection,
+		writesMetadata,
+		metadataState,
+	]);
 
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
-			if (scrollStates.length === 0) return;
-
 			const offset =
 				scrollDirection === "horizontal"
 					? event.contentOffset.x
@@ -135,7 +239,14 @@ export const useScrollGestureCoordination = (
 			for (const scrollState of scrollStates) {
 				modifyScrollGestureAxisState(scrollState, scrollDirection, {
 					offset,
-					isTouched: scrollState.get()?.isTouched ?? true,
+					isTouched: scrollState.get()?.[scrollDirection].isTouched ?? true,
+				});
+			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					offset,
+					isTouched: metadataState.get()?.[scrollDirection]?.isTouched ?? true,
 				});
 			}
 		},
@@ -144,7 +255,6 @@ export const useScrollGestureCoordination = (
 	const onContentSizeChange = useStableCallback(
 		(width: number, height: number) => {
 			props.onContentSizeChange?.(width, height);
-			if (scrollStates.length === 0) return;
 
 			const contentSize = scrollDirection === "horizontal" ? width : height;
 
@@ -153,12 +263,17 @@ export const useScrollGestureCoordination = (
 					contentSize,
 				});
 			}
+
+			if (writesMetadata && metadataState) {
+				modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+					contentSize,
+				});
+			}
 		},
 	);
 
 	const onLayout = useStableCallback((event: LayoutChangeEvent) => {
 		props.onLayout?.(event);
-		if (scrollStates.length === 0) return;
 
 		const { width, height } = event.nativeEvent.layout;
 		const layoutSize = scrollDirection === "horizontal" ? width : height;
@@ -168,6 +283,12 @@ export const useScrollGestureCoordination = (
 				layoutSize,
 			});
 		}
+
+		if (writesMetadata && metadataState) {
+			modifyScrollMetadataAxisState(metadataState, scrollDirection, {
+				layoutSize,
+			});
+		}
 	});
 
 	return {
@@ -176,5 +297,6 @@ export const useScrollGestureCoordination = (
 		onContentSizeChange,
 		onLayout,
 		nativeGesture,
+		metadataOwnerProviderValue,
 	};
 };

package/src/shared/providers/screen/gestures/shared/physics.ts

@@ -10,7 +10,6 @@ interface CalculateProgressProps {
 	event: PanGestureEvent;
 	dimensions: { width: number; height: number };
 	directions: GestureDirections;
-	gestureReleaseVelocityScale?: number;
 }
 
 type GestureAxisCandidate = {
@@ -32,25 +31,28 @@ export const toProgressVelocity = (
 };
 
 /**
- * Converts normalized pan velocity into a 0-1 scalar for interpolators.
+ * Converts normalized gesture velocity into a 0-1 scalar for interpolators.
  *
  * `1` means the velocity reached or exceeded the library's full-velocity
  * threshold, not a physical maximum for the device.
  */
+export const resolveGestureVelocityMagnitude = (velocity: number) => {
+	"worklet";
+
+	return Math.min(
+		1,
+		Math.abs(velocity) / FULL_GESTURE_VELOCITY_PROGRESS_PER_SECOND,
+	);
+};
+
 export const resolveGestureVelocity = (
 	velocityNormX: number,
 	velocityNormY: number,
 ) => {
 	"worklet";
 
-	const dominantVelocity = Math.max(
-		Math.abs(velocityNormX),
-		Math.abs(velocityNormY),
-	);
-
-	return Math.min(
-		1,
-		dominantVelocity / FULL_GESTURE_VELOCITY_PROGRESS_PER_SECOND,
+	return resolveGestureVelocityMagnitude(
+		Math.max(Math.abs(velocityNormX), Math.abs(velocityNormY)),
 	);
 };
 
@@ -85,7 +87,6 @@ const getPanAxisCandidate = (
 	translationTowardDismiss: number,
 	velocityTowardDismiss: number,
 	screenSize: number,
-	gestureReleaseVelocityScale?: number,
 ): GestureAxisCandidate | null => {
 	"worklet";
 	if (!isEnabled || translationTowardDismiss <= 0) {
@@ -97,7 +98,6 @@ const getPanAxisCandidate = (
 		velocityContribution: getPanReleaseHandoffVelocity(
 			velocityTowardDismiss,
 			screenSize,
-			gestureReleaseVelocityScale,
 		),
 	};
 };
@@ -116,11 +116,7 @@ const collectPanAxisCandidates = ({
 	event,
 	dimensions,
 	directions,
-	gestureReleaseVelocityScale,
-}: Pick<
-	CalculateProgressProps,
-	"event" | "dimensions" | "directions" | "gestureReleaseVelocityScale"
->) => {
+}: Pick<CalculateProgressProps, "event" | "dimensions" | "directions">) => {
 	"worklet";
 	const candidates: GestureAxisCandidate[] = [];
 
@@ -131,7 +127,6 @@ const collectPanAxisCandidates = ({
 			event.translationX,
 			event.velocityX,
 			dimensions.width,
-			gestureReleaseVelocityScale,
 		),
 	);
 	pushPanAxisCandidate(
@@ -141,7 +136,6 @@ const collectPanAxisCandidates = ({
 			-event.translationX,
 			-event.velocityX,
 			dimensions.width,
-			gestureReleaseVelocityScale,
 		),
 	);
 	pushPanAxisCandidate(
@@ -151,7 +145,6 @@ const collectPanAxisCandidates = ({
 			event.translationY,
 			event.velocityY,
 			dimensions.height,
-			gestureReleaseVelocityScale,
 		),
 	);
 	pushPanAxisCandidate(
@@ -161,7 +154,6 @@ const collectPanAxisCandidates = ({
 			-event.translationY,
 			-event.velocityY,
 			dimensions.height,
-			gestureReleaseVelocityScale,
 		),
 	);
 
@@ -190,21 +182,15 @@ const getDominantPanCandidateVelocity = (
 const getFallbackPanReleaseVelocityMagnitude = ({
 	event,
 	dimensions,
-	gestureReleaseVelocityScale,
-}: Pick<
-	CalculateProgressProps,
-	"event" | "dimensions" | "gestureReleaseVelocityScale"
->) => {
+}: Pick<CalculateProgressProps, "event" | "dimensions">) => {
 	"worklet";
 	const normalizedVelocityX = getPanReleaseHandoffVelocity(
 		event.velocityX,
 		dimensions.width,
-		gestureReleaseVelocityScale,
 	);
 	const normalizedVelocityY = getPanReleaseHandoffVelocity(
 		event.velocityY,
 		dimensions.height,
-		gestureReleaseVelocityScale,
 	);
 
 	return Math.max(Math.abs(normalizedVelocityX), Math.abs(normalizedVelocityY));
@@ -232,11 +218,10 @@ export const getPanReleaseProgressVelocity = ({
 	event,
 	dimensions,
 	directions,
-	gestureReleaseVelocityScale,
 }: CalculateProgressProps) => {
 	"worklet";
 
-	const currentProgress = animations.progress.get();
+	const currentProgress = animations.transitionProgress.get();
 	const targetProgress = shouldDismiss ? 0 : 1;
 	const progressDelta = targetProgress - currentProgress;
 
@@ -247,7 +232,6 @@ export const getPanReleaseProgressVelocity = ({
 			event,
 			dimensions,
 			directions,
-			gestureReleaseVelocityScale,
 		}),
 	);
 	const progressVelocityMagnitude =
@@ -255,7 +239,6 @@ export const getPanReleaseProgressVelocity = ({
 		getFallbackPanReleaseVelocityMagnitude({
 			event,
 			dimensions,
-			gestureReleaseVelocityScale,
 		});
 
 	return progressDirection * progressVelocityMagnitude;

package/src/shared/providers/screen/gestures/shared/policy.ts

@@ -1,7 +1,6 @@
 import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
-	DEFAULT_GESTURE_PROGRESS_MODE,
 	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 	DEFAULT_GESTURE_SENSITIVITY,
 	DEFAULT_GESTURE_SNAP_LOCKED,
@@ -15,7 +14,6 @@ import type {
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
 	GestureDirectionOption,
-	GestureProgressMode,
 	ResolvedGestureActivationArea,
 } from "../../../../types/gesture.types";
 import type {
@@ -24,7 +22,6 @@ import type {
 	SheetScrollGestureBehavior,
 	SnapPoint,
 } from "../../../../types/screen.types";
-import { resolveGestureProgressMode } from "../../../../utils/gesture-progress-mode";
 import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
 import { resolveOwnership } from "../ownership/resolve-ownership";
 import type {
@@ -49,9 +46,7 @@ export type GesturePolicyOptions = {
 	expandViaScrollView?: boolean;
 	gestureActivationArea?: GestureActivationArea;
 	gestureDirection?: GestureDirectionOption;
-	gestureDrivesProgress?: boolean;
 	gestureEnabled?: boolean;
-	gestureProgressMode?: GestureProgressMode;
 	gestureTracking?: GestureTracking;
 	gestureReleaseVelocityScale?: number;
 	gestureResponseDistance?: number;
@@ -155,19 +150,9 @@ const resolveGestureActivationArea = (
 	);
 };
 
-function resolveGestureProgressModePolicy(options: GesturePolicyOptions) {
-	"worklet";
-	return resolveGestureProgressMode({
-		gestureProgressMode: options.gestureProgressMode,
-		gestureDrivesProgress: options.gestureDrivesProgress,
-		fallback: DEFAULT_GESTURE_PROGRESS_MODE,
-	});
-}
-
 const resolveCommonGesturePolicy = (options: GesturePolicyOptions) => {
 	"worklet";
 	return {
-		gestureProgressMode: resolveGestureProgressModePolicy(options),
 		gestureSensitivity:
 			options.gestureSensitivity ?? DEFAULT_GESTURE_SENSITIVITY,
 		gestureSnapVelocityImpact:

package/src/shared/providers/screen/gestures/shared/reset.ts

@@ -1,6 +1,4 @@
 import type { SharedValue } from "react-native-reanimated";
-import { FALSE } from "../../../../constants";
-import type { GestureStoreMap } from "../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../types/animation.types";
 import {
 	animate,
@@ -10,12 +8,18 @@ import {
 
 type ResetSpringSpec = SpringAnimationConfig & { velocity?: number };
 
+type AnimateManyJob = {
+	value: SharedValue<number>;
+	toValue: number;
+	velocity?: number;
+};
+
 const isResetSpringSpec = (spec?: AnimationConfig): spec is ResetSpringSpec => {
 	"worklet";
 	return isSpringAnimationConfig(spec);
 };
 
-export const getGestureResetSpec = (
+const getGestureResetSpec = (
 	spec?: AnimationConfig,
 	velocity?: number,
 ): AnimationConfig | undefined => {
@@ -34,7 +38,7 @@ export const getGestureResetSpec = (
 	return { ...resetSpec, velocity };
 };
 
-export const animateResetValue = (
+const animateResetValue = (
 	value: SharedValue<number>,
 	toValue: number,
 	config: AnimationConfig | undefined,
@@ -51,16 +55,34 @@ export const animateResetValue = (
 	);
 };
 
-export const clearGestureSettlingIfResting = (
-	gestures: GestureStoreMap,
-	isResting: boolean,
+export const animateMany = (
+	jobs: AnimateManyJob[],
+	spec: AnimationConfig | undefined,
+	onFinished: () => void,
 ) => {
 	"worklet";
-	if (!isResting) {
+	let pendingJobs = jobs.length;
+
+	if (pendingJobs === 0) {
+		onFinished();
 		return;
 	}
 
-	gestures.active.set(null);
-	gestures.direction.set(null);
-	gestures.settling.set(FALSE);
+	const finishJob = () => {
+		"worklet";
+		pendingJobs -= 1;
+
+		if (pendingJobs === 0) {
+			onFinished();
+		}
+	};
+
+	for (const job of jobs) {
+		animateResetValue(
+			job.value,
+			job.toValue,
+			getGestureResetSpec(spec, job.velocity),
+			finishJob,
+		);
+	}
 };

package/src/shared/providers/screen/gestures/shared/snap-points.ts

@@ -232,19 +232,20 @@ export const primeRuntimeSnapPoint = (
 	"worklet";
 	const {
 		policy,
-		stores: { animations },
-		lockedSnapPoint,
+		stores: { animations, gestures },
 	} = runtime;
 
-	const { resolvedSnapPoints, resolvedMaxSnapPoint } =
-		resolveRuntimeGestureSnapPoints(runtime);
+	const { resolvedSnapPoints } = resolveRuntimeGestureSnapPoints(runtime);
 
 	if (policy.gestureSnapLocked) {
-		lockedSnapPoint.set(
-			findNearestSnapPoint(animations.progress.get(), resolvedSnapPoints),
+		gestures.internal.lockedSnapPoint.set(
+			findNearestSnapPoint(
+				animations.transitionProgress.get(),
+				resolvedSnapPoints,
+			),
 		);
 		return;
 	}
 
-	lockedSnapPoint.set(resolvedMaxSnapPoint);
+	gestures.internal.lockedSnapPoint.set(null);
 };

package/src/shared/providers/screen/gestures/shared/snapshot.ts

@@ -0,0 +1,33 @@
+import type { GestureStoreMap } from "../../../../stores/gesture.store";
+
+type SnapshotGestureHandoffOptions = {
+	velocity?: number;
+};
+
+export const snapshotGestureHandoff = (
+	gestures: GestureStoreMap,
+	options?: SnapshotGestureHandoffOptions,
+) => {
+	"worklet";
+	const snapshot = gestures.internal.snapshot;
+
+	snapshot.x.set(gestures.x.get());
+	snapshot.y.set(gestures.y.get());
+	snapshot.normX.set(gestures.normX.get());
+	snapshot.normY.set(gestures.normY.get());
+	snapshot.velocity.set(options?.velocity ?? gestures.velocity.get());
+	snapshot.scale.set(gestures.scale.get());
+	snapshot.normScale.set(gestures.normScale.get());
+	snapshot.focalX.set(gestures.focalX.get());
+	snapshot.focalY.set(gestures.focalY.get());
+	snapshot.rotation.set(gestures.rotation.get());
+	snapshot.raw.x.set(gestures.raw.x.get());
+	snapshot.raw.y.set(gestures.raw.y.get());
+	snapshot.raw.normX.set(gestures.raw.normX.get());
+	snapshot.raw.normY.set(gestures.raw.normY.get());
+	snapshot.raw.scale.set(gestures.raw.scale.get());
+	snapshot.raw.normScale.set(gestures.raw.normScale.get());
+	snapshot.raw.rotation.set(gestures.raw.rotation.get());
+	snapshot.active.set(gestures.active.get());
+	snapshot.direction.set(gestures.direction.get());
+};

package/src/shared/providers/screen/gestures/shared/values.ts

@@ -0,0 +1,52 @@
+import type { GestureStoreMap } from "../../../../stores/gesture.store";
+
+export const clearRawPanValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.raw.x.set(0);
+	gestures.raw.y.set(0);
+	gestures.raw.normX.set(0);
+	gestures.raw.normY.set(0);
+};
+
+export const clearPanProgressDeltaValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.internal.progressDeltaX.set(0);
+	gestures.internal.progressDeltaY.set(0);
+};
+
+export const clearPanProgressValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.x.set(0);
+	gestures.y.set(0);
+	gestures.normX.set(0);
+	gestures.normY.set(0);
+	clearPanProgressDeltaValues(gestures);
+};
+
+export const clearPanTrackingValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	clearPanProgressValues(gestures);
+	clearRawPanValues(gestures);
+	gestures.velocity.set(0);
+};
+
+export const clearFocalPoint = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.focalX.set(0);
+	gestures.focalY.set(0);
+};
+
+export const clearRawTransformValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.raw.scale.set(1);
+	gestures.raw.normScale.set(0);
+	gestures.raw.rotation.set(0);
+};
+
+export const clearTransformTrackingValues = (gestures: GestureStoreMap) => {
+	"worklet";
+	gestures.scale.set(1);
+	gestures.normScale.set(0);
+	gestures.rotation.set(0);
+	clearRawTransformValues(gestures);
+};