[$250] mweb - Wrong status bar color at the top in safari

m-natarajan commented 3 weeks ago

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.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:

Open app in light mode
Login
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

![IMG_0375]()

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0119d994ad59578254
Upwork Job ID: 1814407474918883716
Last Price Increase: 2024-07-19

Issue Owner

Current Issue Owner: @eh2077

melvin-bot[bot] commented 3 weeks ago

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 commented 3 weeks ago

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

cc @tienifr @alitoshmatov

shawnborton commented 3 weeks ago

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

ishpaul777 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

Not overdue. This is actively being discussed.

johncschuster commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

Assigning Rory for his insight 🙏

melvin-bot[bot] commented 1 week ago

@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] commented 1 week ago

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

johncschuster commented 1 week ago

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

roryabraham commented 1 week ago

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:

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 commented 1 week ago

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 commented 5 days ago

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] commented 5 days ago

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

melvin-bot[bot] commented 5 days ago

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

eh2077 commented 2 days ago

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

🎀👀🎀 C+ reviewed

melvin-bot[bot] commented 2 days ago

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

Expensify / App