react-native-screen-transitions 2.3.3 → 2.4.0

package/src/stores/gestures.ts

@@ -1,4 +1,5 @@
 import { makeMutable, type SharedValue } from "react-native-reanimated";
+import type { GestureDirection } from "../types/gesture";
 import type { ScreenKey } from "../types/navigator";
 
 export type GestureKey =
@@ -16,6 +17,7 @@ export type GestureMap = {
 	normalizedY: SharedValue<number>;
 	isDismissing: SharedValue<number>;
 	isDragging: SharedValue<number>;
+	direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
 };
 
 const store: Record<ScreenKey, GestureMap> = {};
@@ -30,6 +32,9 @@ function ensure(routeKey: ScreenKey): GestureMap {
 			normalizedY: makeMutable(0),
 			isDismissing: makeMutable(0),
 			isDragging: makeMutable(0),
+			direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
+				null,
+			),
 		};
 		store[routeKey] = bag;
 	}

package/src/types/animation.ts

@@ -18,10 +18,11 @@ export type ScreenTransitionState = {
 };
 
 export interface ScreenInterpolationProps {
-	/** Values for the screen that is the focus of the transition (e.g., the one opening). */
+	/** Values for the screen that came before the current one in the navigation stack. */
 	previous: ScreenTransitionState | undefined;
+	/** Values for the current screen being interpolated. */
 	current: ScreenTransitionState;
-	/** Values for the screen immediately behind the current one in the screen. */
+	/** Values for the screen that comes after the current one in the navigation stack. */
 	next: ScreenTransitionState | undefined;
 	/** Layout measurements for the screen. */
 	layouts: {
@@ -33,19 +34,19 @@ export interface ScreenInterpolationProps {
 	};
 	/** The safe area insets for the screen. */
 	insets: EdgeInsets;
-	/** The id of the active bound. */
+	/** The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a'). */
 	activeBoundId: string;
-	/** Whether the screen is focused. */
+	/** Whether the current screen is the focused (topmost) screen in the stack. */
 	focused: boolean;
-	/** The progress of the screen transitions (0-2). */
+	/** Combined progress of current and next screen transitions, ranging from 0-2. */
 	progress: number;
-	/** A function that returns a bounds builder for the screen. */
+	/** Function that provides access to bounds builders for creating shared element transitions. */
 	bounds: BoundsAccessor;
-	/** The active screen between current and next. */
+	/** The screen state that is currently driving the transition (either current or next, whichever is focused). */
 	active: ScreenTransitionState;
-	/** Whether the active screen is transitioning. */
+	/** Whether the active screen is currently transitioning (either being dragged or animating). */
 	isActiveTransitioning: boolean;
-	/** Whether the active screen is dismissing. */
+	/** Whether the active screen is in the process of being dismissed/closed. */
 	isDismissing: boolean;
 }
 

package/src/types/gesture.ts

@@ -49,4 +49,8 @@ export type GestureValues = {
 	 * A flag indicating if the screen is in the process of dismissing.
 	 */
 	isDismissing: number;
+	/**
+	 * The initial direction that activated the gesture.
+	 */
+	direction: Omit<GestureDirection, "bidirectional"> | null;
 };

package/src/utils/bounds/_utils/styles.ts

@@ -0,0 +1,68 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { isSharedValue } from "react-native-reanimated";
+
+type AnyStyle = ViewStyle | TextStyle | ImageStyle;
+type StyleValue = StyleProp<AnyStyle>;
+type PlainStyleObject = Record<string, any>;
+
+function mergeStyleArrays<T extends StyleValue>(style: T): T {
+	"worklet";
+
+	// Early returns for non-objects
+	if (style === null || style === undefined || typeof style !== "object") {
+		return style;
+	}
+
+	// If not an array, return as-is
+	if (!Array.isArray(style)) {
+		return style;
+	}
+
+	// Merge array of styles into single object
+	const merged: PlainStyleObject = {};
+	for (let i = 0; i < style.length; i++) {
+		const currentStyle = mergeStyleArrays(style[i] as StyleValue);
+		if (currentStyle && typeof currentStyle === "object") {
+			Object.assign(merged, currentStyle);
+		}
+	}
+	return merged as T;
+}
+
+function stripNonSerializable<T>(value: T): T | undefined {
+	if (isSharedValue(value)) return value;
+
+	if (Array.isArray(value)) {
+		return value.map(stripNonSerializable) as T;
+	}
+
+	if (value && typeof value === "object") {
+		const cleaned: PlainStyleObject = {};
+		for (const key in value) {
+			if (key === "current") continue;
+
+			const cleanedValue = stripNonSerializable(value[key]);
+			if (cleanedValue !== undefined) {
+				cleaned[key] = cleanedValue;
+			}
+		}
+		return cleaned as T;
+	}
+
+	if (typeof value === "function") {
+		return undefined;
+	}
+
+	return value;
+}
+
+export function prepareStyleForBounds(
+	style: StyleValue | undefined,
+): PlainStyleObject {
+	if (!style) return {};
+
+	const flattened = mergeStyleArrays(style);
+	const serializable = stripNonSerializable(flattened);
+
+	return serializable || {};
+}

package/src/utils/gesture/reset-gesture-values.ts

@@ -38,11 +38,29 @@ export const resetGestureValues = ({
 	const vxTowardZero = velocity.calculateRestoreVelocity(nx, vxNorm);
 	const vyTowardZero = velocity.calculateRestoreVelocity(ny, vyNorm);
 
-	gestures.x.value = animate(0, { ...spec, velocity: vxTowardZero });
-	gestures.y.value = animate(0, { ...spec, velocity: vyTowardZero });
+	let remainingAnimations = 4;
 
-	gestures.normalizedX.value = animate(0, { ...spec, velocity: vxTowardZero });
-	gestures.normalizedY.value = animate(0, { ...spec, velocity: vyTowardZero });
+	const onFinish = (finished: boolean | undefined) => {
+		"worklet";
+		if (!finished) return;
+		remainingAnimations -= 1;
+		if (remainingAnimations === 0) {
+			gestures.direction.value = null;
+		}
+	};
+
+	gestures.x.value = animate(0, { ...spec, velocity: vxTowardZero }, onFinish);
+	gestures.y.value = animate(0, { ...spec, velocity: vyTowardZero }, onFinish);
+	gestures.normalizedX.value = animate(
+		0,
+		{ ...spec, velocity: vxTowardZero },
+		onFinish,
+	);
+	gestures.normalizedY.value = animate(
+		0,
+		{ ...spec, velocity: vyTowardZero },
+		onFinish,
+	);
 	gestures.isDragging.value = 0;
 	gestures.isDismissing.value = Number(shouldDismiss);
 };