From e8bec5038c6e14307009150e5a5c8ddda4267908 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 27 Jul 2024 21:49:29 +0800
Subject: [PATCH 1/2] fix page blink when closing and opening another RHP page

---
 src/libs/Navigation/Navigation.ts              | 18 ++++++++++++++++++
 .../request/step/IOURequestStepCategory.tsx    |  3 +--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index 10301e0a99b3..01ee171f5055 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -266,6 +266,23 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT
     navigationRef.current.goBack();
 }
 
+/**
+ * Close the current screen and navigate to the route.
+ * If the current screen is the first screen in the navigator, we force using the fallback route to replace the current screen.
+ * It's useful in a case where we want to close an RHP and navigate to another RHP to prevent any blink effect.
+ */
+function closeAndNavigate(route: Route) {
+    if (!navigationRef.current) return;
+
+    const isFirstRouteInNavigator = !getActiveRouteIndex(navigationRef.current.getState());
+    if (isFirstRouteInNavigator) {
+        goBack(route, true);
+        return;
+    }
+    goBack();
+    navigate(route);
+}
+
 /**
  * Reset the navigation state to Home page
  */
@@ -396,6 +413,7 @@ export default {
     isActiveRoute,
     getActiveRoute,
     getActiveRouteWithoutParams,
+    closeAndNavigate,
     goBack,
     isNavigationReady,
     setIsNavigationReady,
diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx
index a3b05e06f274..7130b8c86079 100644
--- a/src/pages/iou/request/step/IOURequestStepCategory.tsx
+++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx
@@ -145,8 +145,7 @@ function IOURequestStepCategory({
         IOU.setMoneyRequestCategory(transactionID, updatedCategory);
 
         if (action === CONST.IOU.ACTION.CATEGORIZE) {
-            Navigation.goBack();
-            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, report?.reportID ?? '-1'));
+            Navigation.closeAndNavigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, report?.reportID ?? '-1'));
             return;
         }
 

From 3ea0148c26fdf217df3165b1f24098193c5c9ce8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sun, 28 Jul 2024 14:54:52 +0800
Subject: [PATCH 2/2] lint

---
 src/libs/Navigation/Navigation.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index 01ee171f5055..4bd86503fd2b 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -272,7 +272,9 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT
  * It's useful in a case where we want to close an RHP and navigate to another RHP to prevent any blink effect.
  */
 function closeAndNavigate(route: Route) {
-    if (!navigationRef.current) return;
+    if (!navigationRef.current) {
+        return;
+    }
 
     const isFirstRouteInNavigator = !getActiveRouteIndex(navigationRef.current.getState());
     if (isFirstRouteInNavigator) {