Fix: User navigates to many pages when quickly press them

src/components/MenuItem.tsx

@@ -1,7 +1,7 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import type {ImageContentFit} from 'expo-image';
 import type {ForwardedRef, ReactNode} from 'react';
-import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {AnimatedStyle} from 'react-native-reanimated';
@@ -29,6 +29,7 @@ import Hoverable from './Hoverable';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
+import {MenuItemGroupContext} from './MenuItemGroup';
 import MultipleAvatars from './MultipleAvatars';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
 import RenderHTML from './RenderHTML';
@@ -295,6 +296,7 @@ function MenuItem(
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
+    const {isExecuting, singleExecution, waitForNavigate} = useContext(MenuItemGroupContext) ?? {};
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
@@ -370,7 +372,11 @@ function MenuItem(
         }
 
         if (onPress && event) {
-            onPress(event);
+            if (!singleExecution || !waitForNavigate) {
+                onPress(event);
+                return;
+            }
+            singleExecution(waitForNavigate(() => onPress(event)))();
         }
     };
 
@@ -394,7 +400,7 @@ function MenuItem(
                             shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
                         ] as StyleProp<ViewStyle>
                     }
-                    disabled={disabled}
+                    disabled={disabled || isExecuting}
                     ref={ref}
                     role={CONST.ROLE.MENUITEM}
                     accessibilityLabel={title ? title.toString() : ''}

src/components/MenuItemGroup.tsx

@@ -0,0 +1,35 @@
+import React, {createContext, useMemo} from 'react';
+import useSingleExecution from '@hooks/useSingleExecution';
+import type {Action} from '@hooks/useSingleExecution';
+import useWaitForNavigation from '@hooks/useWaitForNavigation';
+
+type MenuItemGroupContextProps = {
+    isExecuting: boolean;
+    singleExecution: <T extends unknown[]>(action?: Action<T> | undefined) => (...params: T) => void;
+    waitForNavigate: ReturnType<typeof useWaitForNavigation>;
+};
+
+const MenuItemGroupContext = createContext<MenuItemGroupContextProps | undefined>(undefined);
+
+type MenuItemGroupProps = {
+    /* Actual content wrapped by this component */
+    children: React.ReactNode;
+
+    /** Whether or not to use the single execution hook */
+    shouldUseSingleExecution?: boolean;
+};
+
+function MenuItemGroup({children, shouldUseSingleExecution = true}: MenuItemGroupProps) {
+    const {isExecuting, singleExecution} = useSingleExecution();
+    const waitForNavigate = useWaitForNavigation();
+
+    const value = useMemo(
+        () => (shouldUseSingleExecution ? {isExecuting, singleExecution, waitForNavigate} : undefined),
+        [shouldUseSingleExecution, isExecuting, singleExecution, waitForNavigate],
+    );
+
+    return <MenuItemGroupContext.Provider value={value}>{children}</MenuItemGroupContext.Provider>;
+}
+
+export {MenuItemGroupContext};
+export default MenuItemGroup;

src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js

@@ -5,6 +5,7 @@ import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemGroup from '@components/MenuItemGroup';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -77,25 +78,27 @@ function PersonalDetailsInitialPage(props) {
                         <View style={[styles.ph5, styles.mb5]}>
                             <Text>{props.translate('privatePersonalDetails.privateDataMessage')}</Text>
                         </View>
-                        <MenuItemWithTopDescription
-                            title={legalName}
-                            description={props.translate('privatePersonalDetails.legalName')}
-                            shouldShowRightIcon
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME)}
-                        />
-                        <MenuItemWithTopDescription
-                            title={privateDetails.dob || ''}
-                            description={props.translate('common.dob')}
-                            shouldShowRightIcon
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH)}
-                            titleStyle={[styles.flex1]}
-                        />
-                        <MenuItemWithTopDescription
-                            title={PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails)}
-                            description={props.translate('privatePersonalDetails.address')}
-                            shouldShowRightIcon
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
-                        />
+                        <MenuItemGroup>
+                            <MenuItemWithTopDescription
+                                title={legalName}
+                                description={props.translate('privatePersonalDetails.legalName')}
+                                shouldShowRightIcon
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME)}
+                            />
+                            <MenuItemWithTopDescription
+                                title={privateDetails.dob || ''}
+                                description={props.translate('common.dob')}
+                                shouldShowRightIcon
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH)}
+                                titleStyle={[styles.flex1]}
+                            />
+                            <MenuItemWithTopDescription
+                                title={PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails)}
+                                description={props.translate('privatePersonalDetails.address')}
+                                shouldShowRightIcon
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
+                            />
+                        </MenuItemGroup>
                     </View>
                 </ScrollView>
             )}