react-native-screen-transitions 2.4.2 → 3.0.0-beta.1

package/src/stores/bounds/index.ts

@@ -1,125 +0,0 @@
-import {
-	type MeasuredDimensions,
-	makeMutable,
-	type StyleProps,
-} from "react-native-reanimated";
-import type { ScreenTransitionState } from "../../types/animation";
-import type { ScreenKey } from "../../types/navigator";
-import type { Any } from "../../types/utils";
-import { pairKey, resolveActiveBound } from "./_utils";
-
-type BoundsDict = Record<
-	string,
-	Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
->;
-
-const registry = makeMutable<BoundsDict>({});
-const pairCache = makeMutable<Record<string, string>>({});
-const lastActiveByRoute = makeMutable<Record<string, string>>({});
-
-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 setRouteActive(routeKey: string, boundId: string) {
-	"worklet";
-	lastActiveByRoute.modify((state: Any) => {
-		"worklet";
-		state[routeKey] = boundId;
-		return state;
-	});
-}
-
-function getRouteActive(routeKey: string) {
-	"worklet";
-	return lastActiveByRoute.value[routeKey] ?? null;
-}
-
-function setPairCache(fromKey: string, toKey: string, boundId: string) {
-	"worklet";
-	const key = pairKey(fromKey, toKey);
-	if (!key) return;
-	pairCache.modify((state: Any) => {
-		"worklet";
-		state[key] = boundId;
-		return state;
-	});
-}
-
-function getPairCache(fromKey: string, toKey: string) {
-	"worklet";
-	const key = pairKey(fromKey, toKey);
-	if (!key) return null;
-	return pairCache.value[key] ?? null;
-}
-
-function clear(routeKey: ScreenKey) {
-	"worklet";
-	registry.modify((state) => {
-		"worklet";
-		delete state[routeKey];
-		return state;
-	});
-	lastActiveByRoute.modify((state) => {
-		"worklet";
-		if (state[routeKey]) delete state[routeKey];
-		return state;
-	});
-
-	pairCache.modify((state) => {
-		"worklet";
-		const keys = Object.keys(state);
-		for (let i = 0; i < keys.length; i++) {
-			const k = keys[i];
-			const [from, to] = k.split("|");
-			if (from === routeKey || to === routeKey) {
-				delete state[k];
-			}
-		}
-		return state;
-	});
-}
-
-function getActiveBound(
-	current: ScreenTransitionState,
-	next: ScreenTransitionState | undefined,
-	previous: ScreenTransitionState | undefined,
-) {
-	"worklet";
-	return resolveActiveBound({
-		current,
-		next,
-		previous,
-		getPairCache,
-		setPairCache,
-		getRouteActive,
-	});
-}
-
-export const Bounds = {
-	setBounds,
-	getBounds,
-	setRouteActive,
-	getRouteActive,
-	clear,
-	getActiveBound,
-};

package/src/stores/gestures.ts

@@ -1,60 +0,0 @@
-import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { GestureDirection } from "../types/gesture";
-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>;
-	direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
-};
-
-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),
-			direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
-				null,
-			),
-		};
-		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/utils/reset-stores-for-screen.ts

@@ -1,13 +0,0 @@
-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);
-};

package/src/types/animation.ts

@@ -1,81 +0,0 @@
-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";
-import type { Layout } from "./navigator";
-
-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 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 that comes after the current one in the navigation stack. */
-	next: ScreenTransitionState | undefined;
-	/** Layout measurements for the screen. */
-	layouts: {
-		/** The `width` and `height` of the screen container. */
-		screen: Layout;
-	};
-	/** The safe area insets for the screen. */
-	insets: EdgeInsets;
-	/** The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a'). */
-	activeBoundId: string;
-	/** Whether the current screen is the focused (topmost) screen in the stack. */
-	focused: boolean;
-	/** Combined progress of current and next screen transitions, ranging from 0-2. */
-	progress: number;
-	/** Function that provides access to bounds builders for creating shared element transitions. */
-	bounds: BoundsAccessor;
-	/** The screen state that is currently driving the transition (either current or next, whichever is focused). */
-	active: ScreenTransitionState;
-	/** Whether the active screen is currently transitioning (either being dragged or animating). */
-	isActiveTransitioning: boolean;
-	/** Whether the active screen is in the process of being dismissed/closed. */
-	isDismissing: boolean;
-}
-
-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/core.ts

@@ -1,50 +0,0 @@
-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;
-};