react-native-screen-transitions 2.0.6 → 2.2.0

package/src/hooks/animation/use-screen-animation.tsx

@@ -1,4 +1,5 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -12,7 +13,7 @@ import type {
 } from "../../types/animation";
 import type { BoundEntry } from "../../types/bounds";
 import type { NativeStackDescriptor } from "../../types/navigator";
-import { buildBoundsAccessor } from "../../utils/bounds";
+import { derivations } from "../../utils/animation/derivations";
 
 type BuiltState = {
 	progress: SharedValue<number>;
@@ -22,7 +23,9 @@ type BuiltState = {
 	route: RouteProp<ParamListBase>;
 };
 
-const FALLBACK = Object.freeze({
+const EMPTY_BOUNDS = Object.freeze({}) as Record<string, BoundEntry>;
+
+const FALLBACK: ScreenTransitionState = Object.freeze({
 	progress: 0,
 	closing: 0,
 	animating: 0,
@@ -38,62 +41,64 @@ const FALLBACK = Object.freeze({
 	route: {} as RouteProp<ParamListBase>,
 });
 
-const useBuildScreenTransitionState = (
-	descriptor: NativeStackDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route.key;
-	if (!key) return undefined;
-	const progress = Animations.getAnimation(key, "progress");
-	const closing = Animations.getAnimation(key, "closing");
-	const animating = Animations.getAnimation(key, "animating");
-	const gesture = Gestures.getRouteGestures(key);
-	const route = descriptor?.route;
-
-	return { progress, closing, animating, gesture, route };
-};
-
 const unwrap = (
 	s: BuiltState | undefined,
 	key: string | undefined,
 ): ScreenTransitionState | undefined => {
 	"worklet";
-	return s && key
-		? {
-				progress: s.progress.value ?? 0,
-				closing: s.closing.value ?? 0,
-				animating: s.animating.value ?? 0,
-				gesture: {
-					x: s.gesture.x.value ?? 0,
-					y: s.gesture.y.value ?? 0,
-					normalizedX: s.gesture.normalizedX.value ?? 0,
-					normalizedY: s.gesture.normalizedY.value ?? 0,
-					isDismissing: s.gesture.isDismissing.value ?? 0,
-					isDragging: s.gesture.isDragging.value ?? 0,
-				},
-				bounds: Bounds.getBounds(key) ?? {},
-				route: s.route,
-			}
-		: undefined;
+	if (!s || !key) return undefined;
+
+	return {
+		progress: s.progress.value,
+		closing: s.closing.value,
+		animating: s.animating.value,
+		gesture: {
+			x: s.gesture.x.value,
+			y: s.gesture.y.value,
+			normalizedX: s.gesture.normalizedX.value,
+			normalizedY: s.gesture.normalizedY.value,
+			isDismissing: s.gesture.isDismissing.value,
+			isDragging: s.gesture.isDragging.value,
+		},
+		bounds: Bounds.getBounds(key) || EMPTY_BOUNDS,
+		route: s.route,
+	};
+};
+
+const useBuildScreenTransitionState = (
+	descriptor: NativeStackDescriptor | undefined,
+): BuiltState | undefined => {
+	const key = descriptor?.route.key;
+
+	return useMemo(() => {
+		if (!key) return undefined;
+
+		return {
+			progress: Animations.getAnimation(key, "progress"),
+			closing: Animations.getAnimation(key, "closing"),
+			animating: Animations.getAnimation(key, "animating"),
+			gesture: Gestures.getRouteGestures(key),
+			route: descriptor.route,
+		};
+	}, [key, descriptor?.route]);
 };
 
 export function _useScreenAnimation() {
+	const dimensions = useWindowDimensions();
+	const insets = useSafeAreaInsets();
+
 	const {
 		current: currentDescriptor,
 		next: nextDescriptor,
 		previous: previousDescriptor,
 	} = useKeys();
 
-	const dimensions = useWindowDimensions();
-
 	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
-
 	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
 	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
 
-	const insets = useSafeAreaInsets();
-
 	const screenInterpolatorProps = useDerivedValue<ScreenInterpolationProps>(
-		() => {
+		(): ScreenInterpolationProps => {
 			"worklet";
 
 			const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
@@ -101,17 +106,10 @@ export function _useScreenAnimation() {
 			const current =
 				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
 
-			const progress = current.progress + (next?.progress ?? 0);
-
-			const focused = !next;
-			const activeBoundId = Bounds.getActiveBoundId() || "";
-
-			const bounds = buildBoundsAccessor({
-				activeBoundId,
+			const { progress, focused, activeBoundId, bounds } = derivations({
 				current,
-				previous,
 				next,
-				progress,
+				previous,
 				dimensions,
 			});
 
@@ -125,7 +123,7 @@ export function _useScreenAnimation() {
 				activeBoundId,
 				progress,
 				bounds,
-			} satisfies ScreenInterpolationProps;
+			};
 		},
 	);
 
@@ -135,6 +133,7 @@ export function _useScreenAnimation() {
 
 	return { screenInterpolatorProps, screenStyleInterpolator };
 }
+
 export function useScreenAnimation() {
 	const { screenInterpolatorProps } = _useScreenAnimation();
 

package/src/hooks/bounds/{use-bound-measurer.tsx → use-bound-registry.tsx}

@@ -8,7 +8,8 @@ import {
 } from "react-native-reanimated";
 import { useKeys } from "../../providers/keys";
 import { Bounds } from "../../stores/bounds";
-import { flattenStyle } from "../../utils/bounds/flatten-styles";
+import { flattenStyle } from "../../utils/bounds/_utils/flatten-styles";
+import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
 import { useScreenAnimation } from "../animation/use-screen-animation";
 
 interface BoundMeasurerHookProps {
@@ -18,7 +19,7 @@ interface BoundMeasurerHookProps {
 	style: StyleProps;
 }
 
-export const useBoundMeasurer = ({
+export const useBoundsRegistry = ({
 	sharedBoundTag,
 	animatedRef,
 	current,
@@ -26,46 +27,49 @@ export const useBoundMeasurer = ({
 }: BoundMeasurerHookProps) => {
 	const { previous } = useKeys();
 	const interpolatorProps = useScreenAnimation();
-	const hasAlreadyMeasured = useSharedValue(false);
+	const isMeasured = useSharedValue(false);
 
-	const measureAndSet = useCallback(() => {
+	const measureBounds = useCallback(() => {
 		"worklet";
 		if (!sharedBoundTag) return;
 		const measured = measure(animatedRef);
 		if (measured) {
-			Bounds.setBounds(
-				current.route.key,
-				sharedBoundTag,
-				measured,
-				flattenStyle(style),
-			);
+			const key = current.route.key;
+			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
+				Bounds.setRouteActive(key, sharedBoundTag);
+				return;
+			}
+
+			Bounds.setBounds(key, sharedBoundTag, measured, flattenStyle(style));
+			Bounds.setRouteActive(key, sharedBoundTag);
 		}
 	}, [sharedBoundTag, animatedRef, current.route.key, style]);
 
-	const measureOnLayout = useCallback(() => {
+	const handleLayout = useCallback(() => {
 		"worklet";
-		if (!sharedBoundTag || hasAlreadyMeasured.value) return;
-
 		const previousRouteKey = previous?.route.key;
-		if (!previousRouteKey) return;
+
+		if (!sharedBoundTag || isMeasured.value || !previousRouteKey) {
+			return;
+		}
 
 		const previousBounds = Bounds.getBounds(previousRouteKey);
 		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
 
 		if (interpolatorProps.value.current.animating && hasPreviousBoundForTag) {
-			measureAndSet();
-			hasAlreadyMeasured.value = true;
+			measureBounds();
+			isMeasured.value = true;
 		}
 	}, [
-		measureAndSet,
+		measureBounds,
 		interpolatorProps,
 		sharedBoundTag,
 		previous?.route.key,
-		hasAlreadyMeasured,
+		isMeasured,
 	]);
 
 	return {
-		measureAndSet,
-		measureOnLayout,
+		measureBounds,
+		handleLayout,
 	};
 };