Merge pull request #46360 from bernhardoj/fix/46063-page-blink-when-categorizing-expense

Fix page blinks after selecting a category during categorization

Author: roryabraham

src/libs/Navigation/Navigation.ts

@@ -266,6 +266,25 @@ 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 +415,7 @@ export default {
     isActiveRoute,
     getActiveRoute,
     getActiveRouteWithoutParams,
+    closeAndNavigate,
     goBack,
     isNavigationReady,
     setIsNavigationReady,

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;
         }