react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

package/src/hooks/use-stable-callback-value.ts

@@ -1,72 +0,0 @@
-/**
- * Credit:
- * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/integrations/reanimated/hooks/useStableCallbackValue.ts
- */
-import { useCallback, useEffect, useState } from "react";
-import { cancelAnimation, makeMutable } from "react-native-reanimated";
-import { isWorkletFunction, scheduleOnRN } from "react-native-worklets";
-
-type AnyFunction = (...args: Array<any>) => any;
-
-function useMutableValue<T>(initialValue: T) {
-	const [mutable] = useState(() => makeMutable(initialValue));
-
-	useEffect(() => {
-		return () => {
-			cancelAnimation(mutable);
-		};
-	}, [mutable]);
-
-	return mutable;
-}
-
-// We cannot store a function as a SharedValue because reanimated will treat
-// it as an animation and will try to execute the animation when assigned
-// to the SharedValue. Since we want the function to be treated as a value,
-// we wrap it in an object and store the object in the SharedValue.
-type WrappedCallback<C extends AnyFunction> = {
-	call: C;
-};
-
-const wrap = <C extends AnyFunction>(callback: C): WrappedCallback<C> => {
-	if (isWorkletFunction(callback)) {
-		return { call: callback };
-	}
-	return {
-		call: ((...args: Parameters<C>) => {
-			"worklet";
-			scheduleOnRN(callback, ...args);
-		}) as C,
-	};
-};
-
-/** Creates a stable worklet callback that can be called from the UI runtime
- * @param callback The JavaScript or worklet function to be called
- * @returns A worklet function that can be safely called from the UI thread
- * @default Behavior:
- * - If passed a regular JS function, schedules it on the JS thread
- * - If passed a worklet function, calls it directly on the UI thread
- * @important The returned function maintains a stable reference and properly handles
- * thread execution based on the input callback type
- */
-export default function useStableCallbackValue<C extends AnyFunction>(
-	callback?: C,
-) {
-	const stableCallback = useMutableValue<null | WrappedCallback<C>>(null);
-
-	useEffect(() => {
-		if (callback) {
-			stableCallback.set(wrap(callback));
-		} else {
-			stableCallback.set(null);
-		}
-	}, [callback, stableCallback]);
-
-	return useCallback(
-		(...args: Parameters<C>) => {
-			"worklet";
-			stableCallback.get()?.call(...args);
-		},
-		[stableCallback],
-	);
-}

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

@@ -1,401 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import { type ReactNode, useCallback, useMemo, useRef } from "react";
-import type { View } from "react-native";
-import {
-	type AnimatedRef,
-	measure,
-	type StyleProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
-import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
-import useStableCallback from "../hooks/use-stable-callback";
-import useStableCallbackValue from "../hooks/use-stable-callback-value";
-import { AnimationStore } from "../stores/animation.store";
-import {
-	createPendingPairKey,
-	createScreenPairKey,
-} from "../stores/bounds/helpers/link-pairs.helpers";
-import { getEntry } from "../stores/bounds/internals/entries";
-import { getDestination, getSource } from "../stores/bounds/internals/links";
-import { prepareStyleForBounds } from "../utils/bounds/helpers/styles/styles";
-import createProvider from "../utils/create-provider";
-import { applyMeasuredBoundsWrites } from "./helpers/measured-bounds-writes";
-import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
-
-/**
- * @deprecated Internal legacy provider for the old shared-bound-tag registration
- * path. Do not build new boundary behavior here; use the Transition.Boundary
- * measurement pipeline instead.
- */
-interface MaybeMeasureAndStoreParams {
-	onPress?: ((...args: unknown[]) => void) | undefined;
-	shouldSetSource?: boolean;
-	shouldSetDestination?: boolean;
-}
-
-interface RegisterBoundsRenderProps {
-	handleInitialLayout: () => void;
-	captureActiveOnPress: () => void;
-}
-
-interface RegisterBoundsProviderProps {
-	sharedBoundTag?: string;
-	animatedRef: AnimatedRef<View>;
-	style: StyleProps;
-	onPress?: ((...args: unknown[]) => void) | undefined;
-	remeasureOnFocus?: boolean;
-	children: (props: RegisterBoundsRenderProps) => ReactNode;
-}
-
-interface RegisterBoundsContextValue {
-	updateSignal: SharedValue<number>;
-}
-
-const getRouteParamId = (
-	route: { params?: object } | undefined,
-): string | null => {
-	const params = route?.params as Record<string, unknown> | undefined;
-	const rawId = params?.id;
-	return typeof rawId === "string" ? rawId : null;
-};
-
-const matchesSelectionTag = (
-	tag: string | undefined,
-	selectedId: string | null,
-): boolean => {
-	"worklet";
-	if (!tag || !selectedId) return false;
-	if (tag === selectedId) return true;
-	if (tag.endsWith(`:${selectedId}`)) return true;
-	if (tag.endsWith(`-${selectedId}`)) return true;
-	return false;
-};
-
-/**
- * Handles initial layout measurement for destination elements.
- * Only measures if an animation is in progress (local or parent).
- */
-const useInitialLayoutHandler = (params: {
-	sharedBoundTag?: string;
-	currentScreenKey: string;
-	ancestorKeys: string[];
-	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
-}) => {
-	const {
-		sharedBoundTag,
-		currentScreenKey,
-		ancestorKeys,
-		maybeMeasureAndStore,
-	} = params;
-
-	const isAnimating = AnimationStore.getValue(
-		currentScreenKey,
-		"progressAnimating",
-	);
-
-	// Check if any ancestor is animating
-	const ancestorAnimations = ancestorKeys.map((key) =>
-		AnimationStore.getValue(key, "progressAnimating"),
-	);
-
-	const hasMeasuredOnLayout = useSharedValue(false);
-
-	return useCallback(() => {
-		"worklet";
-		if (!sharedBoundTag || hasMeasuredOnLayout.get()) return;
-
-		// Check if current or any ancestor is animating
-		let isAnyAnimating = isAnimating.get();
-		for (let i = 0; i < ancestorAnimations.length; i++) {
-			if (ancestorAnimations[i].get()) {
-				isAnyAnimating = 1;
-				break;
-			}
-		}
-
-		if (!isAnyAnimating) return;
-
-		maybeMeasureAndStore({
-			shouldSetSource: false,
-			shouldSetDestination: true,
-		});
-
-		hasMeasuredOnLayout.set(true);
-	}, [
-		sharedBoundTag,
-		hasMeasuredOnLayout,
-		isAnimating,
-		ancestorAnimations,
-		maybeMeasureAndStore,
-	]);
-};
-
-/**
- * Measures non-pressable elements when screen becomes blurred.
- * Captures bounds right before transition starts.
- */
-const useBlurMeasurement = (params: {
-	enabled: boolean;
-	sharedBoundTag?: string;
-	selectedRouteId: string | null;
-	ancestorKeys: string[];
-	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
-}) => {
-	const { current } = useDescriptors();
-	const {
-		enabled,
-		sharedBoundTag,
-		selectedRouteId,
-		ancestorKeys,
-		maybeMeasureAndStore,
-	} = params;
-	const hasCapturedSource = useRef(false);
-
-	const ancestorClosing = [current.route.key, ...ancestorKeys].map((key) =>
-		AnimationStore.getValue(key, "closing"),
-	);
-
-	const maybeMeasureOnBlur = useStableCallbackValue(() => {
-		"worklet";
-		if (!enabled) return;
-		if (!matchesSelectionTag(sharedBoundTag, selectedRouteId)) return;
-
-		//.some doesnt work here apparently... :-(
-		for (const closing of ancestorClosing) {
-			if (closing.get()) return;
-		}
-
-		maybeMeasureAndStore({ shouldSetSource: true });
-	});
-
-	useFocusEffect(
-		useCallback(() => {
-			hasCapturedSource.current = false;
-
-			if (!enabled) {
-				return;
-			}
-
-			return () => {
-				if (!sharedBoundTag || hasCapturedSource.current) return;
-				scheduleOnUI(maybeMeasureOnBlur);
-			};
-		}, [enabled, sharedBoundTag, maybeMeasureOnBlur]),
-	);
-
-	return {
-		markSourceCaptured: () => {
-			hasCapturedSource.current = true;
-		},
-	};
-};
-
-/**
- * Syncs child measurements when parent updates.
- */
-const useParentSyncReaction = (params: {
-	parentContext: RegisterBoundsContextValue | null;
-	maybeMeasureAndStore: (options?: MaybeMeasureAndStoreParams) => void;
-}) => {
-	const { parentContext, maybeMeasureAndStore } = params;
-
-	useAnimatedReaction(
-		() => parentContext?.updateSignal.get(),
-		(value) => {
-			"worklet";
-			if (value === 0 || value === undefined) return;
-			maybeMeasureAndStore();
-		},
-	);
-};
-
-let useRegisterBoundsContext: () => RegisterBoundsContextValue | null;
-
-const registerBoundsBundle = createProvider("RegisterBounds", {
-	guarded: false,
-})<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
-	({ style, onPress, sharedBoundTag, animatedRef, children }) => {
-		const { current, next } = useDescriptors();
-		const { ancestorKeys, previousScreenKey } = useDescriptorDerivations();
-		const currentScreenKey = current.route.key;
-		const selectedNextRouteId = getRouteParamId(next?.route);
-
-		// Context & signals
-		const parentContext = useRegisterBoundsContext();
-
-		const ownSignal = useSharedValue(0);
-		const updateSignal: SharedValue<number> =
-			parentContext?.updateSignal ?? ownSignal;
-
-		const isAnimating = AnimationStore.getValue(
-			currentScreenKey,
-			"progressAnimating",
-		);
-		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-		const emitUpdate = useStableCallbackValue(() => {
-			"worklet";
-			const isRoot = !parentContext;
-			if (isRoot) updateSignal.set(updateSignal.get() + 1);
-		});
-
-		const maybeMeasureAndStore = useStableCallbackValue(
-			({
-				onPress,
-				shouldSetSource,
-				shouldSetDestination,
-			}: MaybeMeasureAndStoreParams = {}) => {
-				"worklet";
-				if (!sharedBoundTag) {
-					if (onPress) scheduleOnRN(onPress);
-					return;
-				}
-
-				const sourcePairKey = createPendingPairKey(currentScreenKey);
-				const destinationPairKey = previousScreenKey
-					? createScreenPairKey(previousScreenKey, currentScreenKey)
-					: undefined;
-				const pendingSourcePairKey = previousScreenKey
-					? createPendingPairKey(previousScreenKey)
-					: undefined;
-
-				if (shouldSetSource && isAnimating.get()) {
-					const existing = getEntry(sharedBoundTag, currentScreenKey);
-					if (existing?.bounds) {
-						applyMeasuredBoundsWrites({
-							entryTag: sharedBoundTag,
-							linkId: sharedBoundTag,
-							currentScreenKey,
-							measured: existing.bounds,
-							preparedStyles,
-							linkWrite: {
-								type: "source",
-								pairKey: sourcePairKey,
-							},
-						});
-					}
-
-					if (onPress) scheduleOnRN(onPress);
-					return;
-				}
-
-				const hasPendingSource = pendingSourcePairKey
-					? getSource(pendingSourcePairKey, sharedBoundTag) !== null
-					: false;
-				const hasSource =
-					getSource(sourcePairKey, sharedBoundTag) !== null ||
-					(destinationPairKey
-						? getSource(destinationPairKey, sharedBoundTag) !== null
-						: false);
-				const hasDestination = destinationPairKey
-					? getDestination(destinationPairKey, sharedBoundTag) !== null
-					: false;
-
-				const wantsSetSource = !!shouldSetSource;
-				const wantsSetDestination = !!shouldSetDestination;
-				const wantsSnapshotOnly = !wantsSetSource && !wantsSetDestination;
-
-				const canSetSource = wantsSetSource;
-				const canSetDestination =
-					wantsSetDestination && (hasPendingSource || hasSource);
-				const canSnapshotOnly =
-					wantsSnapshotOnly &&
-					(hasPendingSource || hasSource || hasDestination);
-
-				if (!canSetSource && !canSetDestination && !canSnapshotOnly) {
-					if (onPress) scheduleOnRN(onPress);
-					return;
-				}
-
-				const measured = measure(animatedRef);
-				if (!measured) {
-					if (onPress) scheduleOnRN(onPress);
-					return;
-				}
-
-				emitUpdate();
-
-				applyMeasuredBoundsWrites({
-					entryTag: sharedBoundTag,
-					linkId: sharedBoundTag,
-					currentScreenKey,
-					measured,
-					preparedStyles,
-					linkWrite: canSetSource
-						? {
-								type: "source",
-								pairKey: sourcePairKey,
-							}
-						: canSetDestination && destinationPairKey
-							? {
-									type: "destination",
-									pairKey: destinationPairKey,
-								}
-							: undefined,
-				});
-
-				if (canSetSource && canSetDestination && destinationPairKey) {
-					applyMeasuredBoundsWrites({
-						entryTag: sharedBoundTag,
-						linkId: sharedBoundTag,
-						currentScreenKey,
-						measured,
-						preparedStyles,
-						linkWrite: {
-							type: "destination",
-							pairKey: destinationPairKey,
-						},
-					});
-				}
-
-				if (onPress) scheduleOnRN(onPress);
-			},
-		);
-
-		const handleInitialLayout = useInitialLayoutHandler({
-			sharedBoundTag,
-			currentScreenKey,
-			ancestorKeys,
-			maybeMeasureAndStore,
-		});
-
-		// Side effects
-		const { markSourceCaptured } = useBlurMeasurement({
-			enabled: !onPress,
-			sharedBoundTag,
-			selectedRouteId: selectedNextRouteId,
-			maybeMeasureAndStore,
-			ancestorKeys,
-		});
-
-		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
-
-		const captureActiveOnPress = useStableCallback(() => {
-			if (!sharedBoundTag) {
-				onPress?.();
-				return;
-			}
-			scheduleOnUI(maybeMeasureAndStore, { onPress, shouldSetSource: true });
-			markSourceCaptured();
-		});
-
-		return {
-			value: { updateSignal },
-			children: <>{children({ handleInitialLayout, captureActiveOnPress })}</>,
-		};
-	},
-);
-
-/**
- * Legacy bounds registration provider used by transition-aware components.
- *
- * @deprecated Prefer the newer bounds system (`Transition.Boundary`, `bounds()`,
- * and navigation-style bounds helpers) for new code. This provider remains only
- * for backwards compatibility with the older shared-bound-tag registration path.
- */
-const RegisterBoundsProvider = registerBoundsBundle.RegisterBoundsProvider;
-useRegisterBoundsContext = registerBoundsBundle.useRegisterBoundsContext;
-
-export { RegisterBoundsProvider };

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

@@ -1,88 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type {
-	GestureStateManager,
-	GestureTouchEvent,
-} from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
-import type { ScreenOptionsContextValue } from "../../../options";
-import { resolvePinchRuntime } from "../../shared/runtime";
-import type {
-	GestureCompositionOwner,
-	RotationGestureRuntime,
-} from "../../types";
-
-interface UseRotationActivationProps {
-	runtime: SharedValue<RotationGestureRuntime>;
-	screenOptions: ScreenOptionsContextValue;
-	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
-}
-
-export const useRotationActivation = ({
-	runtime,
-	screenOptions,
-	gestureCompositionOwner,
-}: UseRotationActivationProps) => {
-	const onTouchesDown = useCallback(
-		(
-			event: GestureTouchEvent,
-			stateManager: GestureStateManager | undefined,
-		) => {
-			"worklet";
-			const { participation, policy } = resolvePinchRuntime(
-				runtime.get(),
-				screenOptions.get(),
-			);
-
-			if (!participation.canTrackGesture || !policy.enabled) {
-				stateManager?.fail();
-				return;
-			}
-
-			if (event.numberOfTouches === 2) {
-				if (gestureCompositionOwner.get() === null) {
-					gestureCompositionOwner.set("pinch");
-				}
-				stateManager?.activate();
-				return;
-			}
-
-			if (event.numberOfTouches > 2) {
-				stateManager?.fail();
-			}
-		},
-		[runtime, screenOptions, gestureCompositionOwner],
-	);
-
-	const onTouchesMove = useCallback(
-		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
-			"worklet";
-			const { participation, policy } = resolvePinchRuntime(
-				runtime.get(),
-				screenOptions.get(),
-			);
-
-			if (!participation.canTrackGesture || !policy.enabled) {
-				stateManager.fail();
-				return;
-			}
-
-			if (event.numberOfTouches === 2) {
-				if (gestureCompositionOwner.get() === null) {
-					gestureCompositionOwner.set("pinch");
-				}
-				stateManager.activate();
-				return;
-			}
-
-			if (event.numberOfTouches > 2) {
-				stateManager.fail();
-			}
-		},
-		[runtime, screenOptions, gestureCompositionOwner],
-	);
-
-	return useMemo(
-		() => ({ onTouchesDown, onTouchesMove }),
-		[onTouchesDown, onTouchesMove],
-	);
-};

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

@@ -1,19 +0,0 @@
-import type { RotationGestureEvent, RotationGestureRuntime } from "../../types";
-
-export const startRotationGesture = (
-	gestures: RotationGestureRuntime["stores"]["gestures"],
-) => {
-	"worklet";
-	gestures.rotation.set(0);
-	gestures.raw.rotation.set(0);
-};
-
-export const trackRotationGesture = (
-	event: RotationGestureEvent,
-	rawEvent: RotationGestureEvent,
-	gestures: RotationGestureRuntime["stores"]["gestures"],
-) => {
-	"worklet";
-	gestures.rotation.set(event.rotation);
-	gestures.raw.rotation.set(rawEvent.rotation);
-};

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

@@ -1,47 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import type { ScreenOptionsContextValue } from "../../../options";
-import { resolvePinchRuntime } from "../../shared/runtime";
-import type {
-	RotationBehavior,
-	RotationGestureEvent,
-	RotationGestureRuntime,
-} from "../../types";
-import {
-	startRotationGesture,
-	trackRotationGesture,
-} from "./rotation-lifecycle";
-
-export const useRotationBehavior = (
-	runtime: SharedValue<RotationGestureRuntime>,
-	screenOptions: ScreenOptionsContextValue,
-): RotationBehavior => {
-	const onStart = useCallback(() => {
-		"worklet";
-		const latestRuntime = resolvePinchRuntime(
-			runtime.get(),
-			screenOptions.get(),
-		);
-		startRotationGesture(latestRuntime.stores.gestures);
-	}, [runtime, screenOptions]);
-
-	const onUpdate = useCallback(
-		(rawEvent: RotationGestureEvent) => {
-			"worklet";
-			const latestRuntime = resolvePinchRuntime(
-				runtime.get(),
-				screenOptions.get(),
-			);
-			trackRotationGesture(rawEvent, rawEvent, latestRuntime.stores.gestures);
-		},
-		[runtime, screenOptions],
-	);
-
-	return useMemo(
-		() => ({
-			onStart,
-			onUpdate,
-		}),
-		[onStart, onUpdate],
-	);
-};

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

@@ -1,50 +0,0 @@
-import { useMemo } from "react";
-import { Gesture } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
-import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
-import type {
-	GestureCompositionOwner,
-	RotationGesture,
-	ScreenGestureConfig,
-} from "../types";
-import { useRotationActivation } from "./activation/use-rotation-activation";
-import { useRotationBehavior } from "./behavior/use-rotation-behavior";
-
-interface UseBuildRotationGestureProps {
-	gestureConfig: ScreenGestureConfig;
-	gestureCompositionOwner: SharedValue<GestureCompositionOwner>;
-}
-
-export const useBuildRotationGesture = ({
-	gestureConfig,
-	gestureCompositionOwner,
-}: UseBuildRotationGestureProps): RotationGesture => {
-	const { participation, pinch: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
-
-	const runtime = useStableRuntimeConfig({
-		participation,
-		policy,
-	});
-
-	const activation = useRotationActivation({
-		runtime,
-		screenOptions,
-		gestureCompositionOwner,
-	});
-
-	const behavior = useRotationBehavior(runtime, screenOptions);
-
-	const rotationGesture = useMemo(() => {
-		return Gesture.Rotation()
-			.enabled(true)
-			.manualActivation(true)
-			.onTouchesDown(activation.onTouchesDown)
-			.onTouchesMove(activation.onTouchesMove)
-			.onStart(behavior.onStart)
-			.onUpdate(behavior.onUpdate);
-	}, [activation, behavior]);
-
-	return rotationGesture;
-};