react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.9

package/src/providers/screen/animation/animation.provider.tsx

@@ -1,15 +1,10 @@
-import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
-import { useSharedValue } from "react-native-reanimated";
+import { type ReactNode, useMemo } from "react";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
+import { useDescriptorsStore } from "../descriptors";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type {
-	RegisterScreenAnimationDescendant,
-	ScreenAnimationAncestorDescendantRegistrar,
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "./types";
+import type { ScreenAnimationTransitionSource } from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -18,191 +13,76 @@ type Props = {
 export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
-	ancestorScreenAnimationSources: ScreenAnimationSource[];
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources;
-	registerDescendantScreenAnimationSource: RegisterScreenAnimationDescendant;
-	ancestorDescendantScreenAnimationRegistrars: ScreenAnimationAncestorDescendantRegistrar[];
+	transitionSources: readonly ScreenAnimationTransitionSource[];
+	transitionOriginIndex: number;
+	transitionSourcesThroughSelf: readonly ScreenAnimationTransitionSource[];
+	transitionSourcesFromSelf: readonly ScreenAnimationTransitionSource[];
 };
 
-export type ScreenAnimationContextResult = {
-	value: ScreenAnimationContextValue;
-};
-
-export const { ScreenAnimationProvider, useScreenAnimationStore } =
-	createProvider("ScreenAnimation", {
-		guarded: true,
-	})<Props, ScreenAnimationContextValue>(
-		(_props, { useParentStore }): ScreenAnimationContextResult => {
-			const parentContext = useParentStore();
-			const parentScreenInterpolatorProps =
-				parentContext?.screenInterpolatorProps;
-			const parentScreenInterpolatorPropsRevision =
-				parentContext?.screenInterpolatorPropsRevision;
-			const parentAncestorScreenAnimationSources =
-				parentContext?.ancestorScreenAnimationSources;
-			const parentRegisterDescendantScreenAnimationSource =
-				parentContext?.registerDescendantScreenAnimationSource;
-			const parentAncestorDescendantScreenAnimationRegistrars =
-				parentContext?.ancestorDescendantScreenAnimationRegistrars;
-
-			const {
-				screenInterpolatorProps,
-				screenInterpolatorPropsRevision,
-				selectedInterpolatorOptions,
-				nextInterpolator,
-				currentInterpolator,
-			} = useScreenAnimationPipeline();
-
-			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
-				() => ({
-					screenInterpolatorProps,
-					screenInterpolatorPropsRevision,
+const EMPTY_TRANSITION_SOURCES: readonly ScreenAnimationTransitionSource[] = [];
+
+const createScreenAnimationProvider = createProvider("ScreenAnimation", {
+	global: true,
+})<Props, ScreenAnimationContextValue>;
+
+export const {
+	ScreenAnimationProvider,
+	useOptionalScreenAnimationStore,
+	useScreenAnimationStore,
+}: ReturnType<typeof createScreenAnimationProvider> =
+	createScreenAnimationProvider((_props) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const relationships = useCurrentScreenRelationships();
+		const pipeline = useScreenAnimationPipeline();
+
+		const screenAnimationSource = useMemo<ScreenAnimationTransitionSource>(
+			() => ({
+				screenInterpolatorProps: pipeline.screenInterpolatorProps,
+				screenInterpolatorPropsRevision:
+					pipeline.screenInterpolatorPropsRevision,
+				boundsAccessor: createBoundsAccessor(() => {
+					"worklet";
+					return pipeline.screenInterpolatorProps.get();
 				}),
-				[screenInterpolatorProps, screenInterpolatorPropsRevision],
-			);
-
-			const selfScreenAnimationTransitionSource =
-				useMemo<ScreenAnimationTransitionSource>(
-					() => ({
-						...selfScreenAnimationSource,
-						boundsAccessor: createBoundsAccessor(() => {
-							"worklet";
-							return selfScreenAnimationSource.screenInterpolatorProps.get();
-						}),
-					}),
-					[selfScreenAnimationSource],
-				);
-
-			const descendantScreenAnimationSources = useSharedValue<
-				ScreenAnimationDescendantSources["value"]
-			>([]);
-
-			const registerDescendantScreenAnimationSource =
-				useCallback<RegisterScreenAnimationDescendant>(
-					(source, depth) => {
-						descendantScreenAnimationSources.modify(
-							<T extends ScreenAnimationDescendantSources["value"]>(
-								currentSources: T,
-							): T => {
-								"worklet";
-								const existingIndex = currentSources.findIndex(
-									(currentSource) => currentSource.source === source,
-								);
-
-								if (
-									existingIndex !== -1 &&
-									currentSources[existingIndex]?.depth === depth
-								) {
-									return currentSources;
-								}
-
-								const nextSources =
-									existingIndex === -1
-										? [...currentSources, { source, depth }]
-										: currentSources.map((currentSource, index) =>
-												index === existingIndex
-													? { source, depth }
-													: currentSource,
-											);
-
-								return nextSources.sort((a, b) => a.depth - b.depth) as T;
-							},
-						);
-
-						return () => {
-							descendantScreenAnimationSources.modify(
-								<T extends ScreenAnimationDescendantSources["value"]>(
-									currentSources: T,
-								): T => {
-									"worklet";
-									return currentSources.filter(
-										(currentSource) => currentSource.source !== source,
-									) as T;
-								},
-							);
-						};
-					},
-					[descendantScreenAnimationSources],
-				);
-
-			const ancestorScreenAnimationSources = useMemo(() => {
-				if (
-					!parentScreenInterpolatorProps ||
-					!parentScreenInterpolatorPropsRevision ||
-					!parentAncestorScreenAnimationSources
-				) {
-					return [];
-				}
-
-				return [
-					{
-						screenInterpolatorProps: parentScreenInterpolatorProps,
-						screenInterpolatorPropsRevision:
-							parentScreenInterpolatorPropsRevision,
-					},
-					...parentAncestorScreenAnimationSources,
-				];
-			}, [
-				parentScreenInterpolatorProps,
-				parentScreenInterpolatorPropsRevision,
-				parentAncestorScreenAnimationSources,
-			]);
-
-			const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
-				if (!parentRegisterDescendantScreenAnimationSource) {
-					return [];
-				}
-
-				// Each provider exposes its own descendant registrar and forwards ancestor
-				// registrars, letting a mounted child register with every ancestor scope.
-				return [
-					{
-						register: parentRegisterDescendantScreenAnimationSource,
-						depth: 1,
-					},
-					...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
-						(registrar) => ({
-							register: registrar.register,
-							depth: registrar.depth + 1,
-						}),
-					),
-				];
-			}, [
-				parentRegisterDescendantScreenAnimationSource,
-				parentAncestorDescendantScreenAnimationRegistrars,
-			]);
-
-			useLayoutEffect(() => {
-				const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
-					(registrar) =>
-						registrar.register(
-							selfScreenAnimationTransitionSource,
-							registrar.depth,
-						),
-				);
-
-				return () => {
-					for (const cleanup of cleanups) {
-						cleanup();
-					}
-				};
-			}, [
-				ancestorDescendantScreenAnimationRegistrars,
-				selfScreenAnimationTransitionSource,
-			]);
-
-			return {
-				value: {
-					screenInterpolatorProps,
-					screenInterpolatorPropsRevision,
-					selectedInterpolatorOptions,
-					nextInterpolator,
-					currentInterpolator,
-					ancestorScreenAnimationSources,
-					descendantScreenAnimationSources,
-					registerDescendantScreenAnimationSource,
-					ancestorDescendantScreenAnimationRegistrars,
-				},
-			};
-		},
-	);
+			}),
+			[
+				pipeline.screenInterpolatorProps,
+				pipeline.screenInterpolatorPropsRevision,
+			],
+		);
+		const ancestorSources =
+			useOptionalScreenAnimationStore(
+				relationships.parentScreenKey,
+				(store) => store.transitionSourcesThroughSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const descendantSources =
+			useOptionalScreenAnimationStore(
+				relationships.activeChildScreenKey,
+				(store) => store.transitionSourcesFromSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const transitionSourcesThroughSelf = useMemo(
+			() => [...ancestorSources, screenAnimationSource],
+			[ancestorSources, screenAnimationSource],
+		);
+		const transitionSourcesFromSelf = useMemo(
+			() => [screenAnimationSource, ...descendantSources],
+			[screenAnimationSource, descendantSources],
+		);
+		const transitionSources = useMemo(
+			() => [...transitionSourcesThroughSelf, ...descendantSources],
+			[transitionSourcesThroughSelf, descendantSources],
+		);
+
+		return {
+			key: currentScreenKey,
+			value: {
+				...pipeline,
+				transitionSources,
+				transitionOriginIndex: ancestorSources.length,
+				transitionSourcesThroughSelf,
+				transitionSourcesFromSelf,
+			},
+		};
+	});

package/src/providers/screen/animation/helpers/accessors/use-build-transition-accessor.ts

@@ -3,18 +3,18 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
-import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationStore } from "../../animation.provider";
-import type {
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "../../types";
+import type { ScreenAnimationContextValue } from "../../animation.provider";
+import type { ScreenAnimationTransitionSource } from "../../types";
 
 type TransitionSourceIndex = number;
 
 export type TransitionAccessorSource = ScreenAnimationTransitionSource;
 
+type TransitionAccessorStore = Pick<
+	ScreenAnimationContextValue,
+	"transitionSources" | "transitionOriginIndex"
+>;
+
 const resolveTargetIndex = (
 	target: ScreenTransitionTarget | undefined,
 	currentIndex: TransitionSourceIndex,
@@ -40,29 +40,9 @@ const resolveTargetIndex = (
 export const createTransitionAccessor = (
 	sources: readonly TransitionAccessorSource[],
 	originIndex = 0,
-	descendantSources?: ScreenAnimationDescendantSources,
 ) => {
 	"worklet";
 
-	const getSources = (): readonly TransitionAccessorSource[] => {
-		"worklet";
-		if (!descendantSources) {
-			return sources;
-		}
-
-		const descendants = descendantSources.get();
-		if (descendants.length === 0) {
-			return sources;
-		}
-
-		const currentSources = sources.slice();
-		for (let index = 0; index < descendants.length; index++) {
-			currentSources.push(descendants[index].source);
-		}
-
-		return currentSources;
-	};
-
 	const buildScope = (
 		sourceIndex: TransitionSourceIndex,
 		currentSources: readonly TransitionAccessorSource[],
@@ -96,66 +76,21 @@ export const createTransitionAccessor = (
 
 	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
 		"worklet";
-		const currentSources = getSources();
-		const targetIndex = resolveTargetIndex(
-			target,
-			originIndex,
-			currentSources.length,
-		);
+		const targetIndex = resolveTargetIndex(target, originIndex, sources.length);
 		if (targetIndex === -1) {
 			return null;
 		}
 
-		return buildScope(targetIndex, currentSources);
+		return buildScope(targetIndex, sources);
 	};
 };
 
-const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
-	"worklet";
-	return createBoundsAccessor(() => {
-		"worklet";
-		return source.screenInterpolatorProps.get();
-	});
-};
-
-export const useBuildTransitionAccessor = () => {
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-
-	return useMemo(() => {
-		const selfSource = {
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		};
-
-		const transitionSources: TransitionAccessorSource[] =
-			ancestorScreenAnimationSources.map((source) => ({
-				...source,
-				boundsAccessor: buildSourceBoundsAccessor(source),
-			}));
-
-		const selfTransitionSource = {
-			...selfSource,
-			boundsAccessor: buildSourceBoundsAccessor(selfSource),
-		};
-
-		transitionSources.reverse();
-		const originIndex = transitionSources.length;
-		transitionSources.push(selfTransitionSource);
-
-		return createTransitionAccessor(
-			transitionSources,
-			originIndex,
-			descendantScreenAnimationSources,
-		);
-	}, [
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	]);
+export const useBuildTransitionAccessor = ({
+	transitionSources,
+	transitionOriginIndex,
+}: TransitionAccessorStore) => {
+	return useMemo(
+		() => createTransitionAccessor(transitionSources, transitionOriginIndex),
+		[transitionSources, transitionOriginIndex],
+	);
 };

package/src/providers/screen/animation/helpers/build-screen-transition-options.ts

@@ -7,10 +7,6 @@ import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-scr
 export const buildScreenTransitionOptions = (
 	options: ScreenTransitionConfig,
 ): ScreenTransitionOptions => {
-	const hasSheetScrollGestureBehavior =
-		options.sheetScrollGestureBehavior !== undefined ||
-		options.expandViaScrollView !== undefined;
-
 	return {
 		navigationMaskEnabled: options.navigationMaskEnabled,
 		gestureEnabled: options.gestureEnabled,
@@ -20,14 +16,12 @@ export const buildScreenTransitionOptions = (
 		gestureVelocityImpact: options.gestureVelocityImpact,
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
 		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
-		gestureResponseDistance: options.gestureResponseDistance,
-		gestureProgressMode: options.gestureProgressMode,
-		gestureDrivesProgress: options.gestureDrivesProgress,
-		gestureActivationArea: options.gestureActivationArea,
 		gestureSnapLocked: options.gestureSnapLocked,
-		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior
-			? resolveSheetScrollGestureBehavior(options)
-			: undefined,
+		sheetSnapBehavior: options.sheetSnapBehavior,
+		sheetScrollGestureBehavior:
+			options.sheetScrollGestureBehavior !== undefined
+				? resolveSheetScrollGestureBehavior(options)
+				: undefined,
 		backdropBehavior: options.backdropBehavior,
 	};
 };

package/src/providers/screen/animation/helpers/hydrate-transition-state/gesture-progress.ts

@@ -4,6 +4,7 @@ import type {
 	GestureDirectionOption,
 	GestureValues,
 } from "../../../../../types/gesture.types";
+import type { SheetSnapBehavior } from "../../../../../types/screen.types";
 import {
 	getPanActivationDirections,
 	getPanSnapAxisConfigForDirection,
@@ -12,6 +13,7 @@ import {
 	getSnapPinchDirectionConfig,
 	isResolvedPanGestureDirection,
 } from "../../../gestures/shared/directions";
+import { resolveStepSnapProgress } from "../../../gestures/shared/snap-points";
 import type { SnapBounds } from "./types";
 
 type PanProgressDelta = {
@@ -26,11 +28,14 @@ const resolvePanGestureAffectedProgress = (
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[],
+	sheetSnapBehavior: SheetSnapBehavior,
 ) => {
 	"worklet";
 
 	if (hasSnapPoints) {
-		const activeGesture = gesture.active;
+		const activeGesture =
+			gesture.initiator === "none" ? null : gesture.initiator;
 		const activeAxis = isResolvedPanGestureDirection(activeGesture)
 			? getPanSnapAxisConfigForDirection(
 					getPanSnapAxisDirections(gestureDirection),
@@ -45,6 +50,13 @@ const resolvePanGestureAffectedProgress = (
 		const axisValue =
 			activeAxis.axis === "horizontal" ? progressDelta.x : progressDelta.y;
 		const signedProgressDelta = activeAxis.config.progressSign * axisValue;
+		if (sheetSnapBehavior === "step") {
+			return resolveStepSnapProgress({
+				baseline: transitionProgress,
+				normalizedDelta: signedProgressDelta,
+				snapPoints,
+			});
+		}
 
 		return clamp(
 			transitionProgress + signedProgressDelta,
@@ -84,6 +96,8 @@ const resolvePinchGestureAffectedProgress = (
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[],
+	sheetSnapBehavior: SheetSnapBehavior,
 ) => {
 	"worklet";
 	const pinchDirection =
@@ -107,6 +121,13 @@ const resolvePinchGestureAffectedProgress = (
 			snapDirections.collapse === pinchDirection
 				? -Math.abs(gesture.normScale)
 				: Math.abs(gesture.normScale);
+		if (sheetSnapBehavior === "step") {
+			return resolveStepSnapProgress({
+				baseline: transitionProgress,
+				normalizedDelta: progressDelta,
+				snapPoints,
+			});
+		}
 
 		return clamp(
 			transitionProgress + progressDelta,
@@ -133,6 +154,8 @@ export const resolveGestureAffectedProgress = (
 	panProgressDelta: PanProgressDelta,
 	gestureDirection: GestureDirectionOption | undefined,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[] = [],
+	sheetSnapBehavior: SheetSnapBehavior = "continuous",
 ) => {
 	"worklet";
 	const resolvedGestureDirection =
@@ -141,8 +164,8 @@ export const resolveGestureAffectedProgress = (
 	const hasSnapPoints = snapBounds !== null;
 
 	if (
-		gesture.active === "pinch-in" ||
-		gesture.active === "pinch-out" ||
+		gesture.initiator === "pinch-in" ||
+		gesture.initiator === "pinch-out" ||
 		Math.abs(gesture.normScale) > EPSILON
 	) {
 		return resolvePinchGestureAffectedProgress(
@@ -151,6 +174,8 @@ export const resolveGestureAffectedProgress = (
 			resolvedGestureDirection,
 			hasSnapPoints,
 			snapBounds,
+			snapPoints,
+			sheetSnapBehavior,
 		);
 	}
 
@@ -161,5 +186,7 @@ export const resolveGestureAffectedProgress = (
 		resolvedGestureDirection,
 		hasSnapPoints,
 		snapBounds,
+		snapPoints,
+		sheetSnapBehavior,
 	);
 };

package/src/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -33,16 +33,10 @@ const mergeTransitionOptions = (
 		effective.gestureSnapVelocityImpact ?? base.gestureSnapVelocityImpact;
 	slot.gestureReleaseVelocityScale =
 		effective.gestureReleaseVelocityScale ?? base.gestureReleaseVelocityScale;
-	slot.gestureResponseDistance =
-		effective.gestureResponseDistance ?? base.gestureResponseDistance;
-	slot.gestureProgressMode =
-		effective.gestureProgressMode ?? base.gestureProgressMode;
-	slot.gestureDrivesProgress =
-		effective.gestureDrivesProgress ?? base.gestureDrivesProgress;
-	slot.gestureActivationArea =
-		effective.gestureActivationArea ?? base.gestureActivationArea;
 	slot.gestureSnapLocked =
 		effective.gestureSnapLocked ?? base.gestureSnapLocked;
+	slot.sheetSnapBehavior =
+		effective.sheetSnapBehavior ?? base.sheetSnapBehavior;
 	slot.sheetScrollGestureBehavior =
 		effective.sheetScrollGestureBehavior ?? base.sheetScrollGestureBehavior;
 	slot.backdropBehavior = effective.backdropBehavior ?? base.backdropBehavior;
@@ -64,6 +58,22 @@ export const hydrateTransitionState = (
 		s.optionsSlot,
 	);
 	const canDismiss = options.gestureEnabled !== false;
+	const resolvedSnapPoints = [...s.sortedNumericSnapPoints];
+	const resolvedAutoSnapPoint = s.hasAutoSnapPoint
+		? s.resolvedAutoSnapPoint.get()
+		: null;
+	if (resolvedAutoSnapPoint !== null) {
+		resolvedSnapPoints.push(resolvedAutoSnapPoint);
+	}
+	if (canDismiss) {
+		resolvedSnapPoints.push(0);
+	}
+	resolvedSnapPoints.sort((a, b) => a - b);
+	for (let index = resolvedSnapPoints.length - 1; index > 0; index--) {
+		if (resolvedSnapPoints[index] === resolvedSnapPoints[index - 1]) {
+			resolvedSnapPoints.splice(index, 1);
+		}
+	}
 	out.transitionProgress = transitionProgress;
 	out.willAnimate = s.willAnimate.get();
 	out.closing = s.closing.get();
@@ -90,9 +100,7 @@ export const hydrateTransitionState = (
 	out.gesture.dismissing = s.gesture.dismissing.get();
 	out.gesture.dragging = s.gesture.dragging.get();
 	out.gesture.settling = s.gesture.settling.get();
-	out.gesture.active = s.gesture.active.get();
-	out.gesture.initiator = out.gesture.active ?? "none";
-	out.gesture.direction = s.gesture.direction.get();
+	out.gesture.initiator = s.gesture.initiator.get() ?? "none";
 	const handoff = out.gesture.handoff;
 	const useHandoffSnapshot = out.gesture.dismissing;
 
@@ -155,10 +163,7 @@ export const hydrateTransitionState = (
 		: out.gesture.raw.rotation;
 	handoff.active = useHandoffSnapshot
 		? s.gesture.internal.snapshot.active.get()
-		: out.gesture.active;
-	handoff.direction = useHandoffSnapshot
-		? s.gesture.internal.snapshot.direction.get()
-		: out.gesture.direction;
+		: s.gesture.initiator.get();
 	out.progress = resolveGestureAffectedProgress(
 		transitionProgress,
 		out.gesture,
@@ -172,6 +177,8 @@ export const hydrateTransitionState = (
 			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
 			canDismiss,
 		),
+		resolvedSnapPoints,
+		options.sheetSnapBehavior,
 	);
 
 	if (s.visualProgress.get() !== out.progress) {
@@ -180,13 +187,7 @@ export const hydrateTransitionState = (
 
 	out.animating = s.progressAnimating.get();
 
-	out.gesture.normalizedX = out.gesture.normX;
-	out.gesture.normalizedY = out.gesture.normY;
-	out.gesture.isDismissing = out.gesture.dismissing;
-	out.gesture.isDragging = out.gesture.dragging;
-
 	out.settled = s.progressSettled.get();
-	out.logicallySettled = out.settled;
 
 	out.meta = s.meta;
 	out.options = options;

package/src/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -11,7 +11,6 @@ import type { BaseStackRoute } from "../../../../../types/stack.types";
 export type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;