react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/utils/create-provider.tsx

@@ -2,6 +2,24 @@
  * THANK YOU @MatiPl01
  * 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 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
+ *   object when the contents are unchanged. Derived object and array fields
+ *   must still have stable identities.
+ * - `children`: passed-through children keep their identity across
+ *   provider-local renders. Factories that wrap children should use a
+ *   module-level memoized component for the wrapper.
+ *
+ * Providers created with `global: true` return a `key` from their factory.
+ * Both generated store hooks accept that key to subscribe to the original
+ * provider store from outside its React context.
  */
 import {
 	createContext,
@@ -9,35 +27,57 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
-	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
 
-type InnerProviderComponent = React.FC<{ children: ReactNode }>;
-
-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 ProviderOptionalStoreHook<ContextValue> = {
+type OptionalProviderStoreHook<ContextValue> = {
 	(): ContextValue | null;
 	<Selected>(selector: (value: ContextValue | null) => Selected): Selected;
 };
 
-export interface ProviderStoreApi<ContextValue> {
+type OptionalGlobalProviderStoreHook<ContextValue> = {
+	(key: string | null): ContextValue | null;
+	<Selected>(
+		key: string | null,
+		selector: (value: ContextValue) => Selected,
+	): Selected | null;
+};
+
+type ResolvedProviderStoreHook<
+	ContextValue,
+	Global extends boolean,
+> = 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;
+	children?: ReactNode;
+	unregisterOnCleanup?: boolean;
+} & (Global extends true ? { key: string } : { key?: never });
+
+interface ProviderStoreApi<ContextValue> {
 	getSnapshot: () => ContextValue | null;
 	subscribe: (listener: () => void) => () => void;
 }
@@ -48,11 +88,53 @@ interface MutableProviderStoreApi<ContextValue>
 	setSnapshot: (snapshot: ContextValue | null) => boolean;
 }
 
+interface ProviderStoreRegistry<ContextValue> {
+	getStore: (key: string) => ProviderStoreApi<ContextValue> | null;
+	register: (key: string, store: ProviderStoreApi<ContextValue>) => () => void;
+	subscribe: (key: string, listener: () => void) => () => void;
+}
+
 const NullProviderStore: ProviderStoreApi<never> = {
 	getSnapshot: () => null,
 	subscribe: () => () => {},
 };
 
+const shallowEqual = (a: unknown, b: unknown): boolean => {
+	if (Object.is(a, b)) {
+		return true;
+	}
+
+	if (
+		typeof a !== "object" ||
+		a === null ||
+		typeof b !== "object" ||
+		b === null
+	) {
+		return false;
+	}
+
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+
+	if (aKeys.length !== bKeys.length) {
+		return false;
+	}
+
+	for (const key of aKeys) {
+		if (
+			!(key in b) ||
+			!Object.is(
+				(a as Record<string, unknown>)[key],
+				(b as Record<string, unknown>)[key],
+			)
+		) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
 const createProviderStore = <ContextValue,>(
 	initialSnapshot: ContextValue | null,
 ): MutableProviderStoreApi<ContextValue> => {
@@ -67,7 +149,7 @@ const createProviderStore = <ContextValue,>(
 			}
 		},
 		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
+			if (shallowEqual(snapshot, nextSnapshot)) {
 				return false;
 			}
 
@@ -83,199 +165,257 @@ const createProviderStore = <ContextValue,>(
 	};
 };
 
+const createProviderStoreRegistry = <
+	ContextValue,
+>(): ProviderStoreRegistry<ContextValue> => {
+	const listenersByKey = new Map<string, Set<() => void>>();
+	const storesByKey = new Map<string, ProviderStoreApi<ContextValue>>();
+
+	const notify = (key: string) => {
+		for (const listener of listenersByKey.get(key) ?? []) {
+			listener();
+		}
+	};
+
+	return {
+		getStore: (key) => storesByKey.get(key) ?? null,
+		register: (key, store) => {
+			storesByKey.set(key, store);
+			notify(key);
+
+			return () => {
+				storesByKey.delete(key);
+				notify(key);
+			};
+		},
+		subscribe: (key, listener) => {
+			const listeners = listenersByKey.get(key) ?? new Set<() => void>();
+			listeners.add(listener);
+			listenersByKey.set(key, listeners);
+
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size === 0) {
+					listenersByKey.delete(key);
+				}
+			};
+		},
+	};
+};
+
 export default function createProvider<
 	ProviderName extends string,
-	Guarded extends boolean = true,
->(name: ProviderName, options?: { guarded?: Guarded }) {
+	Global extends boolean = false,
+>(name: ProviderName, options?: { global?: Global }) {
 	return <ProviderProps extends object, ContextValue>(
-		factory: (props: ProviderProps) => {
-			value?: ContextValue;
-			enabled?: boolean;
-			children?:
-				| ReactNode
-				| ((
-						innerProvider: {
-							[K in ProviderName as `${K}Provider`]: InnerProviderComponent;
-						},
-				  ) => ReactNode);
-		},
+		factory: (
+			props: ProviderProps,
+		) => ProviderFactoryResult<ContextValue, Global>,
 	) => {
-		const { guarded = true } = options ?? {};
+		const { global = false } = options ?? {};
 		const providerDisplayName = `${name}Provider`;
-		const innerProviderDisplayName = `${name}InnerProvider`;
-
-		const Context = createContext<ContextValue | null>(null);
-		Context.displayName = name;
+		const globalRegistry = global
+			? createProviderStoreRegistry<ContextValue>()
+			: null;
 
 		const StoreContext = createContext<ProviderStoreApi<ContextValue> | null>(
 			null,
 		);
 		StoreContext.displayName = `${name}Store`;
 
-		const Provider: React.FC<ProviderProps> = (props) => {
-			const {
-				children = (props as { children?: ReactNode }).children,
-				enabled = true,
-				value,
-			} = factory(props);
-
-			if (!value) {
-				throw new Error(
-					`${name}Context value must be provided. You likely forgot to return it from the factory function.`,
-				);
-			}
+		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;
+				}
 
-			const memoValue = useMemo(
-				() => (enabled ? value : null),
-				[enabled, value],
+				return contextStore;
+			}, [contextStore, isGlobalLookup, key]);
+			const subscribe = useCallback(
+				(listener: () => void) => {
+					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();
+					};
+				},
+				[getStore, isGlobalLookup, key],
 			);
 
+			const getSelectedSnapshot = useCallback(() => {
+				const snapshot = getStore()?.getSnapshot() ?? null;
+
+				if (required && snapshot === null) {
+					throw new Error(
+						key === null
+							? `${name}Store is unavailable`
+							: `${name}Store is unavailable for key "${key}"`,
+					);
+				}
+
+				if (isGlobalLookup && snapshot === null) {
+					return null;
+				}
+
+				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 StoreProvider = ({
+			children,
+			storeKey,
+			unregisterOnCleanup = true,
+			value,
+		}: {
+			children?: ReactNode;
+			storeKey?: string;
+			unregisterOnCleanup?: boolean;
+			value: ContextValue;
+		}) => {
 			const storeRef = useRef<MutableProviderStoreApi<ContextValue> | null>(
 				null,
 			);
 			const pendingNotifyRef = useRef(false);
+			const unregisterOnCleanupRef = useRef(unregisterOnCleanup);
+			unregisterOnCleanupRef.current = unregisterOnCleanup;
 
 			if (storeRef.current === null) {
-				storeRef.current = createProviderStore<ContextValue>(memoValue);
+				storeRef.current = createProviderStore<ContextValue>(value);
 			}
 			const store = storeRef.current;
 
-			pendingNotifyRef.current =
-				store.setSnapshot(memoValue) || pendingNotifyRef.current;
-
 			useLayoutEffect(() => {
-				if (!pendingNotifyRef.current) {
+				if (!globalRegistry) {
 					return;
 				}
 
-				pendingNotifyRef.current = false;
-				store.notify();
-			});
-
-			// Per-instance ref ensures InnerProvider reads latest value while keeping
-			// a stable component reference.
-			const valueRef = useRef<ContextValue | null>(memoValue);
-			valueRef.current = memoValue;
-
-			const InnerProvider = useMemo((): InnerProviderComponent => {
-				const NamedInnerProvider: InnerProviderComponent = ({ children }) => (
-					<StoreContext.Provider value={store}>
-						<Context.Provider value={valueRef.current}>
-							{children}
-						</Context.Provider>
-					</StoreContext.Provider>
-				);
-
-				NamedInnerProvider.displayName = innerProviderDisplayName;
-
-				return NamedInnerProvider;
-			}, [store]);
-
-			if (typeof children === "function") {
-				return children({
-					[`${name}Provider`]: InnerProvider,
-				} as { [K in ProviderName as `${K}Provider`]: InnerProviderComponent });
-			}
-
-			return (
-				<StoreContext.Provider value={store}>
-					<Context.Provider value={memoValue}>{children}</Context.Provider>
-				</StoreContext.Provider>
-			);
-		};
-		Provider.displayName = providerDisplayName;
-
-		const useEnhancedContext = (): ContextValue | null => {
-			const context = useContext(Context);
-
-			if (guarded && context === null) {
-				throw new Error(
-					`${name} context must be used within a ${name}Provider`,
-				);
-			}
-
-			return context;
-		};
-
-		const useStoreSelector = <Selected,>(
-			selector?: (value: ContextValue | null) => Selected,
-		): Selected | ContextValue | null => {
-			const store = useContext(StoreContext);
-			const resolvedStore =
-				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-			const selectorRef = useRef<typeof selector>(selector);
-			selectorRef.current = selector;
-
-			const getSelectedSnapshot = useCallback(() => {
-				if (guarded && store === null) {
+				if (typeof storeKey !== "string") {
 					throw new Error(
-						`${name} store must be used within a ${name}Provider`,
+						`${name}StoreProvider requires a storeKey when global mode is enabled`,
 					);
 				}
 
-				const snapshot = resolvedStore.getSnapshot();
+				const unregister = globalRegistry.register(storeKey, store);
 
-				if (guarded && snapshot === null) {
-					throw new Error(
-						`${name} store must be used within an enabled ${name}Provider`,
-					);
+				return () => {
+					if (unregisterOnCleanupRef.current) {
+						unregister();
+					}
+				};
+			}, [storeKey, store]);
+
+			pendingNotifyRef.current =
+				store.setSnapshot(value) || pendingNotifyRef.current;
+
+			useLayoutEffect(() => {
+				if (!pendingNotifyRef.current) {
+					return;
 				}
 
-				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
-			}, [resolvedStore, store]);
+				pendingNotifyRef.current = false;
+				store.notify();
+			});
 
-			return useSyncExternalStore(
-				resolvedStore.subscribe,
-				getSelectedSnapshot,
-				getSelectedSnapshot,
+			return (
+				<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
 			);
 		};
+		StoreProvider.displayName = `${name}StoreProvider`;
 
-		const useOptionalStoreSelector = <Selected,>(
-			selector?: (value: ContextValue | null) => Selected,
-		): Selected | ContextValue | null => {
-			const store = useContext(StoreContext);
-			const resolvedStore =
-				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-			const selectorRef = useRef<typeof selector>(selector);
-			selectorRef.current = selector;
-
-			const getSelectedSnapshot = useCallback(() => {
-				const snapshot = resolvedStore.getSnapshot();
-				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
-			}, [resolvedStore]);
-
-			return useSyncExternalStore(
-				resolvedStore.subscribe,
-				getSelectedSnapshot,
-				getSelectedSnapshot,
+		const Provider: React.FC<ProviderProps> = (props) => {
+			const {
+				children = (props as { children?: ReactNode }).children,
+				key,
+				unregisterOnCleanup,
+				value,
+			} = factory(props);
+			return (
+				<StoreProvider
+					storeKey={key}
+					unregisterOnCleanup={unregisterOnCleanup}
+					value={value}
+				>
+					{children}
+				</StoreProvider>
 			);
 		};
+		Provider.displayName = providerDisplayName;
 
 		return {
-			[`${name}Context`]: Context,
-			[`${name}StoreContext`]: StoreContext,
+			StoreProvider,
 			[`${name}Provider`]: Provider,
-			[`use${name}Context`]: useEnhancedContext,
+			[`useOptional${name}Store`]: useOptionalStoreSelector,
 			[`use${name}Store`]: useStoreSelector,
-			[`use${name}OptionalStore`]: useOptionalStoreSelector,
-		} as {
-			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
-		} & {
-			[P in ProviderName as `${P}StoreContext`]: React.Context<ProviderStoreApi<ContextValue> | null>;
-		} & {
+		} as { StoreProvider: typeof StoreProvider } & {
 			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
 		} & {
-			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
-				? ContextValue
-				: ContextValue | null;
-		} & {
-			[P in ProviderName as `use${P}Store`]: ProviderStoreHook<
+			[P in ProviderName as `useOptional${P}Store`]: ResolvedOptionalProviderStoreHook<
 				ContextValue,
-				Guarded
+				Global
 			>;
 		} & {
-			[P in ProviderName as `use${P}OptionalStore`]: ProviderOptionalStoreHook<ContextValue>;
+			[P in ProviderName as `use${P}Store`]: ResolvedProviderStoreHook<
+				ContextValue,
+				Global
+			>;
 		};
 	};
 }

package/src/utils/navigation/close-action-replay.ts

@@ -0,0 +1,25 @@
+const CLOSE_ACTION_REPLAY = Symbol("screen-transition-close-action-replay");
+
+type MarkedCloseAction = {
+	[CLOSE_ACTION_REPLAY]?: true;
+};
+
+export const isCloseActionReplay = (action: unknown): boolean =>
+	typeof action === "object" &&
+	action !== null &&
+	(action as MarkedCloseAction)[CLOSE_ACTION_REPLAY] === true;
+
+/** Carries the terminal-removal bypass through React Navigation's action clones. */
+export const dispatchCloseAction = <TAction extends object>(
+	action: TAction,
+	dispatch: (action: TAction) => void,
+) => {
+	const markedAction = action as TAction & MarkedCloseAction;
+	markedAction[CLOSE_ACTION_REPLAY] = true;
+
+	try {
+		dispatch(action);
+	} finally {
+		delete markedAction[CLOSE_ACTION_REPLAY];
+	}
+};

package/src/utils/normalize-interpolated-style.ts

@@ -3,49 +3,18 @@ import type {
 	NormalizedTransitionSlotStyle,
 } from "../types/animation.types";
 
-/**
- * Normalizes an interpolator result into the canonical `{ style, props }` slot format.
- *
- * Handles three cases per key:
- * 1. Legacy renamed keys (`contentStyle` → `content`, `backdropStyle` → `backdrop`)
- * 2. Proper `TransitionSlotStyle` values (has `style` or `props` key) — pass through
- * 3. Style shorthand (plain StyleProps without wrapping) — auto-wrapped as `{ style: value }`
- *
- * Mixed-format objects (e.g. new-format spread + a legacy `backdropStyle` key) are
- * handled correctly because each key is processed individually.
- */
-export function normalizeInterpolatedStyle(raw: Record<string, any>): {
-	result: NormalizedTransitionInterpolatedStyle;
-	wasLegacy: boolean;
-} {
+/** Normalizes style shorthand into the canonical `{ style, props }` slots. */
+export function normalizeInterpolatedStyle(
+	raw: Record<string, any>,
+): NormalizedTransitionInterpolatedStyle {
 	"worklet";
 
-	const hasLegacyKeys =
-		"contentStyle" in raw || "backdropStyle" in raw || "overlayStyle" in raw;
-
 	const normalized: Record<string, NormalizedTransitionSlotStyle | undefined> =
 		{};
 
 	for (const key in raw) {
 		const value = raw[key];
 
-		// ── Legacy key renames ──
-		if (key === "contentStyle") {
-			if (value !== undefined) normalized.content = { style: value };
-			continue;
-		}
-		if (key === "backdropStyle") {
-			if (value !== undefined) normalized.backdrop = { style: value };
-			continue;
-		}
-		if (key === "overlayStyle") {
-			if (value !== undefined && !normalized.backdrop) {
-				normalized.backdrop = { style: value };
-			}
-			continue;
-		}
-
-		// ── All other keys ──
 		if (value === undefined) {
 			normalized[key] = undefined;
 			continue;
@@ -60,8 +29,5 @@ export function normalizeInterpolatedStyle(raw: Record<string, any>): {
 		}
 	}
 
-	return {
-		result: normalized as NormalizedTransitionInterpolatedStyle,
-		wasLegacy: hasLegacyKeys,
-	};
+	return normalized as NormalizedTransitionInterpolatedStyle;
 }

package/src/utils/resolve-screen-transition-options.ts

@@ -5,18 +5,9 @@ import type {
 } from "../types/screen.types";
 
 export const resolveSheetScrollGestureBehavior = (
-	options: Pick<
-		ScreenTransitionConfig,
-		"sheetScrollGestureBehavior" | "expandViaScrollView"
-	>,
+	options: Pick<ScreenTransitionConfig, "sheetScrollGestureBehavior">,
 ): SheetScrollGestureBehavior => {
-	const explicitBehavior = options.sheetScrollGestureBehavior;
-	if (explicitBehavior) return explicitBehavior;
-
-	const legacyBehavior = options.expandViaScrollView;
-	if (legacyBehavior !== undefined) {
-		return legacyBehavior ? "expand-and-collapse" : "collapse-only";
-	}
-
-	return DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR;
+	return (
+		options.sheetScrollGestureBehavior ?? DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR
+	);
 };