react-native-screen-transitions 3.4.0-alpha.0 → 3.4.0-alpha.1

package/src/shared/utils/bounds/index.ts

@@ -5,9 +5,9 @@ import { buildBoundsOptions } from "./helpers/build-bounds-options";
 import { computeBoundStyles } from "./helpers/compute-bounds-styles";
 import { createInterpolators } from "./helpers/interpolators";
 import { createLinkAccessor } from "./helpers/link-accessor";
-import { createNavigationAccessor } from "./helpers/navigation-accessor";
 import { resolveBoundTag } from "./helpers/resolve-bound-tag";
 import type { BoundsOptions } from "./types/options";
+import { createZoomAccessor } from "./zoom";
 
 export const createBoundsAccessor = (
 	getProps: () => Omit<ScreenInterpolationProps, "bounds">,
@@ -47,10 +47,8 @@ export const createBoundsAccessor = (
 			resolveBoundTag,
 		});
 
-		const computed = computeForResolvedOptions(resolved, props) as Record<
-			string,
-			unknown
-		>;
+		const computed = computeForResolvedOptions(resolved, props);
+
 		const zoomBaseOptions = {
 			anchor: params?.anchor,
 			scaleMode: params?.scaleMode,
@@ -90,7 +88,7 @@ export const createBoundsAccessor = (
 			return nextPair;
 		};
 
-		const navigation = createNavigationAccessor({
+		const navigation = createZoomAccessor({
 			id: params?.id,
 			group: params?.group,
 			getProps,
@@ -108,7 +106,7 @@ export const createBoundsAccessor = (
 						resolveBoundTag,
 					});
 					const resolvedPair = resolveNavigationPair(
-						resolvedNavigationOptions.id,
+						String(resolvedNavigationOptions.id),
 						currentProps,
 					);
 
@@ -128,7 +126,7 @@ export const createBoundsAccessor = (
 			configurable: true,
 		});
 
-		return target as typeof computed & { navigation: typeof navigation };
+		return target;
 	};
 
 	const { getSnapshot, getLink } = createLinkAccessor(getProps);

package/src/shared/utils/bounds/types/options.ts

@@ -3,6 +3,8 @@ import type { ScreenTransitionState } from "../../../types/animation.types";
 import type { BoundsMethod } from "../../../types/bounds.types";
 import type { Layout } from "../../../types/screen.types";
 
+export type BoundId = string | number;
+
 export type BoundsAnchor =
 	| "topLeading"
 	| "top"
@@ -21,7 +23,7 @@ type BoundsTarget = "bound" | "fullscreen" | MeasuredDimensions;
 type BoundsSpace = "relative" | "absolute";
 
 export type BoundsComputeParams = {
-	id?: string;
+	id?: BoundId;
 	previous?: ScreenTransitionState;
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
@@ -81,7 +83,7 @@ export type BoundsOptions = {
 	 * The ID of the bound to compute bounds for.
 	 * When `group` is also provided, this is the member id within the group (not the combined tag).
 	 */
-	id: string;
+	id: BoundId;
 
 	/**
 	 * Optional group name for collection/list scenarios.
@@ -101,8 +103,8 @@ export type BoundsOptions = {
 	 *
 	 * - "transform": translates and scales (scaleX/scaleY), no width/height size
 	 * - "size": translates and sizes (width/height), no scaleX/scaleY
-	 * - "content": screen-level content transform that aligns the destination screen
-	 *   so the target bound matches the source at progress start
+	 * - "content": screen-level content transform that aligns the current screen
+	 *   so its bound matches the paired target bound during the transition
 	 * @default "transform"
 	 */
 	method?: BoundsMethod;

package/src/shared/utils/bounds/zoom/accessor.ts

@@ -0,0 +1,69 @@
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import type { BoundsNavigationZoomOptions } from "../../../types/bounds.types";
+import type { ResolveBoundTagParams } from "../helpers/resolve-bound-tag";
+import type { BoundId, BoundsOptions } from "../types/options";
+import { buildZoomStyles } from "./build";
+
+type ZoomAccessorParams = {
+	id?: BoundId;
+	group?: string;
+	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
+	resolveBoundTag: (params: ResolveBoundTagParams) => string | undefined;
+	computeRaw: (
+		overrides?: Partial<BoundsOptions>,
+		frameProps?: Omit<ScreenInterpolationProps, "bounds">,
+	) => Record<string, unknown>;
+	zoomBaseOptions?: Pick<
+		BoundsNavigationZoomOptions,
+		"anchor" | "scaleMode" | "target"
+	>;
+};
+
+export const createZoomAccessor = ({
+	id,
+	group,
+	getProps,
+	resolveBoundTag,
+	computeRaw,
+	zoomBaseOptions,
+}: ZoomAccessorParams) => {
+	"worklet";
+
+	const resolvedId = id ?? "";
+
+	const computeZoomStyles = (zoomOptions?: BoundsNavigationZoomOptions) => {
+		"worklet";
+		const frameProps = getProps();
+		return buildZoomStyles({
+			id: resolvedId,
+			group,
+			zoomOptions,
+			props: frameProps,
+			resolveTag: resolveBoundTag,
+			computeRaw: (overrides) =>
+				computeRaw(
+					{
+						...(overrides ?? {}),
+						raw: true,
+					},
+					frameProps,
+				),
+		});
+	};
+
+	return {
+		zoom: (options?: BoundsNavigationZoomOptions) => {
+			"worklet";
+			const mergedOptions =
+				zoomBaseOptions || options
+					? {
+							...(zoomBaseOptions ?? {}),
+							...(options ?? {}),
+							...(options?.mask ? { mask: options.mask } : {}),
+							...(options?.motion ? { motion: options.motion } : {}),
+						}
+					: undefined;
+			return computeZoomStyles(mergedOptions);
+		},
+	};
+};