mweb - Wrong status bar color at the top in safari

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.3-1 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: @shawnborton Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1719557238761689

Action Performed:

1. Open app in light mode
2. Login
3. Verify the color of the status bar

Expected Result:

Should not be a dark color

Actual Result:

In light mode, the status bar is using a dark green color

Workaround:

unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [x] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/38435837/a34f31bf-7341-4356-a5a5-600dd33dd80a

View all open jobs on GitHub

[melvin-bot[bot]]

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

[ishpaul777]

i guess this https://github.com/Expensify/App/pull/44048 might be offending PR.

cc @tienifr @alitoshmatov

[shawnborton]

I don't think so, because your linked PR hasn't hit staging yet and I reported this bug last week from Staging.

[ishpaul777]

oh i didn't check PR status assumed its on stag. sorry for false alert. ~But may be that has fixed it? i'll check on dev~

[hungvu193]

Here's the offending PR: https://github.com/Expensify/App/pull/42592 (hmm but it doesn't reach staging yet 🤦, my bad). Disable StrictMode will fix the issue.

[johncschuster]

Not overdue. This is actively being discussed.

[johncschuster]

Just bumping to get this one picked back up. @shawnborton, does the status of the PR @hungvu193 mentioned (https://github.com/Expensify/App/pull/42592) line up with when you reported the issue?

[shawnborton]

Hmm that one is above my head! Let's see if @roryabraham has any thoughts there since he is a reviewer on that mentioned PR.

[johncschuster]

Assigning Rory for his insight 🙏

[melvin-bot[bot]]

@johncschuster @roryabraham this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

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

[johncschuster]

@roryabraham can you help us get unstuck when you get a sec? I'm looking for some insight on this question. Thank you!

[roryabraham]

oh hey. So one thing that React's strict mode does is run all effects twice. Why? No idea. I'm sure the React devs had a good reason 🙃

It's possible that might effect the code that sets status bar colors, but not obvious. IIRC most of the relevant logic is in these few files:

• https://github.com/Expensify/App/blob/21f55c7be031f3b2024482e5a2f895cda2a08dd7/src/components/CustomStatusBarAndBackground/index.tsx
• https://github.com/Expensify/App/blob/5dbca1d33cc8bc8cc688dddced748a644269623f/src/libs/StatusBar/index.web.ts

and on iOS Safari it's controlled by this theme-color meta tag.

Unfortunately it's like 2am for me, so I'm not able to help further right now 😞

[roryabraham]

also, I'm going to be OOO until Friday. I'll circle back as soon as I can, but let's avoid blocking on me for this. I imagine that if we make this external we'll get some reasonable proposals for me to review by the time I get back.

[dominictb]

Proposal

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

In light mode, the status bar is using a dark green color even if the device is in light mode. I believe this is a FE issue and should be external.

What is the root cause of that problem?

This is reproducible locally (please disable strict mode) or staging by doing the following:

• Logout -> observe that in the sign in screen, the status bar is dark green
• Login -> observe that after signing in, the status bar is still dark green, not white in case of light mode (this is the bug)
• Reload -> the status bar returns to the correct color (light color if it is light mode)

We are using nested CustomStatusBarAndBackground, with the inner CustomStatusBarAndBackground applies the dark theme to the sign-in page. This causes the status bar of the sign-in page to be in dark green

However, after signing in, the inner CustomStatusBarAndBackground will be unmounted, and in here, we have forced update the status bar again, but only the style, not the background color.

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

The idea is that in case the inner nested CustomStatusBarAndBackground is unmounted, we should update both the status bar color and style. Change here to following:

   useEffect(() => ....
          const triggerUpdateStatusBarAppearance = () => {
                updateStatusBarAppearance({statusBarStyle: newStatusBarStyle});
                setStatusBarStyle(newStatusBarStyle);
            }

            const triggerUpdateStatusBarBackgroundColor = () => {
                statusBarAnimation.value = 0;
                statusBarAnimation.value = withDelay(300, withTiming(1));
            }

            // Don't update the status bar style if it's the same as the current one, to prevent flashing.
            // Force update if the root status bar is back on active or it won't overwrite the nested status bar style
            if ((!didForceUpdateStatusBarRef.current && !prevIsRootStatusBarEnabled && isRootStatusBarEnabled)) {
                triggerUpdateStatusBarAppearance();
                triggerUpdateStatusBarBackgroundColor();

                if (!prevIsRootStatusBarEnabled && isRootStatusBarEnabled) {
                    didForceUpdateStatusBarRef.current = true;
                }
                return;
            }

            if(statusBarStyle !== newStatusBarStyle) {
                triggerUpdateStatusBarAppearance();
            }

            if(prevStatusBarBackgroundColor.current !== theme.appBG || currentScreenBackgroundColor !== theme.appBG) {
                triggerUpdateStatusBarBackgroundColor();
            }
....

What alternative solutions did you explore? (Optional)

There're a second problem: The status bar won't change to the correct theme background color, instead still kept at the light green color (theme.splashBG) when running in strict mode locally. The root cause is because the react-native-reanimated 3.8.1 doesn't work well with StrictMode. Here's the issue for tracking: https://github.com/software-mansion/react-native-reanimated/issues/6264.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[eh2077]

@dominictb Thanks for sharing reproduction steps and investigating the issue! Their proposal looks good to me.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Current assignee @roryabraham is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

@johncschuster, @roryabraham, @eh2077 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

📣 @eh2077 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.14-6 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/46265

If no regressions arise, payment will be issued on 2024-08-07. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @eh2077 requires payment automatic offer (Reviewer)
• @dominictb requires payment automatic offer (Contributor)

[melvin-bot[bot]]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [ ] [@eh2077] The PR that introduced the bug has been identified. Link to the PR:
• [ ] [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [ ] [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [ ] [@eh2077] Determine if we should create a regression test for this bug.
• [ ] [@eh2077] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [ ] [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[johncschuster]

Acknowledged! I'll issue payment after the regression threshold is cleared.

[johncschuster]

@eh2077 can you complete the BZ Checklist above?

[johncschuster]

I have issued payment for @dominictb. Thanks for your contributions! 🎉

[eh2077]

Checklist

• [x] [@eh2077] The PR that introduced the bug has been identified. Link to the PR: Spent some time tracking commit histories but I'm unable to find the PR that caused this bug. This is an edge case that only happen on mobile Safari.
• [x] [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• [x] [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• [x] [@eh2077] Determine if we should create a regression test for this bug. No, I don't think we should have a regression test for it because this feature and related code won't change often.

[eh2077]

@johncschuster Just working on the checklist when you commented, completed!