react-native-screen-transitions 3.0.0-beta.9 → 3.0.0-rc.2

package/src/shared/hooks/bounds/use-bound-registry.tsx

@@ -1,184 +0,0 @@
-import {
-	createContext,
-	Fragment,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from "react";
-import type { View } from "react-native";
-import {
-	type AnimatedRef,
-	measure,
-	runOnJS,
-	runOnUI,
-	type StyleProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
-import { useKeys } from "../../providers/keys";
-import { BoundStore } from "../../stores/bound-store";
-import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
-import { prepareStyleForBounds } from "../../utils/bounds/_utils/styles";
-import useStableCallback from "../use-stable-callback";
-import useStableCallbackValue from "../use-stable-callback-value";
-
-interface BoundMeasurerHookProps {
-	sharedBoundTag?: string;
-	animatedRef: AnimatedRef<View>;
-	style: StyleProps;
-	onPress?: ((...args: unknown[]) => void) | undefined;
-}
-
-interface MaybeMeasureAndStoreParams {
-	onPress?: ((...args: unknown[]) => void) | undefined;
-	skipMarkingActive?: boolean;
-}
-
-interface MeasurementUpdateContextType {
-	updateSignal: SharedValue<number>;
-}
-
-const MeasurementUpdateContext =
-	createContext<MeasurementUpdateContextType | null>(null);
-
-export const useBoundsRegistry = ({
-	sharedBoundTag,
-	animatedRef,
-	style,
-	onPress,
-}: BoundMeasurerHookProps) => {
-	const { previous, current, next } = useKeys();
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const ROOT_MEASUREMENT_SIGNAL = useContext(MeasurementUpdateContext);
-	const ROOT_SIGNAL = useSharedValue(0);
-	const IS_ROOT = !ROOT_MEASUREMENT_SIGNAL;
-
-	const emitUpdate = useStableCallbackValue(() => {
-		"worklet";
-		if (IS_ROOT) ROOT_SIGNAL.value = ROOT_SIGNAL.value + 1;
-	});
-
-	const maybeMeasureAndStore = useStableCallbackValue(
-		({ onPress, skipMarkingActive }: MaybeMeasureAndStoreParams) => {
-			"worklet";
-			// Currently, there's no necessity to measure when the current route is blurred ( could potentially change in the future )
-			if (!sharedBoundTag || next) return;
-
-			const measured = measure(animatedRef);
-
-			if (!measured) {
-				console.warn(
-					`[react-native-screen-transitions] measure() returned null for sharedBoundTag="${sharedBoundTag}"`,
-				);
-				return;
-			}
-
-			const key = current.route.key;
-
-			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
-				emitUpdate();
-				if (!skipMarkingActive) {
-					BoundStore.setRouteActive(key, sharedBoundTag);
-				}
-				if (onPress) runOnJS(onPress)();
-				return;
-			}
-
-			emitUpdate();
-
-			BoundStore.setBounds(key, sharedBoundTag, measured, preparedStyles);
-			if (!skipMarkingActive) {
-				BoundStore.setRouteActive(key, sharedBoundTag);
-			}
-
-			if (onPress) runOnJS(onPress)();
-		},
-	);
-
-	const hasMeasuredOnLayout = useSharedValue(false);
-	const handleInitialLayout = useStableCallbackValue(() => {
-		"worklet";
-
-		const prevKey = previous?.route.key;
-		if (!sharedBoundTag || hasMeasuredOnLayout.value || !prevKey) {
-			return;
-		}
-
-		const prevBounds = BoundStore.getBounds(prevKey)?.[sharedBoundTag];
-
-		if (prevBounds) {
-			// Should skip mark active if we are in a transition
-			maybeMeasureAndStore({ skipMarkingActive: true });
-			// Should not measure again while in transition
-			hasMeasuredOnLayout.value = true;
-		}
-	});
-
-	const captureActiveOnPress = useStableCallback(() => {
-		if (!sharedBoundTag) {
-			if (onPress) onPress();
-			return;
-		}
-
-		// In this case, we DO want to mark active
-		runOnUI(maybeMeasureAndStore)({ onPress });
-	});
-
-	const MeasurementSyncProvider = useMemo(() => {
-		if (!IS_ROOT || !sharedBoundTag) {
-			return Fragment;
-		}
-
-		return ({ children }: { children: React.ReactNode }) => (
-			<MeasurementUpdateContext.Provider value={{ updateSignal: ROOT_SIGNAL }}>
-				{children}
-			</MeasurementUpdateContext.Provider>
-		);
-	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
-
-	const prevNextRef = useRef(next);
-	/**
-	 * Measure non-pressable elements when the screen goes from focused to blurred
-	 * (or when a new `next` descriptor appears) so we capture final bounds
-	 * right before the transition starts.
-	 */
-	useLayoutEffect(() => {
-		if (!sharedBoundTag || onPress) return;
-
-		const hadNext = !!prevNextRef.current;
-		const hasNext = !!next;
-
-		if (!hadNext && hasNext) {
-			runOnUI(maybeMeasureAndStore)({});
-		}
-
-		prevNextRef.current = next;
-	}, [next, sharedBoundTag, onPress, maybeMeasureAndStore]);
-
-	/**
-	 * Signal child shared elements (nested under this provider) to refresh their
-	 * measurements when the root updates, while preventing them from marking
-	 * themselves active during that sync.
-	 */
-	useAnimatedReaction(
-		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
-		(current) => {
-			"worklet";
-
-			// We don't want to run on the initial amount)
-			if (current === 0 || current === undefined) return;
-
-			// Children should not have the ability to mark active
-			maybeMeasureAndStore({ skipMarkingActive: true });
-		},
-	);
-
-	return {
-		handleInitialLayout,
-		captureActiveOnPress,
-		MeasurementSyncProvider,
-	};
-};

package/src/shared/hooks/use-derived-value-state.ts

@@ -1,41 +0,0 @@
-import { useState } from "react";
-import {
-	executeOnUIRuntimeSync,
-	runOnJS,
-	type SharedValue,
-	useAnimatedReaction,
-	useDerivedValue,
-} from "react-native-reanimated";
-
-/**
- * Derives React state from a Reanimated worklet.
- *
- * @param processor - The worklet function that calculates the value
- * @param dependencies - Array of dependencies for the worklet
- * @returns The derived value as React State
- */
-export function useDerivedValueState<T>(
-	processor: () => T,
-	dependencies: any[] = [],
-): T {
-	const derivedValue = useDerivedValue(processor, dependencies);
-
-	const [state, setState] = useState<T>(() => {
-		const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
-			"worklet";
-			return sv.value;
-		});
-		return readOnUI(derivedValue);
-	});
-
-	useAnimatedReaction(
-		() => derivedValue.value,
-		(curr, prev) => {
-			if (curr !== prev) {
-				runOnJS(setState)(curr);
-			}
-		},
-	);
-
-	return state;
-}

package/src/shared/stores/bound-store/_utils.ts

@@ -1,161 +0,0 @@
-import type { ScreenTransitionState } from "../../types/animation";
-
-type GetCache = (fromKey: string, toKey: string) => string | null;
-type SetCache = (fromKey: string, toKey: string, id: string) => void;
-type GetRouteActive = (routeKey: string) => string | null;
-
-interface ResolveActiveBoundParams {
-	current: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	previous?: ScreenTransitionState;
-	getPairCache: GetCache;
-	setPairCache: SetCache;
-	getRouteActive: GetRouteActive;
-}
-
-export function pairKey(fromKey?: string, toKey?: string) {
-	"worklet";
-	return fromKey && toKey ? `${fromKey}|${toKey}` : "";
-}
-
-const hasBound = (s: ScreenTransitionState | undefined, id?: string | null) => {
-	"worklet";
-	return !!id && !!s && !!s.bounds && !!s.bounds[id];
-};
-
-const getRoutePair = (
-	current: ScreenTransitionState,
-	next: ScreenTransitionState | undefined,
-	previous: ScreenTransitionState | undefined,
-) => {
-	"worklet";
-	const isClosing = !!next;
-	const fromKey = isClosing ? current.route.key : previous?.route.key;
-	const toKey = isClosing ? next?.route.key : current.route.key;
-	const other = next ?? previous;
-	return { fromKey, toKey, other } as const;
-};
-
-const resolveFromPairCache = (
-	fromKey: string | undefined,
-	toKey: string | undefined,
-	other: ScreenTransitionState | undefined,
-	getPairCache: GetCache,
-) => {
-	"worklet";
-	if (fromKey && toKey) {
-		const cached = getPairCache(fromKey, toKey);
-		if (hasBound(other, cached)) return cached as string;
-	}
-	return "";
-};
-
-const resolveFromRequested = (
-	reqId: string | null,
-	current: ScreenTransitionState,
-	other: ScreenTransitionState | undefined,
-) => {
-	"worklet";
-	if (hasBound(other, reqId)) return reqId as string;
-	if (hasBound(current, reqId)) return reqId as string;
-	return "";
-};
-
-const resolveFromInteresection = (
-	current: ScreenTransitionState,
-	other: ScreenTransitionState | undefined,
-	fromKey: string | undefined,
-	getRouteActive: GetRouteActive,
-) => {
-	"worklet";
-	if (!other) return "";
-	const a = Object.keys(current.bounds);
-	const b = Object.keys(other.bounds);
-	const inter = a.filter((k) => b.includes(k));
-	const otherHasAny = b.length > 0;
-	const routeActive = fromKey ? getRouteActive(fromKey) : null;
-
-	if (inter.length > 0) {
-		if (routeActive && inter.includes(routeActive)) return routeActive;
-		return inter[0];
-	}
-
-	if (routeActive && hasBound(other, routeActive)) return routeActive;
-	if (b.length === 1) return b[0];
-
-	if (!otherHasAny) {
-		if (routeActive && hasBound(current, routeActive)) return routeActive;
-		if (a.length === 1) return a[0];
-	}
-
-	return "";
-};
-
-/**
- * Util function to get the active bound id for a given transition state.
- *
- * It will check by ( priority from highest to lowest ):
- * 1. Requested id
- * 2. Cache
- * 3. Intersection
- */
-export function resolveActiveBound({
-	current,
-	next,
-	previous,
-	getPairCache,
-	setPairCache,
-	getRouteActive,
-}: ResolveActiveBoundParams) {
-	"worklet";
-	const { fromKey, toKey, other } = getRoutePair(current, next, previous);
-
-	// Resolve requested from per-route most recently used (last active bound by route)
-	const requestedId = fromKey ? getRouteActive(fromKey) : null;
-	const byRequested = resolveFromRequested(requestedId, current, other);
-	if (byRequested) {
-		if (
-			fromKey &&
-			toKey &&
-			hasBound(current, byRequested) &&
-			hasBound(other, byRequested)
-		) {
-			setPairCache(fromKey, toKey, byRequested);
-		}
-		return byRequested;
-	}
-
-	const byPairCache = resolveFromPairCache(fromKey, toKey, other, getPairCache);
-	if (byPairCache) {
-		if (
-			fromKey &&
-			toKey &&
-			hasBound(current, byPairCache) &&
-			hasBound(other, byPairCache)
-		) {
-			setPairCache(fromKey, toKey, byPairCache);
-		}
-		return byPairCache;
-	}
-
-	const byIntersection = resolveFromInteresection(
-		current,
-		other,
-		fromKey,
-		getRouteActive,
-	);
-
-	if (byIntersection) {
-		if (
-			fromKey &&
-			toKey &&
-			hasBound(current, byIntersection) &&
-			hasBound(other, byIntersection)
-		) {
-			setPairCache(fromKey, toKey, byIntersection);
-		}
-		return byIntersection;
-	}
-
-	return "";
-}

package/src/shared/stores/bound-store/index.ts

@@ -1,148 +0,0 @@
-import {
-	type MeasuredDimensions,
-	makeMutable,
-	type StyleProps,
-} from "react-native-reanimated";
-import type { ScreenTransitionState } from "../../types/animation";
-import type { ScreenKey } from "../../types/core";
-import type { Any } from "../../types/utils";
-import { pairKey, resolveActiveBound } from "./_utils";
-
-type BoundsDict = Record<
-	string,
-	Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
->;
-
-const registry = makeMutable<BoundsDict>({});
-const pairCache = makeMutable<Record<string, string>>({});
-const lastActiveByRoute = makeMutable<Record<string, string>>({});
-
-function setBounds(
-	screenId: string,
-	boundId: string,
-	bounds: MeasuredDimensions | null = null,
-	styles: StyleProps = {},
-) {
-	"worklet";
-	registry.modify((state: Any) => {
-		"worklet";
-		if (!state[screenId]) {
-			state[screenId] = {};
-		}
-		state[screenId][boundId] = { bounds, styles };
-
-		return state;
-	});
-}
-
-function getBounds(screenId: string) {
-	"worklet";
-	return registry.value[screenId] ?? {};
-}
-
-function setRouteActive(routeKey: string, boundId: string) {
-	"worklet";
-	lastActiveByRoute.modify((state: Any) => {
-		"worklet";
-		state[routeKey] = boundId;
-		return state;
-	});
-}
-
-function getRouteActive(routeKey: string) {
-	"worklet";
-	return lastActiveByRoute.value[routeKey] ?? null;
-}
-
-function setPairCache(fromKey: string, toKey: string, boundId: string) {
-	"worklet";
-	const key = pairKey(fromKey, toKey);
-	if (!key) return;
-	pairCache.modify((state: Any) => {
-		"worklet";
-		state[key] = boundId;
-		return state;
-	});
-}
-
-function getPairCache(fromKey: string, toKey: string) {
-	"worklet";
-	const key = pairKey(fromKey, toKey);
-	if (!key) return null;
-	return pairCache.value[key] ?? null;
-}
-
-function clear(routeKey: ScreenKey) {
-	"worklet";
-	registry.modify((state) => {
-		"worklet";
-		delete state[routeKey];
-		return state;
-	});
-	lastActiveByRoute.modify((state) => {
-		"worklet";
-		if (state[routeKey]) delete state[routeKey];
-		return state;
-	});
-
-	pairCache.modify((state) => {
-		"worklet";
-		const keys = Object.keys(state);
-		for (let i = 0; i < keys.length; i++) {
-			const k = keys[i];
-			const [from, to] = k.split("|");
-			if (from === routeKey || to === routeKey) {
-				delete state[k];
-			}
-		}
-		return state;
-	});
-}
-
-function debugBoundStore() {
-	"worklet";
-	console.log("[BoundStore] registry keys:", Object.keys(registry.value));
-	console.log(
-		"[BoundStore] registry size:",
-		Object.keys(registry.value).length,
-	);
-	console.log("[BoundStore] pairCache keys:", Object.keys(pairCache.value));
-	console.log(
-		"[BoundStore] pairCache size:",
-		Object.keys(pairCache.value).length,
-	);
-	console.log(
-		"[BoundStore] lastActiveByRoute keys:",
-		Object.keys(lastActiveByRoute.value),
-	);
-	console.log(
-		"[BoundStore] lastActiveByRoute size:",
-		Object.keys(lastActiveByRoute.value).length,
-	);
-}
-
-function getActiveBound(
-	current: ScreenTransitionState,
-	next: ScreenTransitionState | undefined,
-	previous: ScreenTransitionState | undefined,
-) {
-	"worklet";
-	return resolveActiveBound({
-		current,
-		next,
-		previous,
-		getPairCache,
-		setPairCache,
-		getRouteActive,
-	});
-}
-
-export const BoundStore = {
-	setBounds,
-	getBounds,
-	setRouteActive,
-	getRouteActive,
-	clear,
-	getActiveBound,
-	debugBoundStore,
-};

package/src/shared/stores/utils/reset-stores-for-screen.ts

@@ -1,13 +0,0 @@
-import type { NativeStackDescriptor } from "../../../native-stack/types";
-import { AnimationStore } from "../animation-store";
-import { BoundStore } from "../bound-store";
-import { GestureStore } from "../gesture-store";
-
-/**
- * Reset all stores for a given screen
- */
-export const resetStoresForScreen = (current: NativeStackDescriptor) => {
-	AnimationStore.clear(current.route.key);
-	GestureStore.clear(current.route.key);
-	BoundStore.clear(current.route.key);
-};

package/src/shared/utils/bounds/_types/get-bounds.ts

@@ -1,10 +0,0 @@
-import type { ScreenTransitionState } from "../../../types/animation";
-import type { ScreenPhase } from "../../../types/core";
-
-export type GetBoundsParams = {
-	id: string | null;
-	phase?: ScreenPhase;
-	previous?: ScreenTransitionState;
-	current: ScreenTransitionState;
-	next?: ScreenTransitionState;
-};

package/src/shared/utils/bounds/_utils/flatten-styles.ts

@@ -1,21 +0,0 @@
-export function flattenStyle<TStyleProp>(style: TStyleProp): TStyleProp {
-	"worklet";
-	if (style === null || typeof style !== "object") {
-		return style;
-	}
-
-	if (!Array.isArray(style)) {
-		return style;
-	}
-
-	const result: { [key: string]: TStyleProp } = {};
-	for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
-		const computedStyle = flattenStyle(style[i]);
-		if (computedStyle) {
-			for (const key in computedStyle) {
-				result[key] = computedStyle[key];
-			}
-		}
-	}
-	return result as TStyleProp;
-}

package/src/shared/utils/bounds/_utils/get-bounds.ts

@@ -1,54 +0,0 @@
-import type { BoundEntry } from "../../../types/bounds";
-
-import type { GetBoundsParams } from "../_types/get-bounds";
-
-const fallbackBounds = {
-	bounds: {
-		width: 0,
-		height: 0,
-		x: 0,
-		y: 0,
-		pageX: 0,
-		pageY: 0,
-	},
-	styles: {},
-};
-
-export const getBounds = (props: GetBoundsParams): BoundEntry => {
-	"worklet";
-	const boundId = props.id;
-	const phase = props.phase;
-
-	if (phase && boundId) {
-		const phaseMap = {
-			current: props.current?.bounds[boundId],
-			next: props.next?.bounds[boundId],
-			previous: props.previous?.bounds[boundId],
-		};
-
-		const phaseBounds = phaseMap[phase];
-
-		if (!phaseBounds) {
-			return fallbackBounds;
-		}
-
-		return {
-			bounds: phaseBounds.bounds,
-			styles: phaseBounds?.styles,
-		};
-	}
-
-	if (!props.next && boundId) {
-		const previousBounds = props.previous?.bounds[boundId];
-
-		return previousBounds || fallbackBounds;
-	}
-
-	if (boundId) {
-		const nextBounds = props.next?.bounds[boundId];
-
-		return nextBounds || fallbackBounds;
-	}
-
-	return fallbackBounds;
-};