react-native-screen-transitions 3.6.0-alpha.1 → 3.6.0-alpha.3

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

@@ -14,6 +14,7 @@ import type {
 	TransitionInterpolatedStyle,
 	TransitionSlotStyle,
 } from "./animation.types";
+import type { GestureProgressMode } from "./gesture.types";
 
 /**
  * Target style computation.
@@ -161,11 +162,81 @@ export type BoundsNavigationZoomStyle = TransitionInterpolatedStyle & {
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: TransitionSlotStyle;
 };
 
+export type BoundsNavigationRevealOptions = {
+	/**
+	 * Destination mask border radius.
+	 *
+	 * Reveal interpolates from the measured source border radius to this value.
+	 *
+	 * @default Platform-specific reveal radius
+	 */
+	borderRadius?: number;
+	/**
+	 * Whether the reveal mask should use React Native's continuous border curve.
+	 *
+	 * @default true
+	 */
+	borderContinuous?: boolean;
+	/**
+	 * Maximum dynamic gesture sensitivity applied by reveal.
+	 *
+	 * Reveal lowers gesture sensitivity as the drag gets deeper so the masked
+	 * container can keep its source-to-destination handoff stable. This value
+	 * controls the starting/highest sensitivity in that curve.
+	 *
+	 * @default 0.8
+	 */
+	maxSensitivity?: number;
+	/**
+	 * Velocity-driven depth applied to the dismiss scale handoff.
+	 *
+	 * Higher values make fast releases orbit farther around the final source
+	 * scale. Set to `0` to remove the velocity depth effect.
+	 *
+	 * @default 0.5
+	 */
+	velocityDepth?: number;
+	/**
+	 * Whether gesture displacement should drive transition progress or remain as
+	 * freeform gesture values. Reveal defaults to `"freeform"` so drag can move
+	 * the masked container without owning the whole screen progress.
+	 *
+	 * @default "freeform"
+	 */
+	gestureProgressMode?: GestureProgressMode;
+	/**
+	 * Temporarily blocks pointer-event pass-through on the inactive content until
+	 * the source element transition handoff reaches progress `0.25`.
+	 *
+	 * This is intentional and most users cannot react fast enough to swipe during
+	 * that brief handoff. If it becomes an issue, set this to `false` to disable
+	 * the guard and keep the default behavior that allows pointer events to pass
+	 * through.
+	 *
+	 * @default true
+	 */
+	disablePointerEventsTillElementTransition?: boolean;
+	/**
+	 * How reveal should resize the navigation mask element.
+	 *
+	 * `"auto"` uses the platform default. Android defaults to transform-based
+	 * resizing to avoid masked-size animation cost, while other platforms animate
+	 * width and height. Transform-based resizing can make large border radii look
+	 * less natural on Android; use `"size"` to force width/height animation when
+	 * radius quality is more important than that optimization.
+	 *
+	 * @default "auto"
+	 */
+	maskSizingMode?: "auto" | "transform" | "size";
+};
+
 export type BoundsNavigationRevealStyle = BoundsNavigationZoomStyle;
 
 export type BoundsNavigationAccessor = {
 	zoom: (options?: BoundsNavigationZoomOptions) => BoundsNavigationZoomStyle;
-	reveal: () => BoundsNavigationRevealStyle;
+	reveal: (
+		options?: BoundsNavigationRevealOptions,
+	) => BoundsNavigationRevealStyle;
 };
 
 type BoundsBoundNavigationAccessor = {

package/src/shared/types/gesture.types.ts

@@ -66,8 +66,6 @@ export enum GestureActivationState {
 	FAILED,
 }
 
-export { GestureActivationState as GestureOffsetState };
-
 export type GestureActivationArea = ActivationArea | SideActivation;
 
 /**
@@ -107,6 +105,14 @@ export type GestureValues = {
 	 * The live normalized vertical translation of the gesture (-1 to 1).
 	 */
 	normY: number;
+	/**
+	 * A 0-1 scalar derived from the pan velocity magnitude, normalized against
+	 * a screen-relative full-flick threshold.
+	 *
+	 * This is live while dragging, frozen at release during dismiss animations,
+	 * and reset to 0 while idle or settling from a cancelled gesture.
+	 */
+	velocity: number;
 	/**
 	 * The live pinch scale after `gestureSensitivity` is applied.
 	 */

package/src/shared/types/index.ts

@@ -4,13 +4,9 @@ export type {
 	AnimationConfig,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
-	ScreenTransitionAccessor,
-	ScreenTransitionDepthTarget,
 	ScreenTransitionOptions,
 	ScreenTransitionState,
-	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
-	TransitionInterpolatorConfig,
 	TransitionInterpolatorOptions,
 	TransitionSlotStyle,
 	TransitionSpec,
@@ -19,6 +15,7 @@ export type {
 	BoundsAccessor,
 	BoundsMethod,
 	BoundsNavigationAccessor,
+	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,
 	BoundsNavigationZoomOpacityRange,
 	BoundsNavigationZoomOpacityRanges,

package/src/shared/types/screen.types.ts

@@ -27,13 +27,6 @@ export type ScreenLayouts = {
 	 * auto snap-point sizing. It is undefined until a real measurement exists.
 	 */
 	content?: Layout;
-	/**
-	 * Whether navigation bounds masking is enabled for this screen.
-	 *
-	 * When enabled, navigation zoom helpers target the masked container path
-	 * instead of the plain content slot.
-	 */
-	navigationMaskEnabled: boolean;
 };
 
 export type ScreenKey = string;
@@ -206,15 +199,12 @@ export type ScreenTransitionConfig = {
 	gestureReleaseVelocityScale?: number;
 
 	/**
-	 * Caps the absolute post-scale release velocity used by spring animations.
+	 * Deprecated compatibility option.
 	 *
-	 * This does NOT affect dismissal threshold decisions (`gestureVelocityImpact`)
-	 * or snap target selection (`snapVelocityImpact`). It only bounds release
-	 * animation intensity after `gestureReleaseVelocityScale` is applied.
+	 * This option is no longer read by the runtime transition options. Use
+	 * `gestureReleaseVelocityScale` to tune post-release spring energy.
 	 *
-	 * @deprecated v3 compatibility only. This option is removed in the next
-	 * gesture runtime.
-	 * @default 3.2
+	 * @deprecated v3 compatibility only.
 	 */
 	gestureReleaseVelocityMax?: number;
 

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

@@ -58,6 +58,7 @@ const createBoundsAccessorParts = ({
 		const computed = prepareBoundStyles({
 			props,
 			options,
+			syncGroupActiveId: true,
 		});
 		const scopedTag = tag ?? "";
 		const target = Object.isExtensible(computed) ? computed : { ...computed };

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

@@ -1,5 +1,5 @@
 import { getEntry } from "../../../stores/bounds/internals/entries";
-import { resolveGroupLink } from "../../../stores/bounds/internals/groups";
+import { getResolvedLink } from "../../../stores/bounds/internals/links";
 import type {
 	MeasuredEntry,
 	ResolvedTransitionPair,
@@ -12,6 +12,7 @@ import type {
 } from "../../../types/bounds.types";
 import type { BoundId, BoundsOptionsResult } from "../types/options";
 import { prepareBoundStyles } from "./prepare-bound-styles";
+import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
@@ -52,11 +53,10 @@ export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
-		const screenKey = props.current?.route.key;
-		const resolved = resolveGroupLink({
-			tag: stringTag,
-			screenKey,
-		});
+		const pairKey = resolveBoundsPairKey(props);
+		const resolved = pairKey
+			? getResolvedLink(pairKey, stringTag)
+			: { tag: stringTag, link: null };
 		const selectedTag = resolved.tag;
 		const link = resolved.link;
 

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

@@ -1,8 +1,5 @@
 import { getEntry } from "../../../stores/bounds/internals/entries";
-import {
-	getGroupActiveId,
-	setGroupActiveId,
-} from "../../../stores/bounds/internals/groups";
+import { setActiveGroupId } from "../../../stores/bounds/internals/links";
 import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
 import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
@@ -12,6 +9,7 @@ import type {
 	BoundsOptionsResult,
 } from "../types/options";
 import { createBoundTag } from "./create-bound-tag";
+import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 import { computeBoundStyles } from "./styles/compute";
 
 type BaseInterpolatorProps = BoundsInterpolationProps;
@@ -57,25 +55,36 @@ const buildBoundsOptions = ({
 	return resolved;
 };
 
-const syncGroupActiveMember = (group?: string, id?: BoundId) => {
+const syncActiveGroupId = (params: {
+	props: BoundsInterpolationProps;
+	id?: BoundId;
+	group?: string;
+}) => {
 	"worklet";
-	if (!group || id == null || id === "") return;
-
-	const normalizedId = String(id);
+	const { props, id, group } = params;
+	if (id == null || id === "" || !group) return;
 
-	if (getGroupActiveId(group) === normalizedId) return;
+	const pairKey = resolveBoundsPairKey(props);
+	if (!pairKey) return;
 
-	setGroupActiveId(group, normalizedId);
+	setActiveGroupId(pairKey, group, String(id));
 };
 
 export const prepareBoundStyles = <T extends BoundsOptions>({
 	props,
 	options,
 	resolvedPair,
+	syncGroupActiveId = false,
 }: ComputeResolvedBoundsStylesParams<T>): BoundsOptionsResult<T> => {
 	"worklet";
 
-	syncGroupActiveMember(options.group, options.id);
+	if (syncGroupActiveId) {
+		syncActiveGroupId({
+			props,
+			id: options.id,
+			group: options.group,
+		});
+	}
 
 	const resolved = buildBoundsOptions({
 		props,

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

@@ -0,0 +1,22 @@
+import { createScreenPairKey } from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type { ScreenPairKey } from "../../../stores/bounds/types";
+import type { BoundsInterpolationProps } from "../../../types/bounds.types";
+
+export const resolveBoundsPairKey = (
+	props: BoundsInterpolationProps,
+): ScreenPairKey | null => {
+	"worklet";
+	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);
+	}
+
+	if (previousScreenKey && currentScreenKey) {
+		return createScreenPairKey(previousScreenKey, currentScreenKey);
+	}
+
+	return null;
+};

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

@@ -1,6 +1,7 @@
 import type {
 	BoundsAccessor,
 	BoundsInterpolationProps,
+	BoundsNavigationRevealOptions,
 	BoundsNavigationZoomOptions,
 } from "../../types/bounds.types";
 import { createBoundsAccessorCore } from "./helpers/create-bounds-accessor-core";
@@ -26,11 +27,12 @@ export const createBoundsAccessor = (
 							zoomOptions,
 						});
 					},
-					reveal: () => {
+					reveal: (revealOptions?: BoundsNavigationRevealOptions) => {
 						"worklet";
 						return buildRevealStyles({
 							props,
 							tag,
+							revealOptions,
 						});
 					},
 				},