[Due for payment 2025-03-28] [$250][Back Nav] Navigation Back Stuck After Viewing Assigned Card

[m-natarajan]

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: 9.1.11-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @hoangzinh
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

Precondition:

1. The user has assigned themselves a virtual card.
2. Steps to Reproduce:
3. Sign in to the ND app.
4. Navigate to Profile → Wallet.
5. Select any assigned card.
6. Tap the back navigation button (top left).
7. Tap the back navigation button again.

Expected Result:

The app should return to the Profile page.

Actual Result:

The app navigates back to the Assigned Card page instead. If I tap back again, it loops between the Wallet and Assigned Card pages.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-03-11.at.23.06.41.mov

ScreenRecording_03-11-2025.21-47-10_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021900621145991219291
• Upwork Job ID: 1900621145991219291
• Last Price Increase: 2025-03-14
• Automatic offers:
• daledah | Contributor | 106561415

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-12 02:04:35 UTC.

Proposal

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

The app navigates back to the Assigned Card page instead. If I tap back again, it loops between the Wallet and Assigned Card pages.

What is the root cause of that problem?

In Expensify card page, Clicking back button uses Navigation.navigate

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 149 in de07682

onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET)}

While in Wallet page, clicking back button uses default Navigation.goBack

App/src/pages/settings/Wallet/WalletPage/WalletPage.tsx

Lines 384 to 392 in de07682

	const headerWithBackButton = (
	<HeaderWithBackButton
	title={translate('common.wallet')}
	icon={Illustrations.MoneyIntoWallet}
	shouldUseHeadlineHeader
	shouldShowBackButton={shouldUseNarrowLayout}
	shouldDisplaySearchRouter
	/>
	);

So we're stuck in a look: navigate to wallet page -> go back to Expensify card page -> navigate to wallet page ....

This logics make the exit animation for Expensify Card page not appearing as well.

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

We should use Navigation.goBack in Expensify card page

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 149 in de07682

onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET)}

onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}

Screen.Recording.2025-03-12.at.09.03.48.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA, this is Navigation bug

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[layacat]

Proposal

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

Navigation Back Stuck After Viewing Assigned Card

What is the root cause of that problem?

We recently introduced new screen for reporting card fraud successfully, after pressing Got it from this screen, it navigates to ExpensifyCardPage, that why in the onBackButtonPress we passed Navigation.navigate(ROUTES.SETTINGS_WALLET) that to prevent user go back to ReportVirtualCardFraudConfirmationPage when user presses back in ExpensifyCardPage after being navigated from ReportVirtualCardFraudConfirmationPage.

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

1. Change the the navigate when pressing back button from ExpensifyCardPage to goBack with the backTo params.
   

   App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

   Line 149 in de07682

   onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET)}

// backTo param from route.
onBackButtonPress={() => Navigation.goBack(backTo)}

2. Update close function of ReportVirtualCardFraudConfirmationPage to pass the backTo params as the WalletPage.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

IMO this is navigation bug we don't need to write automate test.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

@daledah's Proposal makes sense here—we should use Navigation.goBack instead of Navigation.navigate when handling the back from the header button.

🎀 👀 🎀 C+ reviewed