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

package/src/providers/keys.tsx

@@ -1,38 +1,50 @@
 import { createContext, useContext, useMemo } from "react";
-import type { NativeStackDescriptor } from "../types/navigator";
-
-interface KeysContextType {
-	previous?: NativeStackDescriptor;
-	current: NativeStackDescriptor;
-	next?: NativeStackDescriptor;
-}
-
-const KeysContext = createContext<KeysContextType | undefined>(undefined);
-
-interface KeysProviderProps {
-	children: React.ReactNode;
-	previous?: NativeStackDescriptor;
-	current: NativeStackDescriptor;
-	next?: NativeStackDescriptor;
-}
-
-export const KeysProvider = ({
-	children,
-	previous,
-	current,
-	next,
-}: KeysProviderProps) => {
-	const value = useMemo(
-		() => ({ previous, current, next }),
-		[previous, current, next],
-	);
-	return <KeysContext.Provider value={value}>{children}</KeysContext.Provider>;
+import type { Descriptor } from "@react-navigation/native";
+import type { NativeStackDescriptor } from "../types/native-stack.navigator";
+
+type AnyDescriptor = Descriptor<any, any, any>;
+
+type KeysContextValue = {
+  previous?: AnyDescriptor;
+  current: AnyDescriptor;
+  next?: AnyDescriptor;
+};
+
+type KeysProviderProps<DescriptorType extends AnyDescriptor> = {
+  children: React.ReactNode;
+  previous?: DescriptorType;
+  current: DescriptorType;
+  next?: DescriptorType;
+};
+
+type KeysContextType<DescriptorType extends AnyDescriptor> = {
+  previous?: DescriptorType;
+  current: DescriptorType;
+  next?: DescriptorType;
+};
+
+const KeysContext = createContext<KeysContextValue | undefined>(undefined);
+
+export const KeysProvider = <DescriptorType extends AnyDescriptor>({
+  children,
+  previous,
+  current,
+  next,
+}: KeysProviderProps<DescriptorType>) => {
+  const value = useMemo(
+    () => ({ previous, current, next }),
+    [previous, current, next]
+  ) as KeysContextValue;
+
+  return <KeysContext.Provider value={value}>{children}</KeysContext.Provider>;
 };
 
-export const useKeys = (): KeysContextType => {
-	const context = useContext(KeysContext);
-	if (context === undefined) {
-		throw new Error("useKeys must be used within a KeysProvider");
-	}
-	return context;
+export const useKeys = <
+  DescriptorType extends AnyDescriptor = NativeStackDescriptor
+>(): KeysContextType<DescriptorType> => {
+  const context = useContext(KeysContext);
+  if (context === undefined) {
+    throw new Error("useKeys must be used within a KeysProvider");
+  }
+  return context as KeysContextType<DescriptorType>;
 };

package/src/providers/transition-styles.tsx

@@ -1,8 +1,9 @@
 import { createContext, useContext, useMemo } from "react";
-import { isWorkletFunction, useDerivedValue } from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../constants";
 import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
 import type { TransitionInterpolatedStyle } from "../types/animation";
+import { createBounds } from "../utils/bounds";
 
 type Props = {
 	children: React.ReactNode;
@@ -18,21 +19,33 @@ export function TransitionStylesProvider({ children }: Props) {
 	const { screenInterpolatorProps, screenStyleInterpolator } =
 		_useScreenAnimation();
 
-	const isFunctionWorklet = isWorkletFunction(screenStyleInterpolator);
-
 	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
 		"worklet";
 
-		if (screenStyleInterpolator && !isFunctionWorklet && __DEV__) {
-			console.warn(
-				`[react-native-screen-transitions] screenStyleInterpolator is not a worklet function`,
-			);
+		/**
+		 * ### Maintainer note
+		 *
+		 * From my understanding, reanimated will serialize the DerivedValue result. Thus resulting in us receiving a `bounds is not a function, it is an object` error. We'll build the bounds function inside here (the final step) and pass it alongside the interpolator instead.
+		 */
+		const props = screenInterpolatorProps.value;
+
+		const bounds = createBounds(props);
+		try {
+			if (!screenStyleInterpolator) return NO_STYLES;
+
+			return screenStyleInterpolator({
+				...props,
+				bounds,
+			});
+		} catch (err) {
+			if (__DEV__) {
+				console.warn(
+					"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
+					err,
+				);
+			}
 			return NO_STYLES;
 		}
-
-		return screenStyleInterpolator
-			? screenStyleInterpolator(screenInterpolatorProps.value)
-			: NO_STYLES;
 	});
 
 	const value = useMemo(() => {

package/src/stores/animations.ts

@@ -1,45 +1,45 @@
 import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { ScreenKey } from "../types/navigator";
+import type { ScreenKey } from "../types/native-stack.navigator";
 
 export type AnimationMap = {
-	progress: SharedValue<number>;
-	closing: SharedValue<number>;
-	animating: SharedValue<number>;
+  progress: SharedValue<number>;
+  closing: SharedValue<number>;
+  animating: SharedValue<number>;
 };
 
 const store: Record<ScreenKey, AnimationMap> = {};
 
 const ensure = (key: ScreenKey) => {
-	let bag = store[key];
-	if (!bag) {
-		bag = {
-			progress: makeMutable(0),
-			closing: makeMutable(0),
-			animating: makeMutable(0),
-		};
-		store[key] = bag;
-	}
-	return bag;
+  let bag = store[key];
+  if (!bag) {
+    bag = {
+      progress: makeMutable(0),
+      closing: makeMutable(0),
+      animating: makeMutable(0),
+    };
+    store[key] = bag;
+  }
+  return bag;
 };
 
 export function getAnimation(
-	key: ScreenKey,
-	type: "progress" | "closing" | "animating",
+  key: ScreenKey,
+  type: "progress" | "closing" | "animating"
 ): SharedValue<number> {
-	return ensure(key)[type];
+  return ensure(key)[type];
 }
 
 export function getAll(key: ScreenKey) {
-	return ensure(key);
+  return ensure(key);
 }
 
 function clear(routeKey: ScreenKey) {
-	"worklet";
-	delete store[routeKey];
+  "worklet";
+  delete store[routeKey];
 }
 
 export const Animations = {
-	getAnimation,
-	clear,
-	getAll,
+  getAnimation,
+  clear,
+  getAll,
 };

package/src/stores/bounds/index.ts

@@ -1,16 +1,16 @@
 import {
-	type MeasuredDimensions,
-	makeMutable,
-	type StyleProps,
+  type MeasuredDimensions,
+  makeMutable,
+  type StyleProps,
 } from "react-native-reanimated";
 import type { ScreenTransitionState } from "../../types/animation";
-import type { ScreenKey } from "../../types/navigator";
+import type { ScreenKey } from "../../types/native-stack.navigator";
 import type { Any } from "../../types/utils";
 import { pairKey, resolveActiveBound } from "./_utils";
 
 type BoundsDict = Record<
-	string,
-	Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
+  string,
+  Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
 >;
 
 const registry = makeMutable<BoundsDict>({});
@@ -18,108 +18,108 @@ const pairCache = makeMutable<Record<string, string>>({});
 const lastActiveByRoute = makeMutable<Record<string, string>>({});
 
 function setBounds(
-	screenId: string,
-	boundId: string,
-	bounds: MeasuredDimensions | null = null,
-	styles: StyleProps = {},
+  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 };
+  "worklet";
+  registry.modify((state: Any) => {
+    "worklet";
+    if (!state[screenId]) {
+      state[screenId] = {};
+    }
+    state[screenId][boundId] = { bounds, styles };
 
-		return state;
-	});
+    return state;
+  });
 }
 
 function getBounds(screenId: string) {
-	"worklet";
-	return registry.value[screenId] ?? {};
+  "worklet";
+  return registry.value[screenId] ?? {};
 }
 
 function setRouteActive(routeKey: string, boundId: string) {
-	"worklet";
-	lastActiveByRoute.modify((state: Any) => {
-		"worklet";
-		state[routeKey] = boundId;
-		return state;
-	});
+  "worklet";
+  lastActiveByRoute.modify((state: Any) => {
+    "worklet";
+    state[routeKey] = boundId;
+    return state;
+  });
 }
 
 function getRouteActive(routeKey: string) {
-	"worklet";
-	return lastActiveByRoute.value[routeKey] ?? null;
+  "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;
-	});
+  "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;
+  "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;
-	});
+  "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;
-	});
+  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,
+  current: ScreenTransitionState,
+  next: ScreenTransitionState | undefined,
+  previous: ScreenTransitionState | undefined
 ) {
-	"worklet";
-	return resolveActiveBound({
-		current,
-		next,
-		previous,
-		getPairCache,
-		setPairCache,
-		getRouteActive,
-	});
+  "worklet";
+  return resolveActiveBound({
+    current,
+    next,
+    previous,
+    getPairCache,
+    setPairCache,
+    getRouteActive,
+  });
 }
 
 export const Bounds = {
-	setBounds,
-	getBounds,
-	setRouteActive,
-	getRouteActive,
-	clear,
-	getActiveBound,
+  setBounds,
+  getBounds,
+  setRouteActive,
+  getRouteActive,
+  clear,
+  getActiveBound,
 };

package/src/stores/gestures.ts

@@ -1,60 +1,60 @@
 import { makeMutable, type SharedValue } from "react-native-reanimated";
 import type { GestureDirection } from "../types/gesture";
-import type { ScreenKey } from "../types/navigator";
+import type { ScreenKey } from "../types/native-stack.navigator";
 
 export type GestureKey =
-	| "x"
-	| "y"
-	| "normalizedX"
-	| "normalizedY"
-	| "isDismissing"
-	| "isDragging";
+  | "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>;
+  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;
+  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];
+  return ensure(routeKey)[gestureKey];
 }
 
 function getRouteGestures(routeKey: ScreenKey) {
-	return ensure(routeKey);
+  return ensure(routeKey);
 }
 
 function clear(routeKey: ScreenKey) {
-	delete store[routeKey];
+  delete store[routeKey];
 }
 
 export const Gestures = {
-	getGesture,
-	getRouteGestures,
-	clear,
+  getGesture,
+  getRouteGestures,
+  clear,
 };

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

@@ -1,4 +1,4 @@
-import type { NativeStackDescriptor } from "../../types/navigator";
+import type { NativeStackDescriptor } from "../../types/native-stack.navigator";
 import { Animations } from "../animations";
 import { Bounds } from "../bounds";
 import { Gestures } from "../gestures";
@@ -7,7 +7,7 @@ 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);
+  Animations.clear(current.route.key);
+  Gestures.clear(current.route.key);
+  Bounds.clear(current.route.key);
 };

package/src/types/animation.ts

@@ -7,6 +7,7 @@ import type {
 import type { EdgeInsets } from "react-native-safe-area-context";
 import type { BoundEntry, BoundsAccessor } from "./bounds";
 import type { GestureValues } from "./gesture";
+import type { Layout } from "./native-stack.navigator";
 
 export type ScreenTransitionState = {
 	progress: number;
@@ -27,10 +28,7 @@ export interface ScreenInterpolationProps {
 	/** Layout measurements for the screen. */
 	layouts: {
 		/** The `width` and `height` of the screen container. */
-		screen: {
-			width: number;
-			height: number;
-		};
+		screen: Layout;
 	};
 	/** The safe area insets for the screen. */
 	insets: EdgeInsets;