react-native-screen-transitions 3.6.0-alpha.1 → 3.6.0-alpha.2

package/src/shared/providers/screen/gestures/pan/pan-activation.ts

@@ -128,5 +128,8 @@ export const usePanActivation = ({
 		],
 	);
 
-	return { onTouchesDown, onTouchesMove };
+	return useMemo(
+		() => ({ onTouchesDown, onTouchesMove }),
+		[onTouchesDown, onTouchesMove],
+	);
 };

package/src/shared/providers/screen/gestures/pan/pan-lifecycle.ts

@@ -2,7 +2,10 @@ import { clamp } from "react-native-reanimated";
 import { EPSILON, FALSE, TRUE } from "../../../../constants";
 import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
 import { emit } from "../../../../utils/animation/emit";
-import { normalizeGestureTranslation } from "../shared/physics";
+import {
+	normalizeGestureTranslation,
+	resolveGestureVelocity,
+} from "../shared/physics";
 import type {
 	GestureDimensions,
 	PanGestureEvent,
@@ -36,6 +39,7 @@ export const startPanBase = (runtime: PanGestureRuntime) => {
 	gestures.y.set(0);
 	gestures.normX.set(0);
 	gestures.normY.set(0);
+	gestures.velocity.set(0);
 	gestures.raw.x.set(0);
 	gestures.raw.y.set(0);
 	gestures.raw.normX.set(0);
@@ -51,18 +55,28 @@ export const trackPanGesture = (
 ): PanTrackState => {
 	"worklet";
 	const { translationX: x, translationY: y } = event;
-	const { translationX: rawX, translationY: rawY } = rawEvent;
+	const {
+		translationX: rawX,
+		translationY: rawY,
+		velocityX,
+		velocityY,
+	} = rawEvent;
 	const { width, height } = dimensions;
 
 	const normX = clamp(normalizeGestureTranslation(x, width), -1, 1);
 	const normY = clamp(normalizeGestureTranslation(y, height), -1, 1);
 	const rawNormX = clamp(normalizeGestureTranslation(rawX, width), -1, 1);
 	const rawNormY = clamp(normalizeGestureTranslation(rawY, height), -1, 1);
+	const velocity = resolveGestureVelocity(
+		velocityX / Math.max(1, width),
+		velocityY / Math.max(1, height),
+	);
 
 	gestures.x.set(x);
 	gestures.y.set(y);
 	gestures.normX.set(normX);
 	gestures.normY.set(normY);
+	gestures.velocity.set(velocity);
 	gestures.raw.x.set(rawX);
 	gestures.raw.y.set(rawY);
 	gestures.raw.normX.set(rawNormX);
@@ -73,6 +87,7 @@ export const trackPanGesture = (
 		y,
 		normX,
 		normY,
+		velocity,
 	};
 };
 
@@ -102,6 +117,7 @@ export const finalizePanRelease = (
 		velocityY: plan.resetVelocityY,
 		velocityNormX: plan.resetVelocityNormX,
 		velocityNormY: plan.resetVelocityNormY,
+		releaseVelocity: plan.releaseVelocity,
 		resetNormalizedValues: plan.resetNormalizedValues,
 		resetNormalizedValuesImmediately: plan.resetNormalizedValuesImmediately,
 		preserveRawValues: plan.preserveRawValues,

package/src/shared/providers/screen/gestures/pan/pan-release.ts

@@ -6,6 +6,7 @@ import {
 import {
 	getPanReleaseHandoffVelocity,
 	getPanReleaseProgressVelocity,
+	resolveGestureVelocity,
 } from "../shared/physics";
 import {
 	getProgressVelocityTowardTarget,
@@ -24,6 +25,26 @@ import type {
 	PanReleaseResult,
 } from "../types";
 
+const resolvePanReleaseVelocity = (
+	runtime: PanGestureRuntime,
+	velocityNormX: number,
+	velocityNormY: number,
+) => {
+	"worklet";
+	const activeGesture = runtime.stores.gestures.active.get();
+
+	switch (activeGesture) {
+		case "horizontal":
+		case "horizontal-inverted":
+			return resolveGestureVelocity(velocityNormX, 0);
+		case "vertical":
+		case "vertical-inverted":
+			return resolveGestureVelocity(0, velocityNormY);
+		default:
+			return resolveGestureVelocity(velocityNormX, velocityNormY);
+	}
+};
+
 const resolveActivePanSnapAxis = (runtime: PanGestureRuntime) => {
 	"worklet";
 	const activeGesture = runtime.stores.gestures.active.get();
@@ -226,6 +247,17 @@ export const buildPanReleasePlan = (
 		resetVelocityScale === 0 ? 0 : rawEvent.velocityX * resetVelocityScale;
 	const resetVelocityY =
 		resetVelocityScale === 0 ? 0 : rawEvent.velocityY * resetVelocityScale;
+	const releaseVelocityNormX =
+		rawEvent.velocityX / Math.max(1, dimensions.width);
+	const releaseVelocityNormY =
+		rawEvent.velocityY / Math.max(1, dimensions.height);
+	const releaseVelocity = release.shouldDismiss
+		? resolvePanReleaseVelocity(
+				runtime,
+				releaseVelocityNormX,
+				releaseVelocityNormY,
+			)
+		: 0;
 
 	return {
 		target: release.target,
@@ -235,6 +267,7 @@ export const buildPanReleasePlan = (
 		resetVelocityY,
 		resetVelocityNormX: resetVelocityX / Math.max(1, dimensions.width),
 		resetVelocityNormY: resetVelocityY / Math.max(1, dimensions.height),
+		releaseVelocity,
 		resetNormalizedValues: !release.shouldDismiss || progressDriven,
 		resetNormalizedValuesImmediately:
 			release.resetNormalizedValuesImmediately === true,

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

@@ -15,6 +15,7 @@ interface ResetPanGestureValuesProps {
 	velocityY?: number;
 	velocityNormX?: number;
 	velocityNormY?: number;
+	releaseVelocity?: number;
 	resetNormalizedValues?: boolean;
 	resetNormalizedValuesImmediately?: boolean;
 	preserveRawValues?: boolean;
@@ -42,6 +43,7 @@ export const resetPanGestureValues = ({
 	velocityY,
 	velocityNormX,
 	velocityNormY,
+	releaseVelocity,
 	resetNormalizedValues = true,
 	resetNormalizedValuesImmediately = false,
 	preserveRawValues = shouldDismiss,
@@ -58,6 +60,7 @@ export const resetPanGestureValues = ({
 	gestures.dragging.set(FALSE);
 	gestures.dismissing.set(shouldDismiss ? TRUE : FALSE);
 	gestures.settling.set(shouldDismiss ? FALSE : TRUE);
+	gestures.velocity.set(shouldDismiss ? (releaseVelocity ?? 0) : 0);
 
 	animateResetValue(gestures.x, 0, getGestureResetSpec(spec, velocityX), () =>
 		clearPanSettlingIfResting(gestures),

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import { useNavigationHelpers } from "../../../../hooks/navigation/use-navigation-helpers";
 import type { ScreenOptionsContextValue } from "../../options";
@@ -81,9 +81,12 @@ export const usePanBehavior = (
 		[runtime, screenOptions, dimensions, dismissScreen, withSensitivity],
 	);
 
-	return {
-		onStart,
-		onUpdate,
-		onEnd,
-	};
+	return useMemo(
+		() => ({
+			onStart,
+			onUpdate,
+			onEnd,
+		}),
+		[onStart, onUpdate, onEnd],
+	);
 };

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import type {
 	GestureStateManager,
 	GestureTouchEvent,
@@ -68,5 +68,8 @@ export const usePinchActivation = ({
 		[runtime, screenOptions],
 	);
 
-	return { onTouchesDown, onTouchesMove };
+	return useMemo(
+		() => ({ onTouchesDown, onTouchesMove }),
+		[onTouchesDown, onTouchesMove],
+	);
 };

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

@@ -33,6 +33,7 @@ export const startPinchBase = (
 	gestures.settling.set(0);
 	gestures.active.set(null);
 	gestures.direction.set(null);
+	gestures.velocity.set(0);
 	gestures.scale.set(1);
 	gestures.normScale.set(0);
 	gestures.raw.scale.set(1);

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import { useNavigationHelpers } from "../../../../hooks/navigation/use-navigation-helpers";
 import type { ScreenOptionsContextValue } from "../../options";
@@ -74,9 +74,12 @@ export const usePinchBehavior = (
 		[runtime, screenOptions, dismissScreen, withSensitivity],
 	);
 
-	return {
-		onStart,
-		onUpdate,
-		onEnd,
-	};
+	return useMemo(
+		() => ({
+			onStart,
+			onUpdate,
+			onEnd,
+		}),
+		[onStart, onUpdate, onEnd],
+	);
 };

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

@@ -18,6 +18,8 @@ type GestureAxisCandidate = {
 	velocityContribution: number;
 };
 
+const FULL_GESTURE_VELOCITY_PROGRESS_PER_SECOND = 4;
+
 /**
  * Converts a pan velocity from pixels/second into progress/second.
  */
@@ -29,6 +31,29 @@ export const toProgressVelocity = (
 	return velocityPixelsPerSecond / Math.max(1, screenSize);
 };
 
+/**
+ * Converts normalized pan 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 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,
+	);
+};
+
 /**
  * Converts pan release velocity into a spring handoff in progress units/second.
  */

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

@@ -62,9 +62,7 @@ const resolveGestureDirection = (options: GesturePolicyOptions) => {
 	return options.gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
 };
 
-export function resolveGestureProgressModePolicy(
-	options: GesturePolicyOptions,
-) {
+function resolveGestureProgressModePolicy(options: GesturePolicyOptions) {
 	"worklet";
 	return resolveGestureProgressMode({
 		gestureProgressMode: options.gestureProgressMode,
@@ -131,7 +129,7 @@ const resolvePinchDirections = (
 	};
 };
 
-export const resolveGestureCanDismiss = ({
+const resolveGestureCanDismiss = ({
 	isFirstKey,
 	gestureEnabled,
 }: {
@@ -215,7 +213,7 @@ export const resolvePinchPolicy = (
 	};
 };
 
-export const resolveGestureParticipation = ({
+const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
 	gestureContext,

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

@@ -160,6 +160,7 @@ export interface PanTrackState {
 	y: number;
 	normX: number;
 	normY: number;
+	velocity: number;
 }
 
 export interface PinchTrackState {
@@ -185,6 +186,7 @@ export interface PanReleasePlan {
 	resetVelocityY: number;
 	resetVelocityNormX: number;
 	resetVelocityNormY: number;
+	releaseVelocity: number;
 	resetNormalizedValues: boolean;
 	resetNormalizedValuesImmediately: boolean;
 	preserveRawValues: boolean;

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -8,7 +8,6 @@ import type {
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
 import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
-import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
@@ -55,7 +54,6 @@ export const useInterpolatedStylesMap = () => {
 		currentInterpolator,
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
-	const transition = useBuildTransitionAccessor();
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
@@ -126,7 +124,6 @@ export const useInterpolatedStylesMap = () => {
 				progress: effectiveProgress,
 				next: effectiveNext,
 				bounds: boundsAccessor,
-				transition,
 			});
 
 			const rawStyleMap: TransitionInterpolatedStyle | undefined =

package/src/shared/stores/bounds/helpers/link-pairs.helpers.ts

@@ -0,0 +1,161 @@
+import type {
+	GroupKey,
+	LinkGroupState,
+	LinkKey,
+	LinkPairState,
+	LinkPairsState,
+	ScreenIdentifier,
+	ScreenPairKey,
+	TagLink,
+} from "../types";
+
+const PAIR_SEPARATOR = "<>";
+
+export const createScreenPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+	destinationScreenKey: ScreenIdentifier["screenKey"] | "",
+): ScreenPairKey => {
+	"worklet";
+	return `${sourceScreenKey}${PAIR_SEPARATOR}${destinationScreenKey}`;
+};
+
+export const createPendingPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+): ScreenPairKey => {
+	"worklet";
+	return createScreenPairKey(sourceScreenKey, "");
+};
+
+export const getSourceScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return pairKey;
+	return pairKey.slice(0, separatorIndex);
+};
+
+export const getDestinationScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] | "" => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return "";
+	return pairKey.slice(separatorIndex + PAIR_SEPARATOR.length);
+};
+
+export const isScreenPairKeyForScreen = (
+	pairKey: ScreenPairKey,
+	screenKey: ScreenIdentifier["screenKey"],
+): boolean => {
+	"worklet";
+	return (
+		pairKey === createPendingPairKey(screenKey) ||
+		pairKey.startsWith(`${screenKey}${PAIR_SEPARATOR}`) ||
+		pairKey.endsWith(`${PAIR_SEPARATOR}${screenKey}`)
+	);
+};
+
+export const getLinkKeyFromTag = (tag: string): LinkKey => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return tag;
+	return tag.slice(separatorIndex + 1);
+};
+
+export const getGroupKeyFromTag = (tag: string): GroupKey | null => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return null;
+	return tag.slice(0, separatorIndex);
+};
+
+export const createGroupTag = (group: GroupKey, linkKey: LinkKey): string => {
+	"worklet";
+	return `${group}:${linkKey}`;
+};
+
+export const ensurePairState = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): LinkPairState => {
+	"worklet";
+	if (!state[pairKey]) {
+		state[pairKey] = {
+			links: {},
+			groups: {},
+		};
+	}
+	state[pairKey].groups ??= {};
+	return state[pairKey];
+};
+
+export const ensurePairLinks = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, TagLink> => {
+	"worklet";
+	return ensurePairState(state, pairKey).links;
+};
+
+export const ensurePairGroups = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<GroupKey, LinkGroupState> => {
+	"worklet";
+	return ensurePairState(state, pairKey).groups;
+};
+
+export const removePairLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	const pair = state[pairKey];
+	if (!pair) return;
+
+	delete pair.links[linkKey];
+
+	for (const key in pair.links) {
+		if (pair.links[key]) return;
+	}
+
+	delete state[pairKey];
+};
+
+export const getLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink | null => {
+	"worklet";
+	return state[pairKey]?.links[linkKey] ?? null;
+};
+
+export const getSource = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["source"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.source ?? null;
+};
+
+export const getDestination = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["destination"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.destination ?? null;
+};
+
+export const getActiveGroupId = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+): LinkKey | null => {
+	"worklet";
+	return state[pairKey]?.groups?.[group]?.activeId ?? null;
+};

package/src/shared/stores/bounds/index.ts

@@ -1,16 +1,11 @@
 import { clear } from "./internals/clear";
 import { getEntry, removeEntry, setEntry } from "./internals/entries";
 import {
-	getGroupActiveId,
-	getGroupInitialId,
-	setGroupActiveId,
-	setGroupInitialId,
-} from "./internals/groups";
-import {
-	getMatchedLink,
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
+	getActiveGroupId,
+	getDestination,
+	getLink,
+	getSource,
+	setActiveGroupId,
 	setDestination,
 	setSource,
 } from "./internals/links";
@@ -37,17 +32,12 @@ export const BoundStore = {
 	link: {
 		setSource,
 		setDestination,
-		getMatched: getMatchedLink,
+		setActiveGroupId,
+		getLink,
+		getSource,
+		getDestination,
+		getActiveGroupId,
 		getPair: resolveTransitionPair,
-		getPending: getPendingLink,
-		hasSource: hasSourceLink,
-		hasDestination: hasDestinationLink,
-	},
-	group: {
-		setActiveId: setGroupActiveId,
-		setInitialId: setGroupInitialId,
-		getActiveId: getGroupActiveId,
-		getInitialId: getGroupInitialId,
 	},
 	cleanup: {
 		byScreen: clear,

package/src/shared/stores/bounds/internals/clear.ts

@@ -1,59 +1,35 @@
 import { hasAnyKeys } from "../helpers/keys";
-import { matchesScreenKey } from "../helpers/matching";
-import type { ScreenEntry, ScreenKey, TagLink } from "../types";
-import { type RegistryState, registry } from "./state";
+import { isScreenPairKeyForScreen } from "../helpers/link-pairs.helpers";
+import type { LinkPairsState, ScreenKey } from "../types";
+import { type BoundaryEntriesState, boundaryRegistry, pairs } from "./state";
 
-type LinkPredicate = (link: TagLink) => boolean;
-
-type ScreenPredicate = (
-	screenKey: ScreenKey,
-	screenEntry: ScreenEntry,
-) => boolean;
-
-const clearRegistry = (
-	shouldClearScreen: ScreenPredicate,
-	shouldClearLink: LinkPredicate,
-) => {
+function clear(screenKey: ScreenKey) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
 		for (const tag in state) {
 			const tagState = state[tag];
+			delete tagState.screens[screenKey];
 
-			for (const entryScreenKey in tagState.screens) {
-				const screenEntry = tagState.screens[entryScreenKey];
-				if (shouldClearScreen(entryScreenKey, screenEntry)) {
-					delete tagState.screens[entryScreenKey];
-				}
+			if (!hasAnyKeys(tagState.screens)) {
+				delete state[tag];
 			}
+		}
 
-			for (let i = tagState.linkStack.length - 1; i >= 0; i--) {
-				const link = tagState.linkStack[i];
-				if (shouldClearLink(link)) {
-					tagState.linkStack.splice(i, 1);
-				}
-			}
+		return state;
+	});
 
-			if (!hasAnyKeys(tagState.screens) && tagState.linkStack.length === 0) {
-				delete state[tag];
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		for (const pairKey in state) {
+			if (isScreenPairKeyForScreen(pairKey, screenKey)) {
+				delete state[pairKey];
 			}
 		}
 
 		return state;
 	});
-};
-
-function clear(screenKey: ScreenKey) {
-	"worklet";
-	clearRegistry(
-		(entryScreenKey) => entryScreenKey === screenKey,
-		(link) => {
-			return (
-				matchesScreenKey(link.source, screenKey) ||
-				matchesScreenKey(link.destination, screenKey)
-			);
-		},
-	);
 }
 
 export { clear };