react-native-screen-transitions 2.0.2 → 2.0.4

package/src/stores/bounds.ts

@@ -0,0 +1,71 @@
+import {
+	type MeasuredDimensions,
+	makeMutable,
+	type StyleProps,
+} from "react-native-reanimated";
+import type { ScreenKey } from "../types/navigator";
+import type { Any } from "../types/utils";
+
+type BoundsDict = Record<
+	string,
+	Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
+>;
+
+const registry = makeMutable<BoundsDict>({});
+const activeBoundId = makeMutable<string | null>(null);
+
+function setBounds(
+	screenId: string,
+	boundId: string,
+	bounds: MeasuredDimensions | null = null,
+	styles: StyleProps = {},
+) {
+	"worklet";
+	registry.modify((state: Any) => {
+		"worklet";
+		if (!state[screenId]) {
+			state[screenId] = {};
+		}
+		state[screenId][boundId] = { bounds, styles };
+
+		return state;
+	});
+}
+
+function getBounds(screenId: string) {
+	"worklet";
+	return registry.value[screenId] ?? {};
+}
+
+function setActiveBoundId(boundId: string) {
+	"worklet";
+	activeBoundId.value = boundId;
+}
+
+function getActiveBoundId() {
+	"worklet";
+	return activeBoundId.value;
+}
+
+function clear(routeKey: ScreenKey) {
+	"worklet";
+	registry.modify((state: Any) => {
+		"worklet";
+		delete state[routeKey];
+		return state;
+	});
+}
+
+function clearActive() {
+	"worklet";
+	activeBoundId.value = null;
+}
+
+export const Bounds = {
+	setBounds,
+	getBounds,
+	setActiveBoundId,
+	getActiveBoundId,
+	clear,
+	clearActive,
+};

package/src/stores/gestures.ts

@@ -0,0 +1,55 @@
+import { makeMutable, type SharedValue } from "react-native-reanimated";
+import type { ScreenKey } from "../types/navigator";
+
+export type GestureKey =
+	| "x"
+	| "y"
+	| "normalizedX"
+	| "normalizedY"
+	| "isDismissing"
+	| "isDragging";
+
+export type GestureMap = {
+	x: SharedValue<number>;
+	y: SharedValue<number>;
+	normalizedX: SharedValue<number>;
+	normalizedY: SharedValue<number>;
+	isDismissing: SharedValue<number>;
+	isDragging: SharedValue<number>;
+};
+
+const store: Record<ScreenKey, GestureMap> = {};
+
+function ensure(routeKey: ScreenKey): GestureMap {
+	let bag = store[routeKey];
+	if (!bag) {
+		bag = {
+			x: makeMutable(0),
+			y: makeMutable(0),
+			normalizedX: makeMutable(0),
+			normalizedY: makeMutable(0),
+			isDismissing: makeMutable(0),
+			isDragging: makeMutable(0),
+		};
+		store[routeKey] = bag;
+	}
+	return bag;
+}
+
+function getGesture(routeKey: ScreenKey, gestureKey: GestureKey) {
+	return ensure(routeKey)[gestureKey];
+}
+
+function getRouteGestures(routeKey: ScreenKey) {
+	return ensure(routeKey);
+}
+
+function clear(routeKey: ScreenKey) {
+	delete store[routeKey];
+}
+
+export const Gestures = {
+	getGesture,
+	getRouteGestures,
+	clear,
+};

package/src/stores/navigator-dismiss-state.ts

@@ -0,0 +1,17 @@
+const map = new Map<string, boolean>();
+
+export const NavigatorDismissState = {
+	get(id: string | undefined): boolean {
+		if (!id) return false;
+		return map.get(id) === true;
+	},
+	set(id: string, val: boolean) {
+		map.set(id, !!val);
+	},
+	remove(id: string) {
+		map.delete(id);
+	},
+	clear() {
+		map.clear();
+	},
+};

package/src/stores/utils/reset-stores-for-screen.ts

@@ -0,0 +1,14 @@
+import type { NativeStackDescriptor } from "../../types/navigator";
+import { Animations } from "../animations";
+import { Bounds } from "../bounds";
+import { Gestures } from "../gestures";
+
+/**
+ * Reset all stores for a given screen
+ */
+export const resetStoresForScreen = (current: NativeStackDescriptor) => {
+	Animations.clear(current.route.key);
+	Gestures.clear(current.route.key);
+	Bounds.clear(current.route.key);
+	Bounds.clearActive();
+};

package/src/types/animation.ts

@@ -0,0 +1,76 @@
+import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import type {
+	StyleProps,
+	WithSpringConfig,
+	WithTimingConfig,
+} from "react-native-reanimated";
+import type { EdgeInsets } from "react-native-safe-area-context";
+import type { BoundEntry, BoundsAccessor } from "./bounds";
+import type { GestureValues } from "./gesture";
+
+export type ScreenTransitionState = {
+	progress: number;
+	closing: number;
+	animating: number;
+	gesture: GestureValues;
+	bounds: Record<string, BoundEntry>;
+	route: RouteProp<ParamListBase>;
+};
+
+export interface ScreenInterpolationProps {
+	/** Values for the screen that is the focus of the transition (e.g., the one opening). */
+	previous: ScreenTransitionState | undefined;
+	current: ScreenTransitionState;
+	/** Values for the screen immediately behind the current one in the screen. */
+	next: ScreenTransitionState | undefined;
+	/** Layout measurements for the screen. */
+	layouts: {
+		/** The `width` and `height` of the screen container. */
+		screen: {
+			width: number;
+			height: number;
+		};
+	};
+	/** The safe area insets for the screen. */
+	insets: EdgeInsets;
+	/** The id of the active bound. */
+	activeBoundId: string;
+	/** Whether the screen is focused. */
+	focused: boolean;
+	/** The progress of the screen transitions (0-2). */
+	progress: number;
+	/** A function that returns a bounds builder for the screen. */
+	bounds: BoundsAccessor;
+}
+
+export type ScreenStyleInterpolator = (
+	props: ScreenInterpolationProps,
+) => TransitionInterpolatedStyle;
+
+export type TransitionInterpolatedStyle = {
+	/**
+	 * Animated style for the main screen view. Styles are only applied when Transition.View is present.
+	 */
+	contentStyle?: StyleProps;
+	/**
+	 * Animated style for a semi-transparent overlay. Styles are only applied when Transition.View is present.
+	 */
+	overlayStyle?: StyleProps;
+	/**
+	 * Define your own custom styles by using an id as the key: [id]: StyleProps
+	 */
+	[id: string]: StyleProps | undefined;
+};
+
+/**
+ * A Reanimated animation configuration object.
+ */
+export type AnimationConfig = WithSpringConfig | WithTimingConfig;
+
+/**
+ * Defines separate animation configurations for opening and closing a screen.
+ */
+export interface TransitionSpec {
+	open?: AnimationConfig;
+	close?: AnimationConfig;
+}

package/src/types/bounds.ts

@@ -0,0 +1,82 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { ScreenPhase } from "./core";
+
+/**
+ * Target style computation.
+ * - "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
+ */
+export type BoundsMethod = "transform" | "size" | "content";
+
+export type BoundsBuilder = {
+	/**
+	 * Include gesture offsets (x/y) in the computed transform for all methods.
+	 * This syncs the focused screen’s gesture deltas with the previous screen’s bound
+	 * to give the shared look while interacting.
+	 */
+	gestures: (options?: { x?: number; y?: number }) => BoundsBuilder;
+
+	/**
+	 * Animate to the full screen bounds as the destination.
+	 * Useful when the next screen does not define a bound for the same id.
+	 */
+	toFullscreen: () => BoundsBuilder;
+
+	/**
+	 * Compute using absolute window coordinates (pageX/pageY).
+	 * No relative delta math—good when elements are unconstrained by parent layout.
+	 */
+	absolute: () => BoundsBuilder;
+
+	/**
+	 * Compute using relative deltas between start/end bounds (dx/dy, scale).
+	 * This makes the math bound-relative; great when elements are within layout constraints.
+	 */
+	relative: () => BoundsBuilder;
+
+	/**
+	 * Select transform method: translate + scaleX/scaleY (no width/height size).
+	 * Note: x/y translation is applied for all methods when applicable.
+	 */
+	transform: () => BoundsBuilder;
+
+	/**
+	 * Select size method: translate + width/height interpolation (no scaleX/scaleY).
+	 */
+	size: () => BoundsBuilder;
+
+	/**
+	 * Select content method: screen-level transform to align destination content
+	 * so its bound matches the source at progress start. This modifies where the
+	 * bound sits within the screen rather than the bound’s own local transform.
+	 */
+	content: () => BoundsBuilder;
+
+	/**
+	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
+	 */
+	contentFill: () => BoundsBuilder;
+
+	/**
+	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
+	 */
+	contentFit: () => BoundsBuilder;
+
+	/**
+	 * Build the final animated style.
+	 * If a method is not explicitly selected via transform/resize/content,
+	 * the provided argument will be used; defaults to "transform".
+	 */
+	build: (method?: BoundsMethod) => StyleProps;
+};
+
+export type BoundEntry = {
+	bounds: MeasuredDimensions;
+	styles: StyleProps;
+};
+
+export type BoundsAccessor = ((id?: string) => BoundsBuilder) & {
+	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
+};

package/src/types/core.ts

@@ -0,0 +1,50 @@
+import type { AnimatedProps } from "react-native-reanimated";
+import type { TransitionSpec } from "./animation";
+
+export type ScreenPhase = "previous" | "current" | "next";
+
+export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
+	/**
+	 * Connects this component to custom animated styles defined in screenStyleInterpolator.
+	 *
+	 * When you return custom styles from your interpolator with a matching key,
+	 * those styles will be applied to this component during transitions.
+	 *
+	 * @example
+	 * // In your component:
+	 * <Transition.View styleId="hero-image">
+	 *   <Image source={...} />
+	 * </Transition.View>
+	 *
+	 * // In your screenStyleInterpolator:
+	 * return {
+	 *   'hero-image': {
+	 *     opacity: interpolate(progress, [0, 1], [0, 1]),
+	 *     transform: [{ scale: interpolate(progress, [0, 1], [0.8, 1]) }]
+	 *   }
+	 * }
+	 */
+	styleId?: string;
+
+	/**
+	 * Marks this component for measurement to enable shared element transitions.
+	 * Components with the same tag across different screens will animate between each other.
+	 *
+	 * @example
+	 * // Screen A:
+	 * <Transition.View sharedBoundTag="profile-avatar">
+	 *   <Avatar size="small" />
+	 * </Transition.View>
+	 *
+	 * // Screen B:
+	 * <Transition.View sharedBoundTag="profile-avatar">
+	 *   <Avatar size="large" />
+	 * </Transition.View>
+	 */
+	sharedBoundTag?: string;
+};
+
+export type TransitionConfig = {
+	open: TransitionSpec;
+	close: TransitionSpec;
+};

package/src/types/gesture.ts

@@ -0,0 +1,33 @@
+export type GestureDirection =
+	| "horizontal"
+	| "horizontal-inverted"
+	| "vertical"
+	| "vertical-inverted"
+	| "bidirectional";
+
+export type GestureValues = {
+	/**
+	 * A `SharedValue` indicating if the user's finger is on the screen (0 or 1).
+	 */
+	isDragging: number;
+	/**
+	 * The live horizontal translation of the gesture.
+	 */
+	x: number;
+	/**
+	 * The live vertical translation of the gesture.
+	 */
+	y: number;
+	/**
+	 * The live normalized horizontal translation of the gesture (-1 to 1).
+	 */
+	normalizedX: number;
+	/**
+	 * The live normalized vertical translation of the gesture (-1 to 1).
+	 */
+	normalizedY: number;
+	/**
+	 * A flag indicating if the screen is in the process of dismissing.
+	 */
+	isDismissing: number;
+};