[HOLD for payment 2024-03-29] [$500] [Wave Collect] [Ideal Nav] Incorrect animation direction on Wallet and Troubleshooting page

[lanitochka17]

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: 1.4.44-7
Reproducible in staging?: Y
Reproducible in production?: Y
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: Applause -Internal Team
Slack conversation:

Issue found when executing PR #37078

Action Performed:

Pre-requisite: user must be logged in and have an Expensify card assigned

1. Go to Settings > Wallet

2. Tap on Expensify card

3. Tap on the back button

4. Tap on the avatar to open the account settings

5. Tap about

6. Tap troubleshoot

7. Then Tap <until you reach LHN

8. Observe the sliding behavior

Expected Result:

A transition animation from left to right should appear (going back to previous page)

---

Opening each page account settings, about and troubleshootshould slige from the right overtop of the previous page and When pressing < button the page should slide away to the right

Actual Result:

A transition animation from right to left appears (as if it were a new page, not a previous one)

---

When pressing back button Troubleshoot page, About page slides in from the right, again, overtop Troubleshoot
Similarly pressing back button again, Profile slides in from the right
Finally, pressing back button, Account Settings slides away to the right which is the correct behavior

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6394726_1709070563566.Slts0498_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01588c7a6a3b8f24cb
• Upwork Job ID: 1762991723171692544
• Last Price Increase: 2024-03-12

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[apeyada]

Proposal

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

Wallet - When going back to Wallet from Expensify card, animation goes from right lo left

What is the root cause of that problem?

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

Line 127 in 4fcfbb0

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

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

Line 115 in 4fcfbb0

return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;

Here, we go to wallet page using goback(ROUTES.SETTINGS_WALLET)
This now became issue after ideal nav.

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

As wallet page is already in center pane, it's fine to navigate goBack without param even when deeplink to this page and click back button

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

Line 127 in 4fcfbb0

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

onBackButtonPress={() => Navigation.goBack()}
or we can remove this line as it's already default prop value in HeaderWithBackButton

---

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

Line 115 in 4fcfbb0

return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;

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

---

(optional)
use FullPageNotFoundView instead of early returning NotFoundPage when isNotFound

[melvin-bot]

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

[melvin-bot]

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

[Santhosh-Sellavel]

Back from OOO Will update in a day.