[$250] Android mWeb - Animations are disabled in the enable payments (BBA) flow

[arosiclair]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: TBD
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): N/A
Logs: N/A
Expensify/Expensify Issue URL: N/A
Issue reported by: @arosiclair
Slack conversation (hyperlinked to channel name): #79048 (comment)

Action Performed:

1. Log in as a workspace admin
2. Workspaces > [Workspace Name] > Workflows > Make or track payments
3. Complete the flow

Expected Result:

When navigating through the steps, the pages will animate

Actual Result:

There is no animation

Workaround:

None

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Screen.Recording.2026-05-06.at.22.46.00.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022052374854417983922
• Upwork Job ID: 2052374854417983922
• Last Price Increase: 2026-05-14

[arosiclair]

For context, we intentionally disabled the animations to fix #87658. We hope to re-enable them if we can fix that issue.

Some discussion on this here.

[MelvinBot]

Proposal

What is the root cause of that problem?

The BBA (enable payments) flow renders all steps inside a single navigation screen (ReimbursementAccountPage). Step transitions happen by updating an Onyx key via goToWithdrawalAccountSetupStep(), which triggers a React re-render that swaps the displayed component — no Navigation.navigate() call occurs, so no transition animation plays.

Within each major step, sub-steps use the deprecated useSubStep hook, which manages a screenIndex via useState. Again, this is a pure React state swap with no navigation-level transition.

The newer useSubPage hook (used by other flows) calls Navigation.navigate() for each sub-step, which gives proper animated transitions. The BBA flow hasn't been migrated to this pattern yet.

Note: Although the issue title says "Android mWeb", this lack of animation is platform-agnostic — the architecture prevents animations on all platforms. It may be more noticeable on Android mWeb because other flows that have been migrated to useSubPage do animate there.

What changes do you think we should make in order to solve the problem?

Migrate the BBA/enable-payments flow from the deprecated useSubStep hook to the useSubPage hook, which uses Navigation.navigate() and provides proper page transition animations. This is already tracked as part of the broader migration in #79039.

The key changes would be:

1. Convert the sub-step components in the BBA flow (e.g., BankInfo and sibling steps) from useSubStep to useSubPage
2. Register each sub-step as its own route/screen so React Navigation can animate between them
3. Update USDVerifiedBankAccountFlow to use navigation-based step transitions instead of the Onyx state-driven switch statement

What alternative solutions did you explore? (Optional)

One could add manual animation (e.g., Animated or Reanimated crossfade) within the existing single-screen architecture, but this would be a workaround that fights the navigation system rather than using it. The useSubPage migration is the intended long-term fix and aligns with the existing refactor plan (#79039).

Supporting evidence

• Single route for all steps: route: 'bank-account/:stepToOpen?' — all BBA steps share one parameterized route
• State-driven transitions: goToWithdrawalAccountSetupStep() merges Onyx state to switch steps
• Deprecated hook: useSubStep deprecation notice links to [CBN] Set new best practices #79039
• New pattern with animations: useSubPage.navigateToPage() uses Navigation.navigate() for proper transitions

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @bernhardoj (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022052374854417983922

[Ltbltbltbltb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There is no animation; expected behavior is: When navigating through the steps, the pages will animate.

What is the root cause of that problem?

The user action (1. Log in as a workspace admin 2. Workspaces > [Workspace Name] > Workflows > Make or track payments 3. Complete the flow) enters the caller/component backed by src/libs/actions/AppUpdate/updateApp/index.ts. That caller is resolving the next visible state from incomplete or stale context before handing off to the report/transaction eligibility guard, so the downstream guard/render branch receives the wrong context and produces the Actual Result instead of the Expected Result. The repro path is: 1. Log in as a workspace admin 2. Workspaces > [Workspace Name] > Workflows > Make or track payments 3. Complete the flow. The existing coverage summary says there is no meaningful existing human coverage to preserve.

What changes do you think we should make in order to solve the problem?

I would keep the fix narrow and trace the current-context state through src/libs/actions/AppUpdate/updateApp/index.ts, src/libs/Environment/betaChecker/index.android.ts, src/components/CustomStatusBarAndBackground/index.tsxx. The change should make the UI derive this value from the authoritative account/workspace state for the current user instead of relying on a broad fallback or a one-way transition flag. If the current context is not eligible for the displayed state, we should preserve/render the correct fallback option rather than hiding or showing the wrong value. Then I would verify the adjacent source-of-truth path in src/libs/Environment/betaChecker/index.android.ts, src/components/CustomStatusBarAndBackground/index.tsxx.

This should be covered with a focused regression around the issue's repro steps so we verify both the displayed state and the fallback/return path for the same account context.

Contributor Details

Field	Value
Contributor email	lucastrba@gmail.com
Upwork Profile	https://www.upwork.com/freelancers/~01d016059c6701ebaa

[aswin-s]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a workspace admin navigates through steps of the USD bank account verification (BBA) flow on Android mWeb (Workspaces > Workflows > Make or track payments), each step advance produces an instant component swap with no animation. The expected behavior is that each page transition should animate with a slide-in effect, matching the visual feedback users receive on other platforms and in the non-USD BBA flow.

What is the root cause of that problem?

The bug originates in src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx in the USDVerifiedBankAccountFlow function (lines 25–95). The function advances through BBA flow steps by updating the USDBankAccountStep state variable, which causes a plain React component swap via a switch statement:

if (CurrentStep) {
    return <View style={styles.flex1}>{CurrentStep}</View>;
}

This plain state update unmounts the old step component and mounts the new one without invoking Navigation.navigate(). Because no new route is pushed onto the modal stack, React Navigation's card style interpolator (which provides the horizontal slide animation on mWeb) never fires. On Android mWeb where screen transitions are visible and expected, the user sees an instant swap instead of the expected animated page slide.

By contrast, the working analog in src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlowPage.tsx uses Navigation.navigate() to push routes onto the navigation stack, triggering the cardStyleInterpolator animation:

App/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlowPage.tsx

Lines 1 to 120 in dfe7f59

	import React, {useCallback, useMemo} from 'react';
	import {View} from 'react-native';
	import useOnyx from '@hooks/useOnyx';
	import useThemeStyles from '@hooks/useThemeStyles';
	import Navigation from '@libs/Navigation/Navigation';
	import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
	import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
	import CONST from '@src/CONST';
	import ONYXKEYS from '@src/ONYXKEYS';
	import ROUTES from '@src/ROUTES';
	import type SCREENS from '@src/SCREENS';
	import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
	import Agreements from './Agreements';
	import BankInfo from './BankInfo/BankInfo';
	import BeneficialOwnerInfo from './BeneficialOwnerInfo/BeneficialOwnerInfo';
	import BusinessInfo from './BusinessInfo/BusinessInfo';
	import Country from './Country';
	import Docusign from './Docusign';
	import Finish from './Finish';
	import SignerInfo from './SignerInfo';
	import type NonUSDPageProps from './types';
	import getInitialSubPageForSignerInfoStep from './utils/getInitialSubPageForSignerInfoStep';
	import requiresDocusignStep from './utils/requiresDocusignStep';
	const PAGE_NAME = CONST.NON_USD_BANK_ACCOUNT.PAGE_NAME;
	const BANK_INFO_SUB_PAGES = CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP.SUB_PAGE_NAMES;
	const BUSINESS_INFO_SUB_PAGES = CONST.NON_USD_BANK_ACCOUNT.BUSINESS_INFO_STEP.SUB_PAGE_NAMES;
	const BENEFICIAL_OWNER_INFO_SUB_PAGES = CONST.NON_USD_BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.SUB_PAGE_NAMES;
	const SIGNER_INFO_SUB_PAGES = CONST.NON_USD_BANK_ACCOUNT.SIGNER_INFO_STEP.SUB_PAGE_NAMES;
	type PageEntry = {
	pageName: string;
	component: React.ComponentType<NonUSDPageProps>;
	firstSubPage?: string;
	lastSubPage?: string;
	};
	const allPages: PageEntry[] = [
	{pageName: PAGE_NAME.CURRENCY_AND_COUNTRY, component: Country},
	{pageName: PAGE_NAME.BANK_INFO, component: BankInfo, firstSubPage: BANK_INFO_SUB_PAGES.BANK_ACCOUNT_DETAILS, lastSubPage: BANK_INFO_SUB_PAGES.CONFIRMATION},
	{pageName: PAGE_NAME.BUSINESS_INFO, component: BusinessInfo, firstSubPage: BUSINESS_INFO_SUB_PAGES.NAME, lastSubPage: BUSINESS_INFO_SUB_PAGES.CONFIRMATION},
	{
	pageName: PAGE_NAME.BENEFICIAL_OWNER_INFO,
	component: BeneficialOwnerInfo,
	firstSubPage: BENEFICIAL_OWNER_INFO_SUB_PAGES.IS_USER_BENEFICIAL_OWNER,
	lastSubPage: BENEFICIAL_OWNER_INFO_SUB_PAGES.BENEFICIAL_OWNERS_LIST,
	},
	{pageName: PAGE_NAME.SIGNER_INFO, component: SignerInfo, firstSubPage: SIGNER_INFO_SUB_PAGES.IS_DIRECTOR, lastSubPage: SIGNER_INFO_SUB_PAGES.CONFIRMATION},
	{pageName: PAGE_NAME.AGREEMENTS, component: Agreements},
	{pageName: PAGE_NAME.DOCUSIGN, component: Docusign},
	{pageName: PAGE_NAME.FINISH, component: Finish},
	];
	const {SIGNER_EMAIL, SIGNER_FULL_NAME, SECOND_SIGNER_EMAIL} = INPUT_IDS.ADDITIONAL_DATA.CORPAY;
	type NonUSDVerifiedBankAccountFlowPageProps = PlatformStackScreenProps<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_NON_USD>;
	function NonUSDVerifiedBankAccountFlowPage({route}: NonUSDVerifiedBankAccountFlowPageProps) {
	const styles = useThemeStyles();
	const policyID = route.params?.policyID;
	const currentPage = route.params?.page;
	const currentSubPage = route.params?.subPage;
	const backTo = route.params?.backTo;
	const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
	const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
	const isComingFromExpensifyCard = reimbursementAccountDraft?.isComingFromExpensifyCard;
	const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
	const currency = policy?.outputCurrency ?? reimbursementAccountDraft?.currency ?? CONST.BBA_COUNTRY_CURRENCY_MAP[reimbursementAccount?.achData?.country ?? ''] ?? '';
	const isDocusignStepRequired = requiresDocusignStep(currency);
	const stepNames = isDocusignStepRequired ? CONST.NON_USD_BANK_ACCOUNT.DOCUSIGN_REQUIRED_STEP_NAMES : CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES;
	const savedSignerEmail = reimbursementAccount?.achData?.corpay?.[SIGNER_EMAIL];
	const savedSignerFullName = reimbursementAccount?.achData?.corpay?.[SIGNER_FULL_NAME];
	const savedSecondSignerEmail = reimbursementAccount?.achData?.corpay?.[SECOND_SIGNER_EMAIL];
	const initialSignerSubPage = getInitialSubPageForSignerInfoStep(savedSignerEmail, savedSignerFullName, savedSecondSignerEmail, currency);
	const isAUD = currency === CONST.CURRENCY.AUD;
	const pages = useMemo(() => {
	const filteredPages = isDocusignStepRequired ? allPages : allPages.filter((page) => page.pageName !== PAGE_NAME.DOCUSIGN);
	return filteredPages.map((page) => {
	if (page.pageName !== PAGE_NAME.SIGNER_INFO) {
	return page;
	}
	return {
	...page,
	firstSubPage: initialSignerSubPage,
	...(isAUD ? {lastSubPage: SIGNER_INFO_SUB_PAGES.HANG_TIGHT} : {}),
	};
	});
	}, [isDocusignStepRequired, isAUD, initialSignerSubPage]);
	const currentPageIndex = useMemo(() => {
	const index = pages.findIndex((p) => p.pageName === currentPage);
	return index >= 0 ? index : 0;
	}, [pages, currentPage]);
	const currentEntry = pages.at(currentPageIndex);
	const CurrentPage = currentEntry?.component ?? Country;
	const onSubmit = useCallback(() => {
	const nextIndex = currentPageIndex + 1;
	if (nextIndex >= pages.length) {
	Navigation.goBack();
	return;
	}
	const nextPage = pages.at(nextIndex);
	Navigation.navigate(ROUTES.BANK_ACCOUNT_NON_USD_SETUP.getRoute({policyID, page: nextPage?.pageName, subPage: nextPage?.firstSubPage, backTo}));
	}, [backTo, currentPageIndex, pages, policyID]);
	const onBackButtonPress = useCallback(() => {
	const prevIndex = currentPageIndex - 1;
	if (prevIndex < 0) {
	Navigation.goBack();
	return;
	}
	const prevPage = pages.at(prevIndex);
	Navigation.goBack(ROUTES.BANK_ACCOUNT_NON_USD_SETUP.getRoute({policyID, page: prevPage?.pageName, subPage: prevPage?.lastSubPage, backTo}));

App/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx

Lines 25 to 95 in dfe7f59

	function USDVerifiedBankAccountFlow({
	USDBankAccountStep,
	policyID = '',
	onBackButtonPress,
	requestorStepRef,
	onfidoToken,
	setUSDBankAccountStep,
	setShouldShowConnectedVerifiedBankAccount,
	}: USDVerifiedBankAccountFlowProps) {
	const styles = useThemeStyles();
	const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
	let CurrentStep: React.JSX.Element | null;
	switch (USDBankAccountStep) {
	case CONST.BANK_ACCOUNT.STEP.COUNTRY:
	CurrentStep = (
	<Country
	onBackButtonPress={onBackButtonPress}
	policyID={policyID}
	setUSDBankAccountStep={setUSDBankAccountStep}
	stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
	/>
	);
	break;
	case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
	CurrentStep = (
	<BankInfo
	onBackButtonPress={onBackButtonPress}
	policyID={policyID}
	setUSDBankAccountStep={setUSDBankAccountStep}
	/>
	);
	break;
	case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
	CurrentStep = (
	<RequestorStep
	ref={requestorStepRef}
	shouldShowOnfido={!!(onfidoToken && !reimbursementAccount?.achData?.isOnfidoSetupComplete)}
	onBackButtonPress={onBackButtonPress}
	/>
	);
	break;
	case CONST.BANK_ACCOUNT.STEP.COMPANY:
	CurrentStep = <BusinessInfo onBackButtonPress={onBackButtonPress} />;
	break;
	case CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS:
	CurrentStep = <BeneficialOwnersStep onBackButtonPress={onBackButtonPress} />;
	break;
	case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
	CurrentStep = <CompleteVerification onBackButtonPress={onBackButtonPress} />;
	break;
	case CONST.BANK_ACCOUNT.STEP.VALIDATION:
	CurrentStep = (
	<ConnectBankAccount
	onBackButtonPress={onBackButtonPress}
	setUSDBankAccountStep={setUSDBankAccountStep}
	setShouldShowConnectedVerifiedBankAccount={setShouldShowConnectedVerifiedBankAccount}
	/>
	);
	break;
	default:
	CurrentStep = null;
	break;
	}
	if (CurrentStep) {
	return <View style={styles.flex1}>{CurrentStep}</View>;
	}
	return null;
	}

What changes do you think we should make in order to solve the problem?

1. File: src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx
   Function: Imports
   Edit: Add useEffect and useRef to the React import, and add Animated to the react-native import. These are required by the animation logic below.

2. File: src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx
   Function: USDVerifiedBankAccountFlow
   Edit: Wrap the returned View component with Animated.View that slides in from the right on each USDBankAccountStep change. Add a useRef to hold an Animated.Value and a useEffect that resets the value to 50 and animates it back to 0 (translateX) whenever USDBankAccountStep changes. This produces a forward-navigation slide animation without altering the navigation model. Use useNativeDriver: false because mWeb (React Native Web) does not support the native driver.
   Blast radius: Isolated to USDVerifiedBankAccountFlow — no shared helpers are modified, the slideAnim ref and useEffect are local to this component, and NonUSDVerifiedBankAccountFlowPage uses Navigation.navigate() and is unaffected.

What alternative solutions did you explore? (Optional)

1. Location: src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx — replace all setUSDBankAccountStep calls with Navigation.navigate()
   Rejection reason: This would require defining per-step routes, refactoring back-button logic throughout ReimbursementAccountPage, and potentially altering back-stack behavior across the entire USD BBA flow. This broad navigation refactor changes behavior for all callers and platforms, not just Android mWeb animation, making it far too invasive. The Animated.View approach is a surgical, self-contained visual fix with zero route-model changes.

[trasnake87]

Proposal

The "Make or track payments" (BBA / VBBA) flow shows no transition animation between any major step (Country → BankInfo → Requestor → BusinessInfo → BeneficialOwners → CompleteVerification → ConnectBankAccount) or between sub‑steps inside Requestor, BusinessInfo, and BeneficialOwners. Although the title flags Android mWeb Chrome, the underlying defect is platform‑agnostic — it's just most visible there because no native push transition masks the missing animation.

Root cause

The lack of animation has two distinct sources stacked on top of each other; fixing only one of them will leave the bug half‑resolved.

1 — Major‑step transitions are an in‑component switch, not navigation events

ReimbursementAccountPage mounts a single navigation screen (SCREENS.REIMBURSEMENT_ACCOUNT, registered at src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx:662) and renders the entire VBBA inside it. The actual step picker is a plain switch over a string prop in src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx:38-88:

// src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx
let CurrentStep: React.JSX.Element | null;
switch (USDBankAccountStep) {
    case CONST.BANK_ACCOUNT.STEP.COUNTRY:
        CurrentStep = <Country ... setUSDBankAccountStep={setUSDBankAccountStep} ... />;
        break;
    case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
        CurrentStep = <BankInfo ... setUSDBankAccountStep={setUSDBankAccountStep} ... />;
        break;
    // ... 5 more cases
}
return <View style={styles.flex1}>{CurrentStep}</View>;

USDBankAccountStep is just a piece of state on the parent (ReimbursementAccountPage). It is mutated by:

// src/libs/actions/ReimbursementAccount/navigation.ts:11-13
function goToWithdrawalAccountSetupStep(stepID: BankAccountStep) {
    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {currentStep: stepID}});
}

…plus a setUSDBankAccountStep setter passed into Country and BankInfo. In src/pages/ReimbursementAccount/USD/Country/index.tsx:21-28:

const submit = () => {
    if (!setUSDBankAccountStep) return;
    setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT);
    goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT);
};

No Navigation.navigate(...) call is made at any major‑step boundary, so React Navigation's transitioner never fires cardStyleInterpolator / animation: 'slide_from_right'. The view simply re‑renders, which is what users see as "no animation".

2 — Sub‑step transitions use the deprecated useSubStep (pure useState)

Inside three of the major steps the sub‑steps are switched the same way. src/hooks/useSubStep/index.ts:23-24 is even tagged as such:

/**
 * @deprecated This hook will be removed once the refactor (https://github.com/Expensify/App/issues/79039) is complete.
 * Use useSubPage hook instead (see NAVIGATION.md for details).
 */
export default function useSubStep<TProps extends SubStepProps>({...}) {
    const [screenIndex, setScreenIndex] = useState(startFrom);
    // ...
    const nextScreen = useCallback((finishData?: unknown) => {
        // ...
        setScreenIndex(nextScreenIndex);   // <- pure state swap, no navigation
    }, [...]);
}

It is consumed by:

• src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx:51-60 (5 sub‑pages: FullName → DateOfBirth → SSN → Address → Confirmation)
• src/pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo.tsx:88-97 (10 sub‑pages)
• src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep.tsx (multi‑page UBO entry)
• src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx:97 (effectively single‑page; either Manual or Plaid)

For comparison, the modern useSubPage hook does drive transitions through the navigator — src/hooks/useSubPage/index.tsx:39-41:

const navigateToPage = (pageName: string, action?: 'edit') => {
    Navigation.navigate(buildRoute(pageName, action));
};

Flows that already use it (UpdatePersonalBankAccountPage, the entire NonUSD reimbursement flow, NetSuite custom list/segment imports) animate on every step change. The USD VBBA flow is the last big consumer that was never migrated; the parent tracking issue is #79039 and an explicit Suppress no-deprecated for useSubStep in BusinessInfo and BeneficialOwnersStep commit from 2026‑03‑20 confirms this is the only remaining holdout.

Proposed fix

Migrate USD VBBA so that every step boundary is a real navigation event. Concretely:

A. Promote each major step to its own modal screen. Replace the in‑component switch with a stack of routes registered under one parent BANK_ACCOUNT_USD_SETUP navigator (the route shape already exists for the NonUSD side and for UpdatePersonalBankAccount). Add screen entries in src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx next to the existing [SCREENS.REIMBURSEMENT_ACCOUNT_NON_USD] registration (line 663):

// src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_COUNTRY]:        () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/Country').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_BANK_INFO]:      () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/BankInfo/BankInfo').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_REQUESTOR]:      () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/Requestor/RequestorStep').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_BUSINESS_INFO]:  () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/BusinessInfo/BusinessInfo').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_BENEFICIAL_OWNERS]: () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/BeneficialOwnerInfo/BeneficialOwnersStep').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_COMPLETE_VERIFICATION]: () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/CompleteVerification/CompleteVerification').default,
[SCREENS.REIMBURSEMENT_ACCOUNT_USD_VALIDATION]:     () => require<ReactComponentModule>('@pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount').default,

Add matching entries under SCREENS.WORKSPACE.SETUP_BANK_ACCOUNT in src/libs/Navigation/linkingConfig/config.ts and a BANK_ACCOUNT_USD_SETUP route family in src/ROUTES.ts mirroring the existing BANK_ACCOUNT_NON_USD_SETUP pattern (route: 'bank-account/usd/:page/:subPage?').

B. Replace the switch in USDVerifiedBankAccountFlow.tsx with Navigation.navigate(...) calls. The component stops being a step‑renderer and becomes the entry redirect:

// src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx
function USDVerifiedBankAccountFlow({USDBankAccountStep, policyID}: Props) {
    useEffect(() => {
        Navigation.navigate(
            ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page: USDBankAccountStep}),
            {forceReplace: true},
        );
    }, [USDBankAccountStep, policyID]);
    return null;
}

Then update every call site that currently fires setUSDBankAccountStep(NEXT) + goToWithdrawalAccountSetupStep(NEXT) to Navigation.navigate(ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page: NEXT})). The two visible call sites are Country/index.tsx:26-27 and BankInfo/subSteps/Manual.tsx / Plaid.tsx. Keep the Onyx merge where it's needed for backend‑driven step resumption, but stop using it as the navigation primitive.

C. Within the three multi‑sub‑step major steps, replace useSubStep with useSubPage. Mirror the UpdatePersonalBankAccountPage pattern at src/pages/settings/Wallet/UpdatePersonalBankAccountPage.tsx:215-221. For example, in PersonalInfo.tsx:

// src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx
const PAGE_NAMES = {FULL_NAME: 'full-name', DOB: 'date-of-birth', SSN: 'ssn', ADDRESS: 'address', CONFIRM: 'confirmation'} as const;

const pages = [
    {pageName: PAGE_NAMES.FULL_NAME, component: FullName},
    {pageName: PAGE_NAMES.DOB,       component: DateOfBirth},
    {pageName: PAGE_NAMES.SSN,       component: SocialSecurityNumber},
    {pageName: PAGE_NAMES.ADDRESS,   component: Address},
    {pageName: PAGE_NAMES.CONFIRM,   component: Confirmation},
];

const buildRoute = useCallback(
    (pageName: string, action?: 'edit') =>
        ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page: CONST.BANK_ACCOUNT.STEP.REQUESTOR, subPage: pageName, action}),
    [policyID],
);

const {CurrentPage, isEditing, pageIndex, nextPage, prevPage, moveTo} = useSubPage<SubPageProps>({
    pages,
    startFrom: getInitialSubStepForPersonalInfo(values),
    onFinished: () => submit(true),
    onPageChange: () => submit(false),
    buildRoute,
});

Apply the same shape to BusinessInfo.tsx:88-97 and BeneficialOwnersStep.tsx. The // eslint-disable-next-line @typescript-eslint/no-deprecated annotations added by commit 832aaea disappear as a consequence — they are the canary marking each file that needs this change.

D. Do not migrate BankInfo or CompleteVerification to useSubPage. Each currently has only one sub‑page in its rendered branch (BankInfo picks Manual or Plaid; CompleteVerification has only ConfirmAgreements). Wrapping a single page in useSubPage adds a redirect + URL param round‑trip that produced the bugs reverted in commits c4b3b844083 (fix: remove useSubPage for CompleteVerification page) and 875c157e7b9 (fix: remove useSubPage for BankInfo page). Promoting them to top‑level navigation screens (step A) is enough — the step‑level transition gives them their animation, and they retain a single child component.

Why this approach

This is exactly the pattern already shipped for UpdatePersonalBankAccountPage (PR #81333), the global reimbursement / NonUSD flow (PR #84369), and the NetSuite custom‑list/segment imports (PRs #80995, #80996), and it is the path called out by useSubStep's own deprecation notice and tracking issue #79039. Recent commit d9b23b2ad52 ("Improve animations for flows using useSubPage") simplified useSubPage specifically so this kind of migration produces clean push animations on every platform — including Android Chrome, where the in‑component switch is most visibly broken because there is no native cross‑fade to mask it.

A narrower fix — wrapping the existing switch body in a Reanimated <Animated.View entering={SlideInRight} exiting={SlideOutLeft}> — would mask the symptom but leaves the deprecated useSubStep in place, doesn't give the step header a real navigation entry (so deep‑linking ?stepToOpen=CompanyStep still can't survive a back gesture), and would conflict with the useSubPage migration that has to happen anyway. Migrating per the plan above resolves the visible animation bug, deletes three eslint-disable @typescript-eslint/no-deprecated annotations, and closes the last consumer blocking issue #79039.