Reset Plaid steps if the screen is blurred

src/components/AddPlaidBankAccount.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
-import React, {useEffect, useRef, useCallback} from 'react';
+import React, {useEffect, useRef, useCallback, useMemo} from 'react';
 import {ActivityIndicator, View} from 'react-native';
+import {useIsFocused} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -38,6 +39,9 @@ const propTypes = {
     /** Fired when the user exits the Plaid flow */
     onExitPlaid: PropTypes.func,
 
+    /** Fired when the screen is blurred */
+    onBlurPlaid: PropTypes.func,
+
     /** Fired when the user selects an account */
     onSelect: PropTypes.func,
 
@@ -61,6 +65,7 @@ const defaultProps = {
     selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
+    onBlurPlaid: () => {},
     onSelect: () => {},
     text: '',
     receivedRedirectURI: null,
@@ -75,6 +80,7 @@ function AddPlaidBankAccount({
     selectedPlaidAccountID,
     plaidLinkToken,
     onExitPlaid,
+    onBlurPlaid,
     onSelect,
     text,
     receivedRedirectURI,
@@ -88,6 +94,7 @@ function AddPlaidBankAccount({
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const isFocused = useIsFocused();
 
     /**
      * @returns {String}
@@ -102,6 +109,11 @@ function AddPlaidBankAccount({
         }
     };
 
+    /**
+     * @returns {Array}
+     */
+    const plaidBankAccounts = useMemo(() => lodashGet(plaidData, 'bankAccounts') || [], [plaidData]);
+
     /**
      * @returns {Boolean}
      * I'm using useCallback so the useEffect which uses this function doesn't run on every render.
@@ -151,6 +163,13 @@ function AddPlaidBankAccount({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        if (isFocused || plaidBankAccounts.length) {
+            return;
+        }
+        onBlurPlaid();
+    }, [isFocused, onBlurPlaid, plaidBankAccounts.length]);
+
     useEffect(() => {
         // If we are coming back from offline and we haven't authenticated with Plaid yet, we need to re-run our call to kick off Plaid
         // previousNetworkState.current also makes sure that this doesn't run on the first render.
@@ -160,7 +179,6 @@ function AddPlaidBankAccount({
         previousNetworkState.current = isOffline;
     }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]);
 
-    const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts') || [];
     const token = getPlaidLinkToken();
     const options = _.map(plaidBankAccounts, (account) => ({
         value: account.plaidAccountID,

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

@@ -103,6 +103,7 @@ function BankAccountPlaidStep(props) {
                     }}
                     plaidData={plaidData}
                     onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
+                    onBlurPlaid={() => BankAccounts.setBankAccountSubStep(null)}
                     receivedRedirectURI={receivedRedirectURI}
                     plaidLinkOAuthToken={plaidLinkOAuthToken}
                     allowDebit