[$1000] [HOLD for payment 2023-06-05] Android status bar colour doesn't match the background

[Julesssss]

Problem

While resolving this related issue I uncovered a new problem. The LHN page background colour on mobile does not match the other pages in the app. The background colour is slightly different, and this is because of the need to display LHN and chat components side by side on desktop/web.

While on the LHN page, the status bar is visible. Additionally, the LHN background is different from every other page in the app. This will be far more noticeable once we switch to the dark theme:

Dark Theme

Light Theme

Solution

As discussed here in Slack, we have a couple of options:

1) Do nothing, live with the unique background colour for mobile. I don't like this as we are breaking mobile because of an issue that only exists on web/desktop (the LHN is not distinguishable when side by side)

2) Ignore the background colour difference, but implement a hack on Android that forces the status bar to not render, therefore resolving part of the problem. I think this option is bad as it introduces technical debt that is difficult to understand, even for someone very familiar with native Android code. Making changes to the status bar in the future will be difficult as the hack is pretty much un-discoverable without finding the introducing PR

3) At the React Native layer, display a different background colour on the LHN depending on the platform. This trades an inconsistency within the mobile apps, to an inconsistency based on whether we display the sidebar. We already use platform-specific code and set attributes based on the screen size, so this feels like the ideal solution to me.

background: props.isSmallScreenSize styles.sidebar : styles.sidebarLarge

4) Programatically set the status bar colour natively. While this would certainly work, we'd have to do it on every page and it is not immediate. We would see the default white status bar appear briefly before the green colour is set.

5) Refactor the app so that StatusBar doesn't sit above the entire app. This way we could set the colour based on context from the current page. This is a large refactor though, and I don't think this is a good use of time.

6) Spend time looking for a solution that lets us style each page on every platform. This is likely to be a native Android solution, but there's a good chance we won't find a better solution than those listed above. There is no guarantee this is possible, and it could take weeks of work.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01721757a40a8d7d9c
• Upwork Job ID: 1666788536927301632
• Last Price Increase: 2023-06-08

[melvin-bot[bot]]

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

[Julesssss]

Awaiting the merging of dark mode before I investigate further.

[Julesssss]

Returning to this soon after the notifications doc.

[Julesssss]

Focusing on this once I'm back from OOO

[Julesssss]

No change here.

[Julesssss]

This is likely to be fixed by the navigation reboot changes.

[MelvinBot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[roryabraham]

@Julesssss I was working on https://github.com/Expensify/App/issues/12261 and this issue was exacerbated because those mockups use various different colors near the top of the screen (not just light and dark green).

I was able to fix this with a pretty small PR: https://github.com/Expensify/App/pull/15471. Can you check it out and see if it's an acceptable approach? It seems to match the behavior we see on iOS.

Basically:

• Make the app full screen (ignoring status bar insets)
• Make the status bar transparent so that whatever color the app shows at the top of the screen becomes the background color for the status bar.

[roryabraham]

Making this a weekly because it's a blocker for https://github.com/Expensify/App/issues/12261

[Julesssss]

Okay, so yeah in order to have the backgrounds extend to the top of the screen we have no option but to have a transparent status bar. However, this introduces some issues we'll need to fix:

• We need to add padding to the top of each page to ensure the content doesn't overlap with the status bar icons (see screenshots)
• We now extend beneath the OS navigation icons, so we'll also need to make sure we don't overlap here. This seems to be the case already, but I noticed that the padding is a bit taller than it needs to be (this is most noticeable on the chat page)
• One exception to the above is the Sign in page, where we do appear to be overlapping the content and OS navigation icons

Overlapping status	Overlapping navigation	Excess navigation padding

[roryabraham]

Was really struggling with this today in https://github.com/Expensify/App/pull/15471, I tried a lot of different things, but ultimately the only way I've been successful in making the app display edge-to-edge is with this code:

Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

However, it seems like that approach breaks the automatic keyboard avoidance we get through the android:windowSoftInputMode="adjustResize" property on the main activity in AndroidManifest.xml.

With that FLAG_LAYOUT_NO_LIMITS in place, I also tried implementing this nice animated keyboard avoidance trick which doesn't rely on the windowSoftInputMode property, but I didn't have any success. That also only works on Android 11+ (which is probably fine).

---

Now, I keep coming back to the official documentation which says that this snippet should make the app display edge-to-edge:

WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

That works for the splash screen, but as soon as the main activity kicks in it stops working. I have had a number of theories why this doesn't work in our app, but the one that seems the most likely is that it is working, but the insets are being consumed by some parent view to our main app. To support this theory, if you look at the Android Studio LayoutInspector you can see that the root view seems to encapsulate the navigation and status bars (as expected), but for some reason the app content doesn't display behind them.

Investigating this theory further, I did a few things:

• Examined the view hierarchy looking for elements with fitsSystemWindows = true, because I understand those views can sometimes consume window insets
• Looked for code calling setOnApplyWindowInsetsListener.
  • In this vein, Reanimated seemed like the most likely culprit, and in fact others have experienced the same issue https://github.com/software-mansion/react-native-reanimated/issues/3631. The potential fix has been merged but not yet released. That said, we aren't using the useAnimatedKeyboard hook anywhere, so I don't actually think Reanimated is out culprit.

---

Anyways, now I'm quite stumped with this issue.

[roryabraham]

I asked for help from @janicduplessis here

[janicduplessis]

I can have a look at this!

[MelvinBot]

📣 @janicduplessis! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[janicduplessis]

Contributor details Your Expensify account email: janicduplessis@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0103a29331a221d7f6

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[janicduplessis]

I think I got it working for status bar here https://github.com/Expensify/App/pull/15656, do you also want to make the navigation bar transparent?

[janicduplessis]

I made some more progress on edge to edge display, currently the only issue seems to be with Modal, we use it for example in the bottom sheet, it doesn't seem to render under the navigation bar so it doesn't look the best. I think it would require a fix in RN.

:(

[MelvinBot]

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

[MelvinBot]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.2.81-1 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/15656

If no regressions arise, payment will be issued on 2023-03-17. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• [ ] External issue reporter
• [ ] Contributor that fixed the issue
• [ ] Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[Julesssss]

^ this was for a regression, PR is still in review

[janicduplessis]

https://github.com/Expensify/App/pull/15778 is ready to review and contains a fix for the regression we found.

I also made some progress on transparent navigation bar for edge to edge display.

@Julesssss @roryabraham When you can could you have a look at this comment https://github.com/Expensify/App/pull/15747#issuecomment-1468868385

[MelvinBot]

This issue has not been updated in over 15 days. @janicduplessis eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[Julesssss]

Bumping this @janicduplessis, there are some comments on the PR still, but it's looking pretty good.

[janicduplessis]

I’m currently out on vacation, will work on moving the PR forward when I’m back in around 1-2 weeks.

[Julesssss]

Sounds good. Enjoy!

[Julesssss]

Hey @janicduplessis, do you have time to return to this issue? No worries if not, just curious as I completely forgot about it.

[janicduplessis]

@Julesssss The PR is just waiting for review :)

[Julesssss]

Oh sweet, I didn't notice those comments. Will review it properly again tomorrow

[janicduplessis]

@Julesssss Awesome, thanks!

[Julesssss]

I retested the changes today on new and old Android devices and it's looking great. I think we can merge once the conflict is resolved.

[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 1.3.19-7 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/15778

If no regressions arise, payment will be issued on 2023-06-05. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• [ ] External issue reporter
• [ ] Contributor that fixed the issue
• [ ] Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @lschurr (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @Julesssss is eligible for the External assigner, not assigning anyone new.

[Julesssss]

Hey Lauren, the PR was already merged by @janicduplessis, who's with Margelo I believe. So we just need to pay out

[lschurr]

Sorry who needs to be paid for this one @Julesssss? It looks like maybe @mananjadhav and @aimane-chnaif worked on this PR? https://github.com/Expensify/App/pull/15778

[Julesssss]

Oh yeah, my bad:

• @janicduplessis / Margelo (I'm not sure how this works)
• @aimane-chnaif C+
• @mananjadhav C+

[mrousavy]

For Margelo we can discuss over our Slack channel :)

[lschurr]

Cool @aimane-chnaif and @mananjadhav - please apply to the job: https://www.upwork.com/jobs/~01721757a40a8d7d9c

[mananjadhav]

@lschurr Same session issue here too. Would you please be able to send an invite here too? Thanks for helping out.

[lschurr]

@mananjadhav - I invited you to the job.

[mananjadhav]

Applied @lschurr

[lschurr]

This is paid. Closing.