[$250] mWeb - When tapping back, the header on mWeb stays purple for a couple of seconds

[mitarachim]

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: v9.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #53686
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro / 18
App Component: Chat Report View

Action Performed:

1. Access staging.new.expensify.com
2. Open FAB > Submit expense.
3. Enter amount > Next.
4. Tap "Submit an expense, get $250" banner.
5. Tap back
6. Verify that: The device navigation bar will not have purple color.

Expected Result:

User expects the header to turn back to green immediately after tapping back

Actual Result:

The top nav menu turns purple for a couple of seconds and stays purple when tapping back, even after exiting the banner page

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6702727_1735261423209.PR_53686_mweb.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021873780397844730879
• Upwork Job ID: 1873780397844730879
• Last Price Increase: 2025-01-20

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[melvin-bot]

@bfitzexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[truph01]

Proposal

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

• The top nav menu turns purple for a couple of seconds and stays purple when tapping back, even after exiting the banner page

What is the root cause of that problem?

• In here:

App/src/components/CustomStatusBarAndBackground/index.tsx

Line 105 in dae99d1

statusBarAnimation.set(withDelay(300, withTiming(1)));

we delay 300 before updating the status bar color, so leads to the bug "the header on mWeb stays purple for a couple of seconds".

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

• We can remove the delay logic since we are already using a timing animation, making the delay unnecessary:

                statusBarAnimation.set(withTiming(1, {duration: 300}));

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

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