Fix no close animation of 2fa validate screen

src/hooks/useBeforeRemove.tsx

@@ -0,0 +1,13 @@
+import {useNavigation} from '@react-navigation/native';
+import {useEffect} from 'react';
+
+const useBeforeRemove = (onBeforeRemove: () => void) => {
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('beforeRemove', onBeforeRemove);
+        return unsubscribe;
+    }, [navigation, onBeforeRemove]);
+};
+
+export default useBeforeRemove;

src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

@@ -12,6 +12,7 @@ import {useSession} from '@components/OnyxProvider';
 import ReimbursementAccountLoadingIndicator from '@components/ReimbursementAccountLoadingIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -267,6 +268,8 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps
         BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep, policyIDParam);
     }
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         if (isPreviousPolicy) {
             return;

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

@@ -15,6 +15,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useTheme from '@hooks/useTheme';
@@ -147,6 +148,8 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
         Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
     }, [prevValidatedDate, loginData?.validatedDate, isDefaultContactMethod, backTo, loginData]);
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         setIsValidateCodeActionModalVisible(!loginData?.validatedDate);
     }, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]);

src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

@@ -13,6 +13,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -64,6 +65,8 @@ function NewContactMethodPage({route}: NewContactMethodPageProps) {
         [pendingContactAction?.contactMethod],
     );
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         if (!pendingContactAction?.actionVerified) {
             return;

src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

@@ -7,6 +7,7 @@ import {FallbackAvatar} from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -37,6 +38,8 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
     const formattedLogin = formatPhoneNumber(login ?? '');
     const displayName = personalDetails?.displayName ?? formattedLogin;
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     const submitButton = (
         <Button
             success

src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

@@ -13,6 +13,7 @@ import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
@@ -56,9 +57,12 @@ function CodesStep({backTo}: CodesStepProps) {
     const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
     const hasMagicCodeBeenSent = !!validateCodeAction?.validateCodeSent;
 
+    const [isValidateModalVisible, setIsValidateModalVisible] = useState(!isUserValidated);
+
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
+        setIsValidateModalVisible(!isUserValidated);
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (account?.requiresTwoFactorAuth || account?.recoveryCodes || !isUserValidated) {
             return;
@@ -67,6 +71,8 @@ function CodesStep({backTo}: CodesStepProps) {
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We want to run this when component mounts
     }, [isUserValidated]);
 
+    useBeforeRemove(() => setIsValidateModalVisible(false));
+
     return (
         <StepWrapper
             title={translate('twoFactorAuth.headerTitle')}
@@ -173,15 +179,18 @@ function CodesStep({backTo}: CodesStepProps) {
                     title={translate('contacts.validateAccount')}
                     descriptionPrimary={translate('contacts.featureRequiresValidate')}
                     descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
-                    isVisible={!isUserValidated}
+                    isVisible={isValidateModalVisible}
                     hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                     validatePendingAction={loginData?.pendingFields?.validateCodeSent}
                     sendValidateCode={() => User.requestValidateCodeAction()}
                     handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode, true)}
                     validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
                     clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
                     onModalHide={() => {}}
-                    onClose={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
+                    onClose={() => {
+                        setIsValidateModalVisible(false);
+                        TwoFactorAuthActions.quitAndNavigateBack(backTo);
+                    }}
                 />
             </ScrollView>
         </StepWrapper>

src/pages/settings/Wallet/Card/BaseGetPhysicalCard.tsx

@@ -7,6 +7,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
@@ -105,6 +106,8 @@ function BaseGetPhysicalCard({
     const [currentCardID, setCurrentCardID] = useState<string | undefined>(cardToBeIssued?.cardID.toString());
     const errorMessage = ErrorUtils.getLatestErrorMessageField(cardToBeIssued);
 
+    useBeforeRemove(() => setActionCodeModalVisible(false));
+
     useEffect(() => {
         if (isRouteSet.current || !privatePersonalDetails || !cardList) {
             return;

src/pages/settings/Wallet/ExpensifyCardPage.tsx

@@ -13,6 +13,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -84,6 +85,9 @@ function ExpensifyCardPage({
         }
         return [cardList?.[cardID]];
     }, [shouldDisplayCardDomain, cardList, cardID, domain]);
+
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         setIsNotFound(!cardsToShow);
     }, [cardList, cardsToShow]);

src/pages/settings/Wallet/ReportCardLostPage.tsx

@@ -9,6 +9,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SingleOptionSelector from '@components/SingleOptionSelector';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
@@ -83,6 +84,8 @@ function ReportCardLostPage({
     const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails ?? {});
     const primaryLogin = account?.primaryLogin ?? '';
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         if (!isEmptyObject(physicalCard?.errors) || !(prevIsLoading && !formData?.isLoading)) {
             return;

src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx

@@ -7,6 +7,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -45,6 +46,8 @@ function ReportVirtualCardFraudPage({
 
     const prevIsLoading = usePrevious(formData?.isLoading);
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         if (!prevIsLoading || formData?.isLoading) {
             return;

src/pages/settings/Wallet/VerifyAccountPage.tsx

@@ -5,6 +5,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -31,6 +32,8 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) {
 
     const navigateBackTo = route?.params?.backTo;
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []);
 
     const handleSubmitForm = useCallback(

src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx

@@ -7,6 +7,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -46,6 +47,8 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
 
     const submitButton = useRef<View>(null);
 
+    useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
+
     useEffect(() => {
         submitButton.current?.focus();
     }, []);