Merge pull request #56865 from nkdengineer/fix/56796

[CP Staging] fix: FAB is not responsive after exiting create expense flow (cherry picked from commit d2c9a35) (CP triggered by mountiny)
Expensify · Feb 14, 2025 · 1db9cf9 · 1db9cf9
1 parent 3380adb
commit 1db9cf9
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 73 deletions.
diff --git a/src/libs/Navigation/navigateAfterInteraction/index.ios.ts b/src/libs/Navigation/navigateAfterInteraction/index.ios.ts
@@ -0,0 +1,14 @@
+import {InteractionManager} from 'react-native';
+import Navigation from '@libs/Navigation/Navigation';
+
+/**
+ * On iOS, the navigation transition can sometimes break other animations, such as the closing modal.
+ * In this case we need to wait for the animation to be complete before executing the navigation
+ */
+function navigateAfterInteraction(callback: () => void) {
+    InteractionManager.runAfterInteractions(() => {
+        Navigation.setNavigationActionToMicrotaskQueue(callback);
+    });
+}
+
+export default navigateAfterInteraction;
diff --git a/src/libs/Navigation/navigateAfterInteraction/index.ts b/src/libs/Navigation/navigateAfterInteraction/index.ts
@@ -0,0 +1,5 @@
+function navigateAfterInteraction(callback: () => void) {
+    callback();
+}
+
+export default navigateAfterInteraction;
diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -31,6 +31,7 @@ import {canActionTask as canActionTaskUtils, canModifyTask as canModifyTaskUtils
 import {setSelfTourViewed} from '@libs/actions/Welcome';
 import getIconForAction from '@libs/getIconForAction';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import navigateAfterInteraction from '@libs/Navigation/navigateAfterInteraction';
 import Navigation from '@libs/Navigation/Navigation';
 import {hasSeenTourSelector} from '@libs/onboardingSelectors';
 import {areAllGroupPoliciesExpenseChatDisabled, canSendInvoice as canSendInvoicePolicyUtils, shouldShowPolicy} from '@libs/PolicyUtils';
@@ -454,6 +455,80 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
     const canModifyTask = canModifyTaskUtils(viewTourTaskReport, currentUserPersonalDetails.accountID);
     const canActionTask = canActionTaskUtils(viewTourTaskReport, currentUserPersonalDetails.accountID);
 
+    const menuItems = [
+        ...expenseMenuItems,
+        {
+            icon: Expensicons.ChatBubble,
+            text: translate('sidebarScreen.fabNewChat'),
+            onSelected: () => interceptAnonymousUser(startNewChat),
+        },
+        ...(canSendInvoice
+            ? [
+                  {
+                      icon: Expensicons.InvoiceGeneric,
+                      text: translate('workspace.invoices.sendInvoice'),
+                      shouldCallAfterModalHide: shouldRedirectToExpensifyClassic,
+                      onSelected: () =>
+                          interceptAnonymousUser(() => {
+                              if (shouldRedirectToExpensifyClassic) {
+                                  setModalVisible(true);
+                                  return;
+                              }
+
+                              startMoneyRequest(
+                                  CONST.IOU.TYPE.INVOICE,
+                                  // When starting to create an invoice from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
+                                  // for all of the routes in the creation flow.
+                                  generateReportID(),
+                              );
+                          }),
+                  },
+              ]
+            : []),
+        ...(canUseSpotnanaTravel
+            ? [
+                  {
+                      icon: Expensicons.Suitcase,
+                      text: translate('travel.bookTravel'),
+                      onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)),
+                  },
+              ]
+            : []),
+        ...(!hasSeenTour
+            ? [
+                  {
+                      icon: Expensicons.Binoculars,
+                      iconStyles: styles.popoverIconCircle,
+                      iconFill: theme.icon,
+                      text: translate('tour.takeATwoMinuteTour'),
+                      description: translate('tour.exploreExpensify'),
+                      onSelected: () => {
+                          openExternalLink(navatticURL);
+                          setSelfTourViewed(isAnonymousUser());
+                          if (viewTourTaskReport && canModifyTask && canActionTask) {
+                              completeTask(viewTourTaskReport);
+                          }
+                      },
+                  },
+              ]
+            : []),
+        ...(!isLoading && shouldShowNewWorkspaceButton
+            ? [
+                  {
+                      displayInDefaultIconColor: true,
+                      contentFit: 'contain' as ImageContentFit,
+                      icon: Expensicons.NewWorkspace,
+                      iconWidth: variables.w46,
+                      iconHeight: variables.h40,
+                      text: translate('workspace.new.newWorkspace'),
+                      description: translate('workspace.new.getTheExpensifyCardAndMore'),
+                      onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute()))),
+                  },
+              ]
+            : []),
+        ...quickActionMenuItems,
+    ];
+
     return (
         <View style={styles.flexGrow1}>
             <PopoverMenu
@@ -462,79 +537,17 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
                 anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
                 onItemSelected={hideCreateMenu}
                 fromSidebarMediumScreen={!shouldUseNarrowLayout}
-                menuItems={[
-                    ...expenseMenuItems,
-                    {
-                        icon: Expensicons.ChatBubble,
-                        text: translate('sidebarScreen.fabNewChat'),
-                        onSelected: () => interceptAnonymousUser(startNewChat),
-                    },
-                    ...(canSendInvoice
-                        ? [
-                              {
-                                  icon: Expensicons.InvoiceGeneric,
-                                  text: translate('workspace.invoices.sendInvoice'),
-                                  shouldCallAfterModalHide: shouldRedirectToExpensifyClassic,
-                                  onSelected: () =>
-                                      interceptAnonymousUser(() => {
-                                          if (shouldRedirectToExpensifyClassic) {
-                                              setModalVisible(true);
-                                              return;
-                                          }
-
-                                          startMoneyRequest(
-                                              CONST.IOU.TYPE.INVOICE,
-                                              // When starting to create an invoice from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
-                                              // for all of the routes in the creation flow.
-                                              generateReportID(),
-                                          );
-                                      }),
-                              },
-                          ]
-                        : []),
-                    ...(canUseSpotnanaTravel
-                        ? [
-                              {
-                                  icon: Expensicons.Suitcase,
-                                  text: translate('travel.bookTravel'),
-                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)),
-                              },
-                          ]
-                        : []),
-                    ...(!hasSeenTour
-                        ? [
-                              {
-                                  icon: Expensicons.Binoculars,
-                                  iconStyles: styles.popoverIconCircle,
-                                  iconFill: theme.icon,
-                                  text: translate('tour.takeATwoMinuteTour'),
-                                  description: translate('tour.exploreExpensify'),
-                                  onSelected: () => {
-                                      openExternalLink(navatticURL);
-                                      setSelfTourViewed(isAnonymousUser());
-                                      if (viewTourTaskReport && canModifyTask && canActionTask) {
-                                          completeTask(viewTourTaskReport);
-                                      }
-                                  },
-                              },
-                          ]
-                        : []),
-                    ...(!isLoading && shouldShowNewWorkspaceButton
-                        ? [
-                              {
-                                  displayInDefaultIconColor: true,
-                                  contentFit: 'contain' as ImageContentFit,
-                                  icon: Expensicons.NewWorkspace,
-                                  iconWidth: variables.w46,
-                                  iconHeight: variables.h40,
-                                  text: translate('workspace.new.newWorkspace'),
-                                  description: translate('workspace.new.getTheExpensifyCardAndMore'),
-                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute()))),
-                              },
-                          ]
-                        : []),
-                    ...quickActionMenuItems,
-                ]}
+                menuItems={menuItems.map((item) => {
+                    return {
+                        ...item,
+                        onSelected: () => {
+                            if (!item.onSelected) {
+                                return;
+                            }
+                            navigateAfterInteraction(item.onSelected);
+                        },
+                    };
+                })}
                 withoutOverlay
                 anchorRef={fabRef}
             />