react-native-screen-transitions 3.12.0 → 3.13.0-beta.1

package/src/shared/utils/bounds/helpers/create-link-accessor.ts

@@ -1,3 +1,4 @@
+import { requestBoundaryMeasurements } from "../../../stores/bounds/internals/coordinator";
 import {
 	getPairKeyForDestination,
 	getResolvedLink,
@@ -7,6 +8,7 @@ import type {
 	BoundsLink,
 } from "../../../types/bounds.types";
 import type { BoundId } from "../types/options";
+import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
@@ -21,6 +23,15 @@ export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
+		const requestedPairKey = resolveBoundsPairKey(props);
+		if (requestedPairKey) {
+			requestBoundaryMeasurements({
+				pairKey: requestedPairKey,
+				tag: stringTag,
+				destination: true,
+				refresh: !!props.active.willAnimate,
+			});
+		}
 		const destinationScreenKey =
 			props.next?.route.key ?? props.current?.route.key;
 		const pairKey = destinationScreenKey

package/src/shared/utils/bounds/helpers/prepare-bound-styles.ts

@@ -66,11 +66,12 @@ export const syncActiveGroupId = (params: {
 	const { props, id, group } = params;
 	if (id == null || id === "" || !group) return;
 
-	const pairKey = resolveBoundsPairKey(props);
+	const tag = createBoundTag({ id, group });
+	const pairKey = tag ? resolveBoundsPairKey(props) : null;
 	if (!pairKey) return;
 
 	const activeId = String(id);
-	if (getActiveGroupId(pairKey, group) === activeId) return;
+	if (getActiveGroupId(pairKey, group) !== null) return;
 
 	setActiveGroupId(pairKey, group, activeId);
 };

package/src/shared/utils/bounds/helpers/resolve-bounds-pair-key.ts

@@ -9,7 +9,6 @@ export const resolveBoundsPairKey = (
 	const currentScreenKey = props.current?.route.key;
 	const previousScreenKey = props.previous?.route.key;
 	const nextScreenKey = props.next?.route.key;
-
 	if (nextScreenKey && currentScreenKey) {
 		return createScreenPairKey(currentScreenKey, nextScreenKey);
 	}

package/src/shared/utils/bounds/helpers/styles/compute.ts

@@ -6,7 +6,7 @@ import {
 	NO_STYLES,
 } from "../../../../constants";
 import { createScreenPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
-import { requestSourceMeasure } from "../../../../stores/bounds/internals/links";
+import { requestBoundaryMeasurements } from "../../../../stores/bounds/internals/coordinator";
 import { resolveTransitionPair } from "../../../../stores/bounds/internals/resolver";
 import type { ResolvedTransitionPair } from "../../../../stores/bounds/types";
 import type { ScreenTransitionState } from "../../../../types/animation.types";
@@ -39,6 +39,7 @@ const resolveStartEnd = (params: {
 	dimensions: Layout;
 	computeOptions: BoundsOptions;
 	resolvedPair?: ResolvedTransitionPair;
+	refresh: boolean;
 }) => {
 	"worklet";
 
@@ -59,6 +60,15 @@ const resolveStartEnd = (params: {
 				? createScreenPairKey(currentScreenKey, nextScreenKey)
 				: null;
 
+	if (sourceMeasurePairKey) {
+		requestBoundaryMeasurements({
+			pairKey: sourceMeasurePairKey,
+			tag: String(params.id),
+			destination: !hasTargetOverride,
+			refresh: params.refresh,
+		});
+	}
+
 	const resolvedPair =
 		params.resolvedPair ??
 		resolveTransitionPair(String(params.id), {
@@ -72,10 +82,6 @@ const resolveStartEnd = (params: {
 	const destinationBounds = resolvedPair.destinationBounds;
 
 	if (!sourceBounds) {
-		if (hasTargetOverride && sourceMeasurePairKey) {
-			requestSourceMeasure(sourceMeasurePairKey, String(params.id));
-		}
-
 		return {
 			start: null,
 			end: null,
@@ -157,6 +163,7 @@ export const computeBoundStyles = (
 		computeOptions,
 		dimensions,
 		resolvedPair,
+		refresh: !!interpolationProps?.active?.willAnimate,
 	});
 
 	if (!start || !end) {

package/src/shared/utils/create-provider.tsx

@@ -3,9 +3,11 @@
  * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/providers/utils/createProvider.tsx
  * SUPER COOL AMAZING UTILITY
  *
- * Store-only provider: values propagate exclusively through a subscription
- * store read with `use${Name}Store(selector)`. There is intentionally no raw
- * context channel, so consumers subscribe only to the values they render.
+ * Store-only provider: values propagate exclusively through subscription
+ * selectors. `use${Name}Store` requires an available store, while
+ * `useOptional${Name}Store` preserves nullable bootstrap and outer-context
+ * access. There is intentionally no raw context channel, so consumers
+ * subscribe only to the values they render.
  *
  * Factories do not memoize what they return:
  * - `value`: the store shallow-compares snapshots and keeps the previous
@@ -16,7 +18,7 @@
  *   module-level memoized component for the wrapper.
  *
  * Providers created with `global: true` return a `key` from their factory.
- * Their generated store hook accepts that key to subscribe to the original
+ * Both generated store hooks accept that key to subscribe to the original
  * provider store from outside its React context.
  */
 import {
@@ -29,48 +31,52 @@ import {
 	useSyncExternalStore,
 } from "react";
 
-type ProviderSnapshot<
-	ContextValue,
-	Guarded extends boolean,
-> = Guarded extends true ? ContextValue : ContextValue | null;
-
-type ProviderSelector<ContextValue, Guarded extends boolean, Selected> = (
-	value: ProviderSnapshot<ContextValue, Guarded>,
-) => Selected;
+type ProviderStoreHook<ContextValue> = {
+	(): ContextValue;
+	<Selected>(selector: (value: ContextValue) => Selected): Selected;
+};
 
-type ProviderStoreHook<ContextValue, Guarded extends boolean> = {
-	(): ProviderSnapshot<ContextValue, Guarded>;
+type GlobalProviderStoreHook<ContextValue> = {
+	(key: string): ContextValue;
 	<Selected>(
-		selector: ProviderSelector<ContextValue, Guarded, Selected>,
+		key: string,
+		selector: (value: ContextValue) => Selected,
 	): Selected;
 };
 
-type GlobalProviderStoreHook<ContextValue> = {
-	(key: string): ContextValue | null;
+type OptionalProviderStoreHook<ContextValue> = {
+	(): ContextValue | null;
+	<Selected>(selector: (value: ContextValue | null) => Selected): Selected;
+};
+
+type OptionalGlobalProviderStoreHook<ContextValue> = {
+	(key: string | null): ContextValue | null;
 	<Selected>(
-		key: string,
+		key: string | null,
 		selector: (value: ContextValue) => Selected,
 	): Selected | null;
 };
 
 type ResolvedProviderStoreHook<
 	ContextValue,
-	Guarded extends boolean,
 	Global extends boolean,
-> = ProviderStoreHook<ContextValue, Guarded> &
+> = ProviderStoreHook<ContextValue> &
 	(Global extends true ? GlobalProviderStoreHook<ContextValue> : unknown);
 
+type ResolvedOptionalProviderStoreHook<
+	ContextValue,
+	Global extends boolean,
+> = OptionalProviderStoreHook<ContextValue> &
+	(Global extends true
+		? OptionalGlobalProviderStoreHook<ContextValue>
+		: unknown);
+
 type ProviderFactoryResult<ContextValue, Global extends boolean> = {
-	value?: ContextValue;
-	enabled?: boolean;
+	value: ContextValue;
 	children?: ReactNode;
 } & (Global extends true ? { key: string } : { key?: never });
 
-export type ProviderFactoryInternals<ContextValue> = {
-	useParentStore: ProviderStoreHook<ContextValue, false>;
-};
-
-export interface ProviderStoreApi<ContextValue> {
+interface ProviderStoreApi<ContextValue> {
 	getSnapshot: () => ContextValue | null;
 	subscribe: (listener: () => void) => () => void;
 }
@@ -161,17 +167,8 @@ const createProviderStore = <ContextValue,>(
 const createProviderStoreRegistry = <
 	ContextValue,
 >(): ProviderStoreRegistry<ContextValue> => {
-	type Registration = {
-		store: ProviderStoreApi<ContextValue>;
-	};
-
 	const listenersByKey = new Map<string, Set<() => void>>();
-	const registrationsByKey = new Map<string, Registration[]>();
-
-	const getStore = (key: string) => {
-		const registrations = registrationsByKey.get(key);
-		return registrations?.[registrations.length - 1]?.store ?? null;
-	};
+	const storesByKey = new Map<string, ProviderStoreApi<ContextValue>>();
 
 	const notify = (key: string) => {
 		for (const listener of listenersByKey.get(key) ?? []) {
@@ -180,33 +177,14 @@ const createProviderStoreRegistry = <
 	};
 
 	return {
-		getStore,
+		getStore: (key) => storesByKey.get(key) ?? null,
 		register: (key, store) => {
-			const registration: Registration = { store };
-			const registrations = registrationsByKey.get(key) ?? [];
-			registrationsByKey.set(key, [...registrations, registration]);
+			storesByKey.set(key, store);
 			notify(key);
 
 			return () => {
-				const currentRegistrations = registrationsByKey.get(key);
-				if (!currentRegistrations?.includes(registration)) {
-					return;
-				}
-
-				const previousStore = getStore(key);
-				const nextRegistrations = currentRegistrations.filter(
-					(currentRegistration) => currentRegistration !== registration,
-				);
-
-				if (nextRegistrations.length === 0) {
-					registrationsByKey.delete(key);
-				} else {
-					registrationsByKey.set(key, nextRegistrations);
-				}
-
-				if (getStore(key) !== previousStore) {
-					notify(key);
-				}
+				storesByKey.delete(key);
+				notify(key);
 			};
 		},
 		subscribe: (key, listener) => {
@@ -226,183 +204,135 @@ const createProviderStoreRegistry = <
 
 export default function createProvider<
 	ProviderName extends string,
-	Guarded extends boolean = true,
 	Global extends boolean = false,
->(name: ProviderName, options?: { guarded?: Guarded; global?: Global }) {
+>(name: ProviderName, options?: { global?: Global }) {
 	return <ProviderProps extends object, ContextValue>(
 		factory: (
 			props: ProviderProps,
-			internals: ProviderFactoryInternals<ContextValue>,
 		) => ProviderFactoryResult<ContextValue, Global>,
 	) => {
-		const { guarded = true, global = false } = options ?? {};
+		const { global = false } = options ?? {};
 		const providerDisplayName = `${name}Provider`;
 		const globalRegistry = global
 			? createProviderStoreRegistry<ContextValue>()
 			: null;
-		const keyByStore = global
-			? new WeakMap<ProviderStoreApi<ContextValue>, string>()
-			: null;
 
 		const StoreContext = createContext<ProviderStoreApi<ContextValue> | null>(
 			null,
 		);
 		StoreContext.displayName = `${name}Store`;
 
-		const useRegisteredStore = (
-			key: string | null,
-			fallbackStore: ProviderStoreApi<ContextValue> | null = null,
-		) => {
+		const useStoreSelection = <Selected,>(
+			required: boolean,
+			selectorOrKey?:
+				| string
+				| null
+				| ((value: ContextValue | null) => Selected),
+			globalSelector?: (value: ContextValue) => Selected,
+		): Selected | ContextValue | null => {
+			const isGlobalLookup =
+				global && (typeof selectorOrKey === "string" || selectorOrKey === null);
+			const key = isGlobalLookup ? selectorOrKey : null;
+			const selector = (isGlobalLookup ? globalSelector : selectorOrKey) as
+				| ((value: ContextValue | null) => Selected)
+				| undefined;
+			const contextStore = useContext(StoreContext);
+			const selectorRef = useRef(selector);
+			selectorRef.current = selector;
+			const getStore = useCallback(() => {
+				if (isGlobalLookup) {
+					return key !== null && globalRegistry
+						? globalRegistry.getStore(key)
+						: null;
+				}
+
+				return contextStore;
+			}, [contextStore, isGlobalLookup, key]);
 			const subscribe = useCallback(
 				(listener: () => void) => {
-					if (key === null || !globalRegistry) {
-						return () => {};
-					}
-
-					return globalRegistry.subscribe(key, listener);
+					let unsubscribeStore = (
+						getStore() ?? (NullProviderStore as ProviderStoreApi<ContextValue>)
+					).subscribe(listener);
+					const unsubscribeRegistry =
+						isGlobalLookup && key !== null && globalRegistry
+							? globalRegistry.subscribe(key, () => {
+									unsubscribeStore();
+									unsubscribeStore = (
+										getStore() ??
+										(NullProviderStore as ProviderStoreApi<ContextValue>)
+									).subscribe(listener);
+									listener();
+								})
+							: () => {};
+
+					return () => {
+						unsubscribeRegistry();
+						unsubscribeStore();
+					};
 				},
-				[key],
-			);
-			const getSnapshot = useCallback(
-				() =>
-					key !== null && globalRegistry
-						? (globalRegistry.getStore(key) ?? fallbackStore)
-						: null,
-				[key, fallbackStore],
+				[getStore, isGlobalLookup, key],
 			);
 
-			return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-		};
+			const getSelectedSnapshot = useCallback(() => {
+				const snapshot = getStore()?.getSnapshot() ?? null;
 
-		const createStoreHook = (strict: boolean, allowGlobalLookup: boolean) => {
-			if (!allowGlobalLookup || !globalRegistry) {
-				return <Selected,>(
-					selector?: (value: ContextValue | null) => Selected,
-				): Selected | ContextValue | null => {
-					const store = useContext(StoreContext);
-					const resolvedStore =
-						store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-					const selectorRef = useRef(selector);
-					selectorRef.current = selector;
-
-					const getSelectedSnapshot = useCallback(() => {
-						if (strict && store === null) {
-							throw new Error(
-								`${name} store must be used within a ${name}Provider`,
-							);
-						}
-
-						const snapshot = resolvedStore.getSnapshot();
-
-						if (strict && snapshot === null) {
-							throw new Error(
-								`${name} store must be used within an enabled ${name}Provider`,
-							);
-						}
-
-						return selectorRef.current
-							? selectorRef.current(snapshot)
-							: snapshot;
-					}, [resolvedStore, store]);
-
-					return useSyncExternalStore(
-						resolvedStore.subscribe,
-						getSelectedSnapshot,
-						getSelectedSnapshot,
+				if (required && snapshot === null) {
+					throw new Error(
+						key === null
+							? `${name}Store is unavailable`
+							: `${name}Store is unavailable for key "${key}"`,
 					);
-				};
-			}
+				}
 
-			return <Selected,>(
-				selectorOrKey?: string | ((value: ContextValue | null) => Selected),
-				globalSelector?: (value: ContextValue) => Selected,
-			): Selected | ContextValue | null => {
-				const isGlobalLookup = typeof selectorOrKey === "string";
-				const key = isGlobalLookup ? selectorOrKey : null;
-				const selector = (isGlobalLookup ? globalSelector : selectorOrKey) as
-					| ((value: ContextValue | null) => Selected)
-					| undefined;
-				const contextStore = useContext(StoreContext);
-				const matchingContextStore =
-					key !== null &&
-					contextStore !== null &&
-					keyByStore?.get(contextStore) === key
-						? contextStore
-						: null;
-				const registeredStore = useRegisteredStore(key, matchingContextStore);
-				const store = isGlobalLookup ? registeredStore : contextStore;
-				const resolvedStore =
-					store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-				const selectorRef = useRef(selector);
-				selectorRef.current = selector;
-
-				const getSelectedSnapshot = useCallback(() => {
-					if (!isGlobalLookup && strict && store === null) {
-						throw new Error(
-							`${name} store must be used within a ${name}Provider`,
-						);
-					}
-
-					const snapshot = resolvedStore.getSnapshot();
-
-					if (isGlobalLookup && snapshot === null) {
-						return null;
-					}
-
-					if (!isGlobalLookup && strict && snapshot === null) {
-						throw new Error(
-							`${name} store must be used within an enabled ${name}Provider`,
-						);
-					}
-
-					return typeof selectorRef.current === "function"
-						? selectorRef.current(snapshot)
-						: snapshot;
-				}, [isGlobalLookup, resolvedStore, store]);
-
-				return useSyncExternalStore(
-					resolvedStore.subscribe,
-					getSelectedSnapshot,
-					getSelectedSnapshot,
-				);
-			};
-		};
+				if (isGlobalLookup && snapshot === null) {
+					return null;
+				}
 
-		const useStoreSelector = createStoreHook(guarded, global);
-		const factoryInternals: ProviderFactoryInternals<ContextValue> = {
-			useParentStore: createStoreHook(false, false) as ProviderStoreHook<
-				ContextValue,
-				false
-			>,
-		};
+				return typeof selectorRef.current === "function"
+					? selectorRef.current(snapshot)
+					: snapshot;
+			}, [getStore, isGlobalLookup, key, required]);
 
+			return useSyncExternalStore(
+				subscribe,
+				getSelectedSnapshot,
+				getSelectedSnapshot,
+			);
+		};
+		const useOptionalStoreSelector = <Selected,>(
+			selectorOrKey?:
+				| string
+				| null
+				| ((value: ContextValue | null) => Selected),
+			globalSelector?: (value: ContextValue) => Selected,
+		) => useStoreSelection(false, selectorOrKey, globalSelector);
+		const useStoreSelector = <Selected,>(
+			selectorOrKey?: string | ((value: ContextValue) => Selected),
+			globalSelector?: (value: ContextValue) => Selected,
+		) =>
+			useStoreSelection(
+				true,
+				selectorOrKey as
+					| string
+					| ((value: ContextValue | null) => Selected)
+					| undefined,
+				globalSelector,
+			);
 		const Provider: React.FC<ProviderProps> = (props) => {
 			const {
 				children = (props as { children?: ReactNode }).children,
-				enabled = true,
 				key,
 				value,
-			} = factory(props, factoryInternals);
-
-			if (!value) {
-				throw new Error(
-					`${name}Context value must be provided. You likely forgot to return it from the factory function.`,
-				);
-			}
-
-			const snapshotValue = enabled ? value : null;
+			} = factory(props);
 			const storeRef = useRef<MutableProviderStoreApi<ContextValue> | null>(
 				null,
 			);
 			const pendingNotifyRef = useRef(false);
 
 			if (storeRef.current === null) {
-				storeRef.current = createProviderStore<ContextValue>(snapshotValue);
+				storeRef.current = createProviderStore<ContextValue>(value);
 			}
 			const store = storeRef.current;
-			if (keyByStore && typeof key === "string") {
-				keyByStore.set(store, key);
-			}
 
 			useLayoutEffect(() => {
 				if (!globalRegistry) {
@@ -419,7 +349,7 @@ export default function createProvider<
 			}, [key, store]);
 
 			pendingNotifyRef.current =
-				store.setSnapshot(snapshotValue) || pendingNotifyRef.current;
+				store.setSnapshot(value) || pendingNotifyRef.current;
 
 			useLayoutEffect(() => {
 				if (!pendingNotifyRef.current) {
@@ -438,13 +368,18 @@ export default function createProvider<
 
 		return {
 			[`${name}Provider`]: Provider,
+			[`useOptional${name}Store`]: useOptionalStoreSelector,
 			[`use${name}Store`]: useStoreSelector,
 		} as {
 			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
+		} & {
+			[P in ProviderName as `useOptional${P}Store`]: ResolvedOptionalProviderStoreHook<
+				ContextValue,
+				Global
+			>;
 		} & {
 			[P in ProviderName as `use${P}Store`]: ResolvedProviderStoreHook<
 				ContextValue,
-				Guarded,
 				Global
 			>;
 		};