react-native-screen-transitions 3.9.0 → 3.11.0

package/src/shared/utils/bounds/navigation/reveal/math.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
 import { computeContentTransformGeometry } from "../../helpers/geometry";
+import type { ContentTransformGeometry } from "../../types/geometry";
 import type { BoundsAnchor } from "../../types/options";
 import {
 	DRAG_DIRECTIONAL_SCALE_EXPONENT,
@@ -185,6 +186,22 @@ function getBoundsCenterY(bounds: MeasuredDimensions) {
 	return bounds.pageY + bounds.height / 2;
 }
 
+export function resolveRevealContentBaseTransformFromGeometry({
+	progress,
+	geometry,
+}: {
+	progress: number;
+	geometry: ContentTransformGeometry;
+}) {
+	"worklet";
+
+	return {
+		translateX: mixUnit(geometry.tx, 0, progress),
+		translateY: mixUnit(geometry.ty, 0, progress),
+		scale: mixUnit(geometry.s, 1, progress),
+	};
+}
+
 export function resolveRevealContentBaseTransform({
 	progress,
 	sourceBounds,
@@ -209,11 +226,10 @@ export function resolveRevealContentBaseTransform({
 		scaleMode: "uniform",
 	});
 
-	return {
-		translateX: mixUnit(geometry.tx, 0, progress),
-		translateY: mixUnit(geometry.ty, 0, progress),
-		scale: mixUnit(geometry.s, 1, progress),
-	};
+	return resolveRevealContentBaseTransformFromGeometry({
+		geometry,
+		progress,
+	});
 }
 
 export function resolveTrackedSourceElementTransform({

package/src/shared/utils/bounds/navigation/zoom/build.ts

@@ -3,9 +3,12 @@ import {
 	EPSILON,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../../constants";
+import { getVisualScrollAxisDelta } from "../../../../stores/scroll.store";
+import type { ScrollMetadataState } from "../../../../types/gesture.types";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
+import { computeContentTransformGeometry } from "../../helpers/geometry";
 import { getSourceBorderRadius } from "../helpers";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
+import { resolveRevealContentBaseTransformFromGeometry } from "../reveal/math";
 import {
 	ZOOM_BACKDROP_MAX_OPACITY,
 	ZOOM_BACKGROUND_SCALE,
@@ -16,7 +19,7 @@ import {
 	ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
 	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 } from "./config";
-import { resolveZoomDragState, resolveZoomTrackedGestureScale } from "./drag";
+import { resolveZoomDragState } from "./drag";
 import {
 	resolveZoomBackdropOpacity,
 	resolveZoomPinchFocalOffset,
@@ -107,23 +110,31 @@ export function buildZoomStyles({
 		return {};
 	}
 
+	const isDismissing = active.gesture.dismissing === 1;
+	const dismissalTrackingGeometry = isDismissing
+		? computeContentTransformGeometry({
+				start: sourceBounds,
+				end: trackingContentTarget,
+				entering: true,
+				dimensions: screenLayout,
+				anchor: zoomContentAnchor,
+				scaleMode: "uniform",
+			})
+		: null;
+	const dismissalCollapsedContentScale = dismissalTrackingGeometry
+		? resolveRevealContentBaseTransformFromGeometry({
+				geometry: dismissalTrackingGeometry,
+				progress: 0,
+			}).scale
+		: 1;
 	const drag = resolveZoomDragState({
 		gesture: active.gesture,
 		activeTransitionProgress,
 		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
+		collapsedContentScale: dismissalCollapsedContentScale,
 		dragOptions: zoomOptions?.drag,
 	});
 
-	const trackedGestureScale = resolveZoomTrackedGestureScale({
-		drag,
-		activeTransitionProgress,
-		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
-	});
-
 	const focalGesture = drag.isDismissing
 		? active.gesture.handoff
 		: active.gesture;
@@ -134,7 +145,7 @@ export function buildZoomStyles({
 			? resolveZoomPinchFocalOffset({
 					gestureScale: drag.isDismissing
 						? focalGesture.scale
-						: trackedGestureScale,
+						: drag.gestureScale,
 					pinchOriginX: focalGesture.pinchOriginX,
 					pinchOriginY: focalGesture.pinchOriginY,
 					progress: focalProgress,
@@ -144,6 +155,28 @@ export function buildZoomStyles({
 			: { x: 0, y: 0 };
 
 	if (focused) {
+		const capturedSourceScroll = (
+			sourceBounds as typeof sourceBounds & {
+				scroll?: ScrollMetadataState | null;
+			}
+		).scroll;
+		const liveSourceScroll = props.inactive?.layouts.scroll;
+		const sourceScrollWeight =
+			keepFocusedVisible && (active.entering || active.closing)
+				? 1 - Math.min(Math.max(activeTransitionProgress, 0), 1)
+				: 0;
+		const sourceScrollDeltaX =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"horizontal",
+			) * sourceScrollWeight;
+		const sourceScrollDeltaY =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"vertical",
+			) * sourceScrollWeight;
 		const sourceBorderRadius = getSourceBorderRadius(link);
 		const navigationMaskEnabled = current.options.navigationMaskEnabled;
 		const backdropOpacity = resolveZoomBackdropOpacity({
@@ -179,11 +212,13 @@ export function buildZoomStyles({
 		const contentTranslateX =
 			contentBaseTranslateX +
 			drag.dragX +
-			pinchFocalOffset.x * contentBaseScale;
+			pinchFocalOffset.x * contentBaseScale -
+			sourceScrollDeltaX;
 		const contentTranslateY =
 			contentBaseTranslateY +
 			drag.dragY +
-			pinchFocalOffset.y * contentBaseScale;
+			pinchFocalOffset.y * contentBaseScale -
+			sourceScrollDeltaY;
 		const contentScale = drag.isDismissing
 			? drag.dismissContentScale
 			: contentBaseScale * drag.gestureScale;
@@ -277,19 +312,39 @@ export function buildZoomStyles({
 		};
 	}
 
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
+	const trackingGeometry =
+		dismissalTrackingGeometry ??
+		computeContentTransformGeometry({
+			start: sourceBounds,
+			end: trackingContentTarget,
+			entering: true,
+			dimensions: screenLayout,
+			anchor: zoomContentAnchor,
+			scaleMode: "uniform",
+		});
+	const trackedContentBaseTransform =
+		resolveRevealContentBaseTransformFromGeometry({
+			geometry: trackingGeometry,
+			progress: activeTransitionProgress,
+		});
+	const collapsedContentScale = drag.isDismissing
+		? dismissalCollapsedContentScale
+		: resolveRevealContentBaseTransformFromGeometry({
+				geometry: trackingGeometry,
+				progress: 0,
+			}).scale;
+	const trackedGestureScale = drag.isDismissing
+		? drag.dismissContentScale / trackedContentBaseTransform.scale
+		: drag.gestureScale;
+	const trackedContentBaseScale = trackedContentBaseTransform.scale;
 	const trackedDragX =
 		drag.dragX + pinchFocalOffset.x * trackedContentBaseScale;
 	const trackedDragY =
 		drag.dragY + pinchFocalOffset.y * trackedContentBaseScale;
 
 	const trackedSourceElement = resolveZoomTrackedSourceTransform({
-		progress: activeTransitionProgress,
+		contentBaseTransform: trackedContentBaseTransform,
+		collapsedContentScale,
 		sourceBounds,
 		destinationBounds: trackingContentTarget,
 		screenLayout,
@@ -298,7 +353,6 @@ export function buildZoomStyles({
 		gestureScale: trackedGestureScale,
 		parentScale: unfocusedContentScale,
 		rotation: drag.rotation,
-		anchor: zoomContentAnchor,
 	});
 
 	return {

package/src/shared/utils/bounds/navigation/zoom/drag.ts

@@ -1,11 +1,9 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type {
 	BoundsInterpolationProps,
 	BoundsNavigationZoomDragOptions,
 } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
 import { ZOOM_DISMISS_VELOCITY_DEPTH } from "./config";
 
 const ZOOM_DRAG_SCALE_EXPONENT = 2;
@@ -169,15 +167,13 @@ export function resolveZoomDragState({
 	gesture,
 	activeTransitionProgress,
 	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
+	collapsedContentScale,
 	dragOptions,
 }: {
 	gesture: ZoomGesture;
 	activeTransitionProgress: number;
 	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
+	collapsedContentScale: number;
 	dragOptions?: BoundsNavigationZoomDragOptions;
 }): ZoomDragState {
 	"worklet";
@@ -266,16 +262,10 @@ export function resolveZoomDragState({
 	let dismissContentScale = gestureScale;
 
 	if (isDismissing) {
-		const targetContentScale = resolveRevealContentBaseTransform({
-			progress: 0,
-			sourceBounds,
-			destinationBounds: trackingContentTarget,
-			screenLayout,
-		}).scale;
 		dismissContentScale = resolveZoomDismissContentScale({
 			transitionRemaining: activeTransitionProgress,
 			releaseScale: gestureScale,
-			targetScale: targetContentScale,
+			targetScale: collapsedContentScale,
 			velocity: gestureHandoff.velocity,
 			velocityDepth:
 				ZOOM_DISMISS_VELOCITY_DEPTH *
@@ -296,32 +286,3 @@ export function resolveZoomDragState({
 		rotation,
 	};
 }
-
-export function resolveZoomTrackedGestureScale({
-	drag,
-	activeTransitionProgress,
-	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
-}: {
-	drag: ZoomDragState;
-	activeTransitionProgress: number;
-	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
-}) {
-	"worklet";
-
-	if (!drag.isDismissing) {
-		return drag.gestureScale;
-	}
-
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
-
-	return drag.dismissContentScale / trackedContentBaseScale;
-}

package/src/shared/utils/bounds/navigation/zoom/helpers.ts

@@ -1,11 +1,7 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
-import type { BoundsAnchor } from "../../types/options";
-import {
-	resolveRevealContentBaseTransform,
-	resolveTrackedSourceElementTransform,
-} from "../reveal/math";
+import { resolveTrackedSourceElementTransform } from "../reveal/math";
 
 export function resolveZoomBackdropOpacity({
 	transitionProgress,
@@ -65,44 +61,34 @@ export function resolveZoomPinchFocalOffset({
 }
 
 export function resolveZoomTrackedSourceTransform({
-	progress,
 	sourceBounds,
 	destinationBounds,
 	screenLayout,
+	contentBaseTransform,
+	collapsedContentScale,
 	dragX,
 	dragY,
 	gestureScale,
 	parentScale,
 	rotation = 0,
-	anchor,
 }: {
-	progress: number;
 	sourceBounds: MeasuredDimensions;
 	destinationBounds: MeasuredDimensions;
 	screenLayout: Layout;
+	contentBaseTransform: {
+		translateX: number;
+		translateY: number;
+		scale: number;
+	};
+	collapsedContentScale: number;
 	dragX: number;
 	dragY: number;
 	gestureScale: number;
 	parentScale: number;
 	rotation?: number;
-	anchor?: BoundsAnchor;
 }) {
 	"worklet";
 
-	const contentBaseTransform = resolveRevealContentBaseTransform({
-		progress,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	});
-	const collapsedContentScale = resolveRevealContentBaseTransform({
-		progress: 0,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	}).scale;
 	const contentScale = contentBaseTransform.scale * gestureScale;
 	const safeCollapsedContentScale = Math.max(
 		Math.abs(collapsedContentScale),

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

@@ -2,6 +2,18 @@
  * 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 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.
+ *
+ * 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.
  */
 import {
 	createContext,
@@ -9,13 +21,10 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
-	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
 
-type InnerProviderComponent = React.FC<{ children: ReactNode }>;
-
 type ProviderSnapshot<
 	ContextValue,
 	Guarded extends boolean,
@@ -32,9 +41,8 @@ type ProviderStoreHook<ContextValue, Guarded extends boolean> = {
 	): Selected;
 };
 
-type ProviderOptionalStoreHook<ContextValue> = {
-	(): ContextValue | null;
-	<Selected>(selector: (value: ContextValue | null) => Selected): Selected;
+export type ProviderFactoryInternals<ContextValue> = {
+	useParentStore: ProviderStoreHook<ContextValue, false>;
 };
 
 export interface ProviderStoreApi<ContextValue> {
@@ -53,6 +61,42 @@ const NullProviderStore: ProviderStoreApi<never> = {
 	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 +111,7 @@ const createProviderStore = <ContextValue,>(
 			}
 		},
 		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
+			if (shallowEqual(snapshot, nextSnapshot)) {
 				return false;
 			}
 
@@ -88,36 +132,73 @@ export default function createProvider<
 	Guarded extends boolean = true,
 >(name: ProviderName, options?: { guarded?: Guarded }) {
 	return <ProviderProps extends object, ContextValue>(
-		factory: (props: ProviderProps) => {
+		factory: (
+			props: ProviderProps,
+			internals: ProviderFactoryInternals<ContextValue>,
+		) => {
 			value?: ContextValue;
 			enabled?: boolean;
-			children?:
-				| ReactNode
-				| ((
-						innerProvider: {
-							[K in ProviderName as `${K}Provider`]: InnerProviderComponent;
-						},
-				  ) => ReactNode);
+			children?: ReactNode;
 		},
 	) => {
 		const { guarded = true } = options ?? {};
 		const providerDisplayName = `${name}Provider`;
-		const innerProviderDisplayName = `${name}InnerProvider`;
-
-		const Context = createContext<ContextValue | null>(null);
-		Context.displayName = name;
 
 		const StoreContext = createContext<ProviderStoreApi<ContextValue> | null>(
 			null,
 		);
 		StoreContext.displayName = `${name}Store`;
 
+		const createStoreHook = (strict: boolean) => {
+			return <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 (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,
+				);
+			};
+		};
+
+		const useStoreSelector = createStoreHook(guarded);
+		const factoryInternals: ProviderFactoryInternals<ContextValue> = {
+			useParentStore: createStoreHook(false) as ProviderStoreHook<
+				ContextValue,
+				false
+			>,
+		};
+
 		const Provider: React.FC<ProviderProps> = (props) => {
 			const {
 				children = (props as { children?: ReactNode }).children,
 				enabled = true,
 				value,
-			} = factory(props);
+			} = factory(props, factoryInternals);
 
 			if (!value) {
 				throw new Error(
@@ -125,23 +206,19 @@ export default function createProvider<
 				);
 			}
 
-			const memoValue = useMemo(
-				() => (enabled ? value : null),
-				[enabled, value],
-			);
-
+			const snapshotValue = enabled ? value : null;
 			const storeRef = useRef<MutableProviderStoreApi<ContextValue> | null>(
 				null,
 			);
 			const pendingNotifyRef = useRef(false);
 
 			if (storeRef.current === null) {
-				storeRef.current = createProviderStore<ContextValue>(memoValue);
+				storeRef.current = createProviderStore<ContextValue>(snapshotValue);
 			}
 			const store = storeRef.current;
 
 			pendingNotifyRef.current =
-				store.setSnapshot(memoValue) || pendingNotifyRef.current;
+				store.setSnapshot(snapshotValue) || pendingNotifyRef.current;
 
 			useLayoutEffect(() => {
 				if (!pendingNotifyRef.current) {
@@ -152,130 +229,22 @@ export default function createProvider<
 				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>
+				<StoreContext.Provider value={store}>{children}</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) {
-					throw new Error(
-						`${name} store must be used within a ${name}Provider`,
-					);
-				}
-
-				const snapshot = resolvedStore.getSnapshot();
-
-				if (guarded && 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,
-			);
-		};
-
-		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,
-			);
-		};
-
 		return {
-			[`${name}Context`]: Context,
-			[`${name}StoreContext`]: StoreContext,
 			[`${name}Provider`]: Provider,
-			[`use${name}Context`]: useEnhancedContext,
 			[`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>;
-		} & {
 			[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<
 				ContextValue,
 				Guarded
 			>;
-		} & {
-			[P in ProviderName as `use${P}OptionalStore`]: ProviderOptionalStoreHook<ContextValue>;
 		};
 	};
 }