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

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

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

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

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