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

package/src/shared/providers/register-bounds.provider.tsx

@@ -11,16 +11,16 @@ import {
 	useSharedValue,
 } from "react-native-reanimated";
 import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
+import { applyMeasuredBoundsWrites } from "../components/create-boundary-component/helpers/apply-measured-bounds-writes";
 import useStableCallback from "../hooks/use-stable-callback";
 import useStableCallbackValue from "../hooks/use-stable-callback-value";
 import { AnimationStore } from "../stores/animation.store";
-import { applyMeasuredBoundsWrites } from "../stores/bounds/helpers/apply-measured-bounds-writes";
+import { getEntry } from "../stores/bounds/internals/entries";
 import {
-	getMeasuredEntry,
 	getPendingLink,
 	hasDestinationLink,
 	hasSourceLink,
-} from "../stores/bounds/internals/registry";
+} from "../stores/bounds/internals/links";
 import { prepareStyleForBounds } from "../utils/bounds/helpers/styles/styles";
 import createProvider from "../utils/create-provider";
 import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
@@ -87,11 +87,14 @@ const useInitialLayoutHandler = (params: {
 		maybeMeasureAndStore,
 	} = params;
 
-	const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
+	const isAnimating = AnimationStore.getValue(
+		currentScreenKey,
+		"progressAnimating",
+	);
 
 	// Check if any ancestor is animating
 	const ancestorAnimations = ancestorKeys.map((key) =>
-		AnimationStore.getValue(key, "animating"),
+		AnimationStore.getValue(key, "progressAnimating"),
 	);
 
 	const hasMeasuredOnLayout = useSharedValue(false);
@@ -246,8 +249,7 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 		children,
 	}) => {
 		const { current, next } = useDescriptors();
-		const { ancestorKeys, navigatorKey, ancestorNavigatorKeys } =
-			useDescriptorDerivations();
+		const { ancestorKeys } = useDescriptorDerivations();
 		const currentScreenKey = current.route.key;
 		const selectedNextRouteId = getRouteParamId(next?.route);
 
@@ -258,7 +260,10 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 		const updateSignal: SharedValue<number> =
 			parentContext?.updateSignal ?? ownSignal;
 
-		const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
+		const isAnimating = AnimationStore.getValue(
+			currentScreenKey,
+			"progressAnimating",
+		);
 		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
 
 		const emitUpdate = useStableCallbackValue(() => {
@@ -281,13 +286,10 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				}
 
 				if (shouldSetSource && isAnimating.get()) {
-					const existing = getMeasuredEntry(sharedBoundTag, currentScreenKey);
-					if (existing) {
+					const existing = getEntry(sharedBoundTag, currentScreenKey);
+					if (existing?.bounds) {
 						applyMeasuredBoundsWrites({
 							sharedBoundTag,
-							ancestorKeys,
-							navigatorKey,
-							ancestorNavigatorKeys,
 							currentScreenKey,
 							measured: existing.bounds,
 							preparedStyles,
@@ -341,10 +343,6 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 					currentScreenKey,
 					measured,
 					preparedStyles,
-					ancestorKeys,
-					navigatorKey,
-					ancestorNavigatorKeys,
-					shouldWriteEntry: true,
 					shouldSetSource: canSetSource,
 					shouldUpdateSource: canUpdateSource,
 					shouldSetDestination: canSetDestination,

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

@@ -1,7 +1,21 @@
-import { type ReactNode, useContext } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+} from "react";
+import { useSharedValue } from "react-native-reanimated";
+import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type { ScreenAnimationSource } from "./types";
+import type {
+	RegisterScreenAnimationDescendant,
+	ScreenAnimationAncestorDescendantRegistrar,
+	ScreenAnimationDescendantSources,
+	ScreenAnimationSource,
+	ScreenAnimationTransitionSource,
+} from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -11,6 +25,9 @@ export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
 	ancestorScreenAnimationSources: ScreenAnimationSource[];
+	descendantScreenAnimationSources: ScreenAnimationDescendantSources;
+	registerDescendantScreenAnimationSource: RegisterScreenAnimationDescendant;
+	ancestorDescendantScreenAnimationRegistrars: ScreenAnimationAncestorDescendantRegistrar[];
 };
 
 export type ScreenAnimationContextResult = {
@@ -25,31 +42,170 @@ export const {
 	guarded: true,
 })<Props, ScreenAnimationContextValue>((): ScreenAnimationContextResult => {
 	const parentContext = useContext(ScreenAnimationContext);
+	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,
-		boundsAccessor,
 	} = useScreenAnimationPipeline();
 
-	const ancestorScreenAnimationSources = parentContext
-		? [
-				{
-					screenInterpolatorProps: parentContext.screenInterpolatorProps,
-					boundsAccessor: parentContext.boundsAccessor,
-				},
-				...parentContext.ancestorScreenAnimationSources,
-			]
-		: [];
+	const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
+		() => ({
+			screenInterpolatorProps,
+			screenInterpolatorPropsRevision,
+		}),
+		[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,
-			boundsAccessor,
 			ancestorScreenAnimationSources,
+			descendantScreenAnimationSources,
+			registerDescendantScreenAnimationSource,
+			ancestorDescendantScreenAnimationRegistrars,
 		},
 	};
 });

package/src/shared/providers/screen/animation/helpers/accessors/use-build-bounds-accessor.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { createBoundsAccessor } from "../../../../../utils/bounds";
+import { useScreenAnimationContext } from "../../animation.provider";
+
+export const useBuildBoundsAccessor = () => {
+	const { screenInterpolatorProps } = useScreenAnimationContext();
+	return useMemo(() => {
+		return createBoundsAccessor(() => {
+			"worklet";
+			return screenInterpolatorProps.get();
+		});
+	}, [screenInterpolatorProps]);
+};

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

@@ -0,0 +1,158 @@
+import { useMemo } from "react";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionTarget,
+} from "../../../../../types/animation.types";
+import { createBoundsAccessor } from "../../../../../utils/bounds";
+import { useScreenAnimationContext } from "../../animation.provider";
+import type {
+	ScreenAnimationDescendantSources,
+	ScreenAnimationSource,
+	ScreenAnimationTransitionSource,
+} from "../../types";
+
+type TransitionSourceIndex = number;
+
+export type TransitionAccessorSource = ScreenAnimationTransitionSource;
+
+const resolveTargetIndex = (
+	target: ScreenTransitionTarget | undefined,
+	currentIndex: TransitionSourceIndex,
+	sourceCount: number,
+): TransitionSourceIndex => {
+	"worklet";
+	if (sourceCount <= 0) return -1;
+
+	if (
+		target !== undefined &&
+		(typeof target !== "object" || target === null || !("depth" in target))
+	) {
+		return -1;
+	}
+
+	const depth = target?.depth ?? 0;
+	if (!Number.isInteger(depth)) return -1;
+
+	const resolvedIndex = currentIndex + depth;
+	return resolvedIndex >= 0 && resolvedIndex < sourceCount ? resolvedIndex : -1;
+};
+
+export const createTransitionAccessor = (
+	sources: readonly TransitionAccessorSource[],
+	originIndex = 0,
+	descendantSources?: ScreenAnimationDescendantSources,
+) => {
+	"worklet";
+
+	const getSources = (): TransitionAccessorSource[] => {
+		"worklet";
+		if (!descendantSources) {
+			return [...sources];
+		}
+
+		const descendants = descendantSources.get();
+		if (descendants.length === 0) {
+			return [...sources];
+		}
+
+		return [...sources, ...descendants.map(({ source }) => source)];
+	};
+
+	const buildScope = (
+		sourceIndex: TransitionSourceIndex,
+	): ScreenInterpolationProps | null => {
+		"worklet";
+		const currentSources = getSources();
+		const source = currentSources[sourceIndex];
+		if (!source) return null;
+
+		source.screenInterpolatorPropsRevision.get();
+		const frame = source.screenInterpolatorProps.get();
+
+		return {
+			...frame,
+			bounds: source.boundsAccessor,
+			transition: (target?: ScreenTransitionTarget) => {
+				"worklet";
+				const targetIndex = resolveTargetIndex(
+					target,
+					sourceIndex,
+					currentSources.length,
+				);
+
+				if (targetIndex === -1) {
+					return null;
+				}
+
+				return buildScope(targetIndex);
+			},
+		};
+	};
+
+	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
+		"worklet";
+		const currentSources = getSources();
+		const targetIndex = resolveTargetIndex(
+			target,
+			originIndex,
+			currentSources.length,
+		);
+		if (targetIndex === -1) {
+			return null;
+		}
+
+		return buildScope(targetIndex);
+	};
+};
+
+const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
+	"worklet";
+	return createBoundsAccessor(() => {
+		"worklet";
+		return source.screenInterpolatorProps.get();
+	});
+};
+
+export const useBuildTransitionAccessor = () => {
+	const {
+		screenInterpolatorProps,
+		screenInterpolatorPropsRevision,
+		ancestorScreenAnimationSources,
+		descendantScreenAnimationSources,
+	} = useScreenAnimationContext();
+
+	return useMemo(() => {
+		const selfSource = {
+			screenInterpolatorProps,
+			screenInterpolatorPropsRevision,
+		};
+
+		const ancestorTransitionSources = ancestorScreenAnimationSources.map(
+			(source) => ({
+				...source,
+				boundsAccessor: buildSourceBoundsAccessor(source),
+			}),
+		);
+
+		const selfTransitionSource = {
+			...selfSource,
+			boundsAccessor: buildSourceBoundsAccessor(selfSource),
+		};
+
+		const transitionSources: TransitionAccessorSource[] = [
+			...[...ancestorTransitionSources].reverse(),
+			selfTransitionSource,
+		];
+
+		return createTransitionAccessor(
+			transitionSources,
+			ancestorTransitionSources.length,
+			descendantScreenAnimationSources,
+		);
+	}, [
+		screenInterpolatorProps,
+		screenInterpolatorPropsRevision,
+		ancestorScreenAnimationSources,
+		descendantScreenAnimationSources,
+	]);
+};

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

@@ -0,0 +1,63 @@
+import type {
+	GestureActivationArea,
+	GestureDirection,
+	ScreenTransitionConfig,
+	ScreenTransitionOptions,
+} from "../../../../types";
+import {
+	gestureProgressModeDrivesProgress,
+	resolveGestureProgressMode,
+} from "../../../../utils/gesture-progress-mode";
+import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
+
+const cloneGestureDirection = (
+	direction: GestureDirection | GestureDirection[] | undefined,
+) => (Array.isArray(direction) ? [...direction] : direction);
+
+const cloneGestureActivationArea = (
+	activationArea: GestureActivationArea | undefined,
+) =>
+	typeof activationArea === "object" && activationArea !== null
+		? { ...activationArea }
+		: activationArea;
+
+export const buildScreenTransitionOptions = (
+	options: ScreenTransitionConfig,
+): ScreenTransitionOptions => {
+	const hasSheetScrollGestureBehavior =
+		options.sheetScrollGestureBehavior !== undefined ||
+		options.expandViaScrollView !== undefined;
+	const hasGestureProgressMode =
+		options.gestureProgressMode !== undefined ||
+		options.gestureDrivesProgress !== undefined;
+	const gestureProgressMode = hasGestureProgressMode
+		? resolveGestureProgressMode({
+				gestureProgressMode: options.gestureProgressMode,
+				gestureDrivesProgress: options.gestureDrivesProgress,
+			})
+		: undefined;
+
+	return {
+		gestureEnabled: options.gestureEnabled,
+		experimental_allowDisabledGestureTracking:
+			options.experimental_allowDisabledGestureTracking,
+		gestureDirection: cloneGestureDirection(options.gestureDirection),
+		gestureSensitivity: options.gestureSensitivity,
+		gestureVelocityImpact: options.gestureVelocityImpact,
+		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
+		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
+		gestureResponseDistance: options.gestureResponseDistance,
+		gestureProgressMode,
+		gestureDrivesProgress: gestureProgressMode
+			? gestureProgressModeDrivesProgress(gestureProgressMode)
+			: undefined,
+		gestureActivationArea: cloneGestureActivationArea(
+			options.gestureActivationArea,
+		),
+		gestureSnapLocked: options.gestureSnapLocked,
+		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior
+			? resolveSheetScrollGestureBehavior(options)
+			: undefined,
+		backdropBehavior: options.backdropBehavior,
+	};
+};

package/src/shared/providers/screen/animation/helpers/derivations.ts

@@ -1,33 +1,20 @@
 import type { ScreenTransitionState } from "../../../../types/animation.types";
 
-interface DerivationsParams {
+interface DerivationsTarget {
 	previous?: ScreenTransitionState;
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
+	progress: number;
+	focused: boolean;
+	active: ScreenTransitionState;
+	inactive: ScreenTransitionState | undefined;
 }
 
-/**
- * Additional values to help make defining animations easier.
- */
-export const derivations = ({ previous, current, next }: DerivationsParams) => {
+export const updateDerivations = (frame: DerivationsTarget) => {
 	"worklet";
 
-	// The combined progress (current + next, 0-2 range)
-	const progress = current.progress + (next?.progress ?? 0);
-
-	// Whether the current screen is focused
-	const focused = !next;
-
-	// The screen driving the transition
-	const active = focused ? current : (next ?? current);
-
-	// The screen NOT driving the transition
-	const inactive = focused ? previous : current;
-
-	return {
-		progress,
-		focused,
-		active,
-		inactive,
-	};
+	frame.progress = frame.current.progress + (frame.next?.progress ?? 0);
+	frame.focused = !frame.next;
+	frame.active = frame.focused ? frame.current : (frame.next ?? frame.current);
+	frame.inactive = frame.focused ? frame.previous : frame.current;
 };