Fix: Timer in login page restarts when switching tab

src/pages/signin/SignInPage.js

@@ -277,14 +277,15 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}
                 />
+                {shouldShowValidateCodeForm && (
+                    <ValidateCodeForm
+                        isVisible={!shouldShowAnotherLoginPageOpenedMessage}
+                        isUsingRecoveryCode={isUsingRecoveryCode}
+                        setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                    />
+                )}
                 {!shouldShowAnotherLoginPageOpenedMessage && (
                     <>
-                        {shouldShowValidateCodeForm && (
-                            <ValidateCodeForm
-                                isUsingRecoveryCode={isUsingRecoveryCode}
-                                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-                            />
-                        )}
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
                         {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
                         {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -13,6 +14,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -85,6 +87,7 @@ function BaseValidateCodeForm(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const isFocused = useIsFocused();
     const [formError, setFormError] = useState({});
     const [validateCode, setValidateCode] = useState(props.credentials.validateCode || '');
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
@@ -113,11 +116,11 @@ function BaseValidateCodeForm(props) {
     }, [props.account.isLoading, props.session.autoAuthState, hasError]);
 
     useEffect(() => {
-        if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus()) {
+        if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !props.isVisible || !isFocused) {
             return;
         }
         inputValidateCodeRef.current.focus();
-    }, []);
+    }, [props.isVisible, isFocused]);
 
     useEffect(() => {
         if (prevValidateCode || !props.credentials.validateCode) {
@@ -431,4 +434,5 @@ export default compose(
         session: {key: ONYXKEYS.SESSION},
     }),
     withNetwork(),
+    withToggleVisibilityView,
 )(BaseValidateCodeForm);