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

package/src/shared/providers/screen/options/helpers.ts

@@ -1,7 +1,7 @@
 import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
-	DEFAULT_GESTURE_DRIVES_PROGRESS,
+	DEFAULT_GESTURE_PROGRESS_MODE,
 	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 	DEFAULT_GESTURE_SENSITIVITY,
 	DEFAULT_GESTURE_SNAP_LOCKED,
@@ -17,6 +17,11 @@ import type {
 	TransitionInterpolatedStyle,
 } from "../../../types";
 import type { BackdropBehavior } from "../../../types/screen.types";
+import {
+	gestureProgressModeDrivesProgress,
+	isGestureProgressMode,
+	resolveGestureProgressMode,
+} from "../../../utils/gesture-progress-mode";
 import { resolveSheetScrollGestureBehavior } from "../../../utils/resolve-screen-transition-options";
 import type {
 	RequiredScreenOption,
@@ -134,73 +139,173 @@ const resolveBackdropBehaviorOption = (
 		: fallback;
 };
 
+const resolveGestureProgressModeOption = (
+	gestureProgressMode: unknown,
+	gestureDrivesProgress: unknown,
+	fallback: RequiredScreenOption<"gestureProgressMode">,
+): RequiredScreenOption<"gestureProgressMode"> => {
+	"worklet";
+	if (isGestureProgressMode(gestureProgressMode)) {
+		return gestureProgressMode;
+	}
+
+	return resolveGestureProgressMode({
+		gestureDrivesProgress:
+			typeof gestureDrivesProgress === "boolean"
+				? gestureDrivesProgress
+				: undefined,
+		fallback,
+	});
+};
+
+const areGestureActivationAreasEqual = (
+	left: RequiredScreenOption<"gestureActivationArea">,
+	right: RequiredScreenOption<"gestureActivationArea">,
+) => {
+	"worklet";
+	if (left === right) return true;
+
+	if (
+		typeof left !== "object" ||
+		left === null ||
+		typeof right !== "object" ||
+		right === null
+	) {
+		return false;
+	}
+
+	return (
+		left.left === right.left &&
+		left.right === right.right &&
+		left.top === right.top &&
+		left.bottom === right.bottom
+	);
+};
+
+const areGestureDirectionsEqual = (
+	left: RequiredScreenOption<"gestureDirection">,
+	right: RequiredScreenOption<"gestureDirection">,
+) => {
+	"worklet";
+	if (left === right) return true;
+	if (!Array.isArray(left) || !Array.isArray(right)) return false;
+	if (left.length !== right.length) return false;
+
+	for (let i = 0; i < left.length; i++) {
+		if (left[i] !== right[i]) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+const areScreenOptionsEqual = (
+	left: ScreenOptionsState,
+	right: ScreenOptionsState,
+) => {
+	"worklet";
+	return (
+		left.gestureEnabled === right.gestureEnabled &&
+		left.experimental_allowDisabledGestureTracking ===
+			right.experimental_allowDisabledGestureTracking &&
+		areGestureDirectionsEqual(left.gestureDirection, right.gestureDirection) &&
+		left.gestureSensitivity === right.gestureSensitivity &&
+		left.gestureVelocityImpact === right.gestureVelocityImpact &&
+		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
+		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
+		left.gestureResponseDistance === right.gestureResponseDistance &&
+		left.gestureProgressMode === right.gestureProgressMode &&
+		left.gestureDrivesProgress === right.gestureDrivesProgress &&
+		areGestureActivationAreasEqual(
+			left.gestureActivationArea,
+			right.gestureActivationArea,
+		) &&
+		left.gestureSnapLocked === right.gestureSnapLocked &&
+		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
+		left.backdropBehavior === right.backdropBehavior &&
+		left.baseOptions === right.baseOptions
+	);
+};
+
 export const resolveBaseScreenOptions = (
 	options: ScreenTransitionOptions,
-): ScreenOptionsSnapshot => ({
-	gestureEnabled: resolveBooleanOption(options.gestureEnabled, undefined),
-	experimental_allowDisabledGestureTracking: resolveBooleanOption(
-		options.experimental_allowDisabledGestureTracking,
-		false,
-	),
-	gestureDirection: resolveGestureDirectionOption(
-		options.gestureDirection,
-		DEFAULT_GESTURE_DIRECTION,
-	),
-	gestureSensitivity: resolveNumberOption(
-		options.gestureSensitivity,
-		DEFAULT_GESTURE_SENSITIVITY,
-	),
-	gestureVelocityImpact: resolveNumberOption(
-		options.gestureVelocityImpact,
-		DEFAULT_GESTURE_VELOCITY_IMPACT,
-	),
-	gestureSnapVelocityImpact: resolveNumberOption(
-		options.gestureSnapVelocityImpact,
-		DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
-	),
-	gestureReleaseVelocityScale: resolveNumberOption(
-		options.gestureReleaseVelocityScale,
-		DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
-	),
-	gestureResponseDistance: resolveNumberOption(
-		options.gestureResponseDistance,
-		undefined,
-	),
-	gestureDrivesProgress: resolveBooleanOption(
+): ScreenOptionsSnapshot => {
+	const gestureProgressMode = resolveGestureProgressModeOption(
+		options.gestureProgressMode,
 		options.gestureDrivesProgress,
-		DEFAULT_GESTURE_DRIVES_PROGRESS,
-	),
-	gestureActivationArea: resolveGestureActivationAreaOption(
-		options.gestureActivationArea,
-		DEFAULT_GESTURE_ACTIVATION_AREA,
-	),
-	gestureSnapLocked: resolveBooleanOption(
-		options.gestureSnapLocked,
-		DEFAULT_GESTURE_SNAP_LOCKED,
-	),
-	sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
-		resolveSheetScrollGestureBehavior(options),
-		DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
-	),
-	backdropBehavior: resolveBackdropBehaviorOption(
-		options.backdropBehavior,
-		undefined,
-	),
-});
+		DEFAULT_GESTURE_PROGRESS_MODE,
+	);
+
+	return {
+		gestureEnabled: resolveBooleanOption(options.gestureEnabled, undefined),
+		experimental_allowDisabledGestureTracking: resolveBooleanOption(
+			options.experimental_allowDisabledGestureTracking,
+			false,
+		),
+		gestureDirection: resolveGestureDirectionOption(
+			options.gestureDirection,
+			DEFAULT_GESTURE_DIRECTION,
+		),
+		gestureSensitivity: resolveNumberOption(
+			options.gestureSensitivity,
+			DEFAULT_GESTURE_SENSITIVITY,
+		),
+		gestureVelocityImpact: resolveNumberOption(
+			options.gestureVelocityImpact,
+			DEFAULT_GESTURE_VELOCITY_IMPACT,
+		),
+		gestureSnapVelocityImpact: resolveNumberOption(
+			options.gestureSnapVelocityImpact,
+			DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
+		),
+		gestureReleaseVelocityScale: resolveNumberOption(
+			options.gestureReleaseVelocityScale,
+			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
+		),
+		gestureResponseDistance: resolveNumberOption(
+			options.gestureResponseDistance,
+			undefined,
+		),
+		gestureProgressMode,
+		gestureDrivesProgress:
+			gestureProgressModeDrivesProgress(gestureProgressMode),
+		gestureActivationArea: resolveGestureActivationAreaOption(
+			options.gestureActivationArea,
+			DEFAULT_GESTURE_ACTIVATION_AREA,
+		),
+		gestureSnapLocked: resolveBooleanOption(
+			options.gestureSnapLocked,
+			DEFAULT_GESTURE_SNAP_LOCKED,
+		),
+		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
+			resolveSheetScrollGestureBehavior(options),
+			DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+		),
+		backdropBehavior: resolveBackdropBehaviorOption(
+			options.backdropBehavior,
+			undefined,
+		),
+	};
+};
 
 export const syncScreenOptionsBase = (
 	screenOptions: ScreenOptionsContextValue,
 	base: ScreenOptionsSnapshot,
 ) => {
 	"worklet";
-	screenOptions.set({
+	const next = {
 		...base,
 		gestureDirection: cloneGestureDirection(base.gestureDirection),
 		gestureActivationArea: cloneGestureActivationArea(
 			base.gestureActivationArea,
 		),
 		baseOptions: base,
-	});
+	};
+
+	if (!areScreenOptionsEqual(screenOptions.get(), next)) {
+		screenOptions.set(next);
+	}
 };
 
 export const syncScreenOptionsOverrides = (
@@ -210,6 +315,11 @@ export const syncScreenOptionsOverrides = (
 	"worklet";
 	const options = raw?.options;
 	const base = screenOptions.get().baseOptions;
+	const gestureProgressMode = resolveGestureProgressModeOption(
+		options?.gestureProgressMode,
+		options?.gestureDrivesProgress,
+		base.gestureProgressMode,
+	);
 
 	const next: ScreenOptionsState = {
 		gestureEnabled: resolveBooleanOption(
@@ -244,10 +354,9 @@ export const syncScreenOptionsOverrides = (
 			options?.gestureResponseDistance,
 			base.gestureResponseDistance,
 		),
-		gestureDrivesProgress: resolveBooleanOption(
-			options?.gestureDrivesProgress,
-			base.gestureDrivesProgress,
-		),
+		gestureProgressMode,
+		gestureDrivesProgress:
+			gestureProgressModeDrivesProgress(gestureProgressMode),
 		gestureActivationArea: resolveGestureActivationAreaOption(
 			options?.gestureActivationArea,
 			base.gestureActivationArea,
@@ -267,5 +376,7 @@ export const syncScreenOptionsOverrides = (
 		baseOptions: base,
 	};
 
-	screenOptions.set(next);
+	if (!areScreenOptionsEqual(screenOptions.get(), next)) {
+		screenOptions.set(next);
+	}
 };

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

@@ -17,6 +17,7 @@ export type ScreenOptionsSnapshot = {
 	gestureSnapVelocityImpact: RequiredScreenOption<"gestureSnapVelocityImpact">;
 	gestureReleaseVelocityScale: RequiredScreenOption<"gestureReleaseVelocityScale">;
 	gestureResponseDistance: OptionalScreenOption<"gestureResponseDistance">;
+	gestureProgressMode: RequiredScreenOption<"gestureProgressMode">;
 	gestureDrivesProgress: RequiredScreenOption<"gestureDrivesProgress">;
 	gestureActivationArea: RequiredScreenOption<"gestureActivationArea">;
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;

package/src/shared/providers/screen/styles/helpers/preserve-animated-props-only.ts

@@ -0,0 +1,22 @@
+import { NO_STYLES } from "../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+
+export const preserveAnimatedPropsOnly = (
+	stylesMap: NormalizedTransitionInterpolatedStyle,
+): NormalizedTransitionInterpolatedStyle => {
+	"worklet";
+	let hasProps = false;
+	const propsOnly: NormalizedTransitionInterpolatedStyle = {};
+
+	for (const slotId in stylesMap) {
+		const slot = stylesMap[slotId];
+		if (!slot || slot.props === undefined) {
+			continue;
+		}
+
+		propsOnly[slotId] = { props: slot.props };
+		hasProps = true;
+	}
+
+	return hasProps ? propsOnly : NO_STYLES;
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -149,6 +149,160 @@ const writeResolvedSlotOutput = ({
 	context.resolvedStylesMap[slotId] = resolvedSlot;
 };
 
+const areTransformItemsEqual = (left: unknown, right: unknown): boolean => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (
+		typeof left !== "object" ||
+		left === null ||
+		typeof right !== "object" ||
+		right === null
+	) {
+		return false;
+	}
+
+	const leftObject = left as Record<string, unknown>;
+	const rightObject = right as Record<string, unknown>;
+
+	for (const key in leftObject) {
+		if (leftObject[key] !== rightObject[key]) {
+			return false;
+		}
+	}
+
+	for (const key in rightObject) {
+		if (!(key in leftObject)) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+const areTransformArraysEqual = (left: unknown, right: unknown): boolean => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (!Array.isArray(left) || !Array.isArray(right)) {
+		return false;
+	}
+
+	if (left.length !== right.length) {
+		return false;
+	}
+
+	for (let i = 0; i < left.length; i++) {
+		if (!areTransformItemsEqual(left[i], right[i])) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+const areFlatObjectsEqual = (left: unknown, right: unknown): boolean => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (
+		typeof left !== "object" ||
+		left === null ||
+		typeof right !== "object" ||
+		right === null ||
+		Array.isArray(left) ||
+		Array.isArray(right)
+	) {
+		return false;
+	}
+
+	const leftObject = left as Record<string, unknown>;
+	const rightObject = right as Record<string, unknown>;
+
+	for (const key in leftObject) {
+		const leftValue = leftObject[key];
+		const rightValue = rightObject[key];
+
+		if (key === "transform") {
+			if (!areTransformArraysEqual(leftValue, rightValue)) {
+				return false;
+			}
+			continue;
+		}
+
+		if (!areTransformItemsEqual(leftValue, rightValue)) {
+			return false;
+		}
+	}
+
+	for (const key in rightObject) {
+		if (!(key in leftObject)) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+const areSlotsEqual = (
+	left: NormalizedTransitionSlotStyle | undefined,
+	right: NormalizedTransitionSlotStyle | undefined,
+) => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (!left || !right) {
+		return false;
+	}
+
+	return (
+		areFlatObjectsEqual(left.style, right.style) &&
+		areFlatObjectsEqual(left.props, right.props)
+	);
+};
+
+export const reuseEqualResolvedSlots = ({
+	resolvedStylesMap,
+	previousResolvedStylesMap,
+}: {
+	resolvedStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousResolvedStylesMap: NormalizedTransitionInterpolatedStyle;
+}): NormalizedTransitionInterpolatedStyle => {
+	"worklet";
+	let changed = false;
+	const stableStylesMap: NormalizedTransitionInterpolatedStyle = {};
+
+	for (const slotId in resolvedStylesMap) {
+		const nextSlot = resolvedStylesMap[slotId];
+		const previousSlot = previousResolvedStylesMap[slotId];
+
+		if (areSlotsEqual(nextSlot, previousSlot)) {
+			stableStylesMap[slotId] = previousSlot;
+			continue;
+		}
+
+		changed = true;
+		stableStylesMap[slotId] = nextSlot;
+	}
+
+	for (const slotId in previousResolvedStylesMap) {
+		if (!(slotId in resolvedStylesMap)) {
+			changed = true;
+			break;
+		}
+	}
+
+	return changed ? stableStylesMap : previousResolvedStylesMap;
+};
+
 const appendResolvedSlot = (
 	context: ResolveSlotStylesContext,
 	slotId: string,

package/src/shared/providers/screen/styles/helpers/visibility-gate.ts

@@ -0,0 +1,57 @@
+import { LifecycleTransitionRequestKind } from "../../../../stores/system.store";
+
+type ScreenVisibilityGateState = {
+	isFloatingOverlay?: boolean;
+	hasVisibilityGateOpened: boolean;
+	pendingLifecycleStartBlockCount: number;
+	pendingLifecycleRequestKind: LifecycleTransitionRequestKind;
+	progress: number;
+	entering: number;
+};
+
+type ScreenVisibilityGateDecision = {
+	shouldBlock: boolean;
+	shouldOpenGate: boolean;
+};
+
+export const resolveScreenVisibilityGate = ({
+	isFloatingOverlay,
+	hasVisibilityGateOpened,
+	pendingLifecycleStartBlockCount,
+	pendingLifecycleRequestKind,
+	progress,
+	entering,
+}: ScreenVisibilityGateState): ScreenVisibilityGateDecision => {
+	"worklet";
+	if (isFloatingOverlay || hasVisibilityGateOpened) {
+		return {
+			shouldBlock: false,
+			shouldOpenGate: false,
+		};
+	}
+
+	const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount > 0;
+	const isPendingOpen =
+		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
+	const isOpening = isPendingOpen || !!entering;
+
+	// Keep the screen hidden until the first transformed opening frame exists.
+	// The lifecycle request is cleared before the RAF-scheduled progress
+	// animation starts, so `entering` carries the gate through that one-frame gap.
+	const isWaitingForOpenToStart = progress <= 0;
+
+	const shouldBlock =
+		(hasPendingLifecycleBlock || isWaitingForOpenToStart) && isOpening;
+
+	return {
+		shouldBlock,
+		shouldOpenGate: !shouldBlock && progress > 0,
+	};
+};
+
+export const shouldBlockScreenVisibility = (
+	state: ScreenVisibilityGateState,
+) => {
+	"worklet";
+	return resolveScreenVisibilityGate(state).shouldBlock;
+};

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -7,12 +7,16 @@ import type {
 } from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
+import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
+import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
+import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
 	useScreenOptionsContext,
 } from "../../options";
 import { normalizeSlots } from "../helpers/normalize-slots";
+import { preserveAnimatedPropsOnly } from "../helpers/preserve-animated-props-only";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
 
 /**
@@ -31,10 +35,10 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
  * normal interpolator selection once the gesture-driven close is no longer in
  * play.
  *
- * The hook also suppresses interpolated styles while lifecycle start is blocked
- * for pending destination measurement. That keeps the opening screen visually
- * neutral until the system has a usable viewport measurement, then allows the
- * interpolator to take over once the blocker clears.
+ * Visibility gating happens downstream while lifecycle start is blocked for
+ * pending destination measurement. We still run the interpolator during that
+ * hidden window so animated props and runtime options stay warm, but defer style
+ * buckets so measurement sees the final untransformed layout.
  *
  * The result stays as a single slot map. Resolution happens downstream, where
  * slot ids determine whether a slot may inherit from ancestors or must remain
@@ -45,12 +49,13 @@ export const useInterpolatedStylesMap = () => {
 	const screenOptions = useScreenOptionsContext();
 	const {
 		screenInterpolatorProps,
-		screenInterpolatorFrameUpdater,
+		screenInterpolatorPropsRevision,
+		selectedInterpolatorOptions,
 		nextInterpolator,
 		currentInterpolator,
-		boundsAccessor,
 	} = useScreenAnimationContext();
-
+	const boundsAccessor = useBuildBoundsAccessor();
+	const transition = useBuildTransitionAccessor();
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
@@ -60,13 +65,22 @@ export const useInterpolatedStylesMap = () => {
 
 	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
 		"worklet";
-		if (pendingLifecycleStartBlockCount.get() > 0) {
-			syncScreenOptionsOverrides(undefined, screenOptions);
-			return NO_STYLES;
-		}
-
-		screenInterpolatorFrameUpdater.get();
+		screenInterpolatorPropsRevision.get();
 		const props = screenInterpolatorProps.get();
+
+		/**
+		 * There is a niche case where bounds can be attached to a view that's styles are out of viewport.
+		 * Due to our blocking mechanism and ensuring accurate measurement, this boundary measurement
+		 * will be blocked and the screen will never be visible. To mitigate this, we:
+		 *
+		 * - Defer the style buckets (props are fine), to ensure we get the correct position of the boundary
+		 *
+		 * Again this is very niche, and since we're not marketing ourselves as a proper shared element transition
+		 * package, we won't spend time finding a better solution for this.
+		 *
+		 */
+		const shouldDeferStyleBuckets = pendingLifecycleStartBlockCount.get() > 0;
+
 		const { current, next, progress } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
@@ -85,11 +99,15 @@ export const useInterpolatedStylesMap = () => {
 		const isInGestureMode =
 			!!isDragging || isGesturingDuringCloseAnimation.get();
 
-		const interpolator = isInGestureMode
-			? currentInterpolator
-			: (nextInterpolator ?? currentInterpolator);
+		const interpolatorOptionsOwner =
+			isInGestureMode || !nextInterpolator ? "current" : "next";
+		const interpolator =
+			interpolatorOptionsOwner === "current"
+				? currentInterpolator
+				: nextInterpolator;
 
 		if (!interpolator) {
+			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
 			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}
@@ -108,23 +126,35 @@ export const useInterpolatedStylesMap = () => {
 				progress: effectiveProgress,
 				next: effectiveNext,
 				bounds: boundsAccessor,
+				transition,
 			});
 
 			const rawStyleMap: TransitionInterpolatedStyle | undefined =
 				typeof raw === "object" && raw != null ? raw : undefined;
 
-			syncScreenOptionsOverrides(rawStyleMap, screenOptions);
+			syncSelectedInterpolatorOptions(
+				selectedInterpolatorOptions,
+				interpolatorOptionsOwner,
+				rawStyleMap?.options,
+			);
+			syncScreenOptionsOverrides(
+				interpolatorOptionsOwner === "current" ? rawStyleMap : undefined,
+				screenOptions,
+			);
 
 			const stylesMap = !rawStyleMap
 				? NO_STYLES
 				: normalizeSlots(stripInterpolatorOptions(rawStyleMap));
 
-			return stylesMap;
+			return shouldDeferStyleBuckets
+				? preserveAnimatedPropsOnly(stylesMap)
+				: stylesMap;
 		} catch (_) {
 			if (__DEV__) {
 				logger.warn("screenStyleInterpolator must be a worklet");
 			}
 
+			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
 			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}