From 283dc1e051269adc35fcc9a0719f5d873968124d Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 20 Sep 2024 13:01:55 +0200
Subject: [PATCH] Clean up code, reduce diff for easier reviewing

---
 .../src/navigator/navigator-screen/component.tsx           | 7 +++----
 .../navigator-screen/use-screen-animate-presence.ts        | 5 ++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 53c26be9c58098..f2d2c26e576c27 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -40,12 +40,8 @@ function UnconnectedNavigatorScreen(
 		);
 	}
 
-	// Generate a unique ID for the screen.
 	const screenId = useId();
 
-	const wrapperRef = useRef< HTMLDivElement >( null );
-	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
-
 	const {
 		children,
 		className,
@@ -59,6 +55,7 @@ function UnconnectedNavigatorScreen(
 	const { isInitial, isBack, focusTargetSelector, skipFocus } = location;
 
 	const isMatch = match === screenId;
+	const wrapperRef = useRef< HTMLDivElement >( null );
 	const skipAnimationAndFocusRestoration = !! isInitial && ! isBack;
 
 	// Register / unregister screen with the navigator context.
@@ -142,6 +139,8 @@ function UnconnectedNavigatorScreen(
 		skipFocus,
 	] );
 
+	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
+
 	return shouldRenderScreen ? (
 		<View
 			ref={ mergedWrapperRef }
diff --git a/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
index 8bc33da6bf5608..af5a47ee12df4c 100644
--- a/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
+++ b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
@@ -58,7 +58,6 @@ export function useScreenAnimatePresence( {
 	skipAnimation: boolean;
 	isBack?: boolean;
 	onAnimationEnd?: React.AnimationEventHandler< Element >;
-	screenEl?: HTMLElement | null;
 } ) {
 	const isRTL = isRTLFn();
 	const prefersReducedMotion = useReducedMotion();
@@ -67,8 +66,8 @@ export function useScreenAnimatePresence( {
 		useState< AnimationStatus >( 'INITIAL' );
 
 	// Start enter and exit animations when the screen is selected or deselected.
-	// The animation status is set to `*_END` immediately if the animation should
-	// be skipped.
+	// The animation status is set to `IN` or `OUT` immediately if the animation
+	// should be skipped.
 	const becameSelected =
 		animationStatus !== 'ANIMATING_IN' &&
 		animationStatus !== 'IN' &&