[HOLD for payment 2021-12-13] Android - Status bar changes color when the app is loading at launch

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Force close the app
2. Reopen and check the status bar above

Expected Result:

Status bar should not change colors while the app is loading

Actual Result:

Status bar changes colors from grey to white while the app is loading

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.14-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

New.Expensify.mp4

Expensify/Expensify Issue URL:

Issue reported by: Neyaz Ahmad
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1636652626134800

View all open jobs on GitHub

CC @mallenexpensify @Julesssss

[MelvinBot]

Triggered auto assignment to @nkuoch (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mdneyazahmad]

As requested by @isagoico

[kakajann]

Proposal

1. Add new color value to android/app/src/main/res/values/colors.xml

<color name="white">#FAFAFA</color>

2. Add new styles to AppTheme in android/app/src/main/res/values/styles.xml

<item name="android:statusBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>

3. Remove StatusBar animation in here (the second parameter should be false)
   

   App/src/components/CustomStatusBar/index.android.js

   Lines 10 to 11 in 6701446

   	StatusBar.setBarStyle('dark-content', true);
   	StatusBar.setBackgroundColor('transparent', true);

Result

Screen_Recording_20211113-113125_New.Expensify.mp4

[MelvinBot]

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

[trjExpensify]

@mallenexpensify you wanted to be tagged in this issue once created. Anything to add, or can I get this to Upwork? (Popping back on Daily until this is posted and out to contributors)

[Julesssss]

@trjExpensify I've assigned myself as I'd like to review this one and test it on a few different Android versions. @kakajann's proposal looks good to me, so once this is on UpWork please hire @kakajann

[mallenexpensify]

@trjExpensify , please post to Upwork, thanks

[trjExpensify]

Donezo! Upwork job is up here for you @kakajann: https://www.upwork.com/jobs/~01fd7b70aadc2f612c

@mdneyazahmad can you also apply, so I can pay you out the $250 for reporting the issue. 👍

[emonidi]

Proposal

1. Add new color value to android/app/src/main/res/values/colors.xml

<color name="white">#FAFAFA</color>

1. Add new styles to AppTheme in android/app/src/main/res/values/styles.xml

<item name="android:statusBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>

1. Remove StatusBar animation in here (the second parameter should be false)
   

   App/src/components/CustomStatusBar/index.android.js

   Lines 10 to 11 in 6701446

   	StatusBar.setBarStyle('dark-content', true);
   	StatusBar.setBackgroundColor('transparent', true);

Result

Screen_Recording_20211113-113125_New.Expensify.mp4

This solution removes the styling posibility from react layer and next time you want to change the status bar theme/color you will have to fix this on android level which defeats the purpose of using react native. Hardcoding this on a lower layer is just a patch not a solution. Also this will be a huge bottleneck if you ever decide to use darkmode or change the background color of the main body. I don't mean to be critical but I would not accept this solution as a bugfix. It will only open more problems further down the line.

[mdneyazahmad]

@trjExpensify applied on upwork

[kakajann]

This solution removes the styling posibility from react layer and next time you want to change the status bar theme/color you will have to fix this on android level which defeats the purpose of using react native. Hardcoding this on a lower layer is just a patch not a solution. Also this will be a huge bottleneck if you ever decide to use darkmode or change the background color of the main body. I don't mean to be critical but I would not accept this solution as a bugfix. It will only open more problems further down the line.

I don't think it removes any styling possibilities. As mentioned in the issue, the status bar color changes only when you launch the app and it is caused by https://github.com/zoontek/react-native-bootsplash.

So, you'll have to change this

<item name="android:statusBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>

whenever you change the splash screen.

And you can do anything you want to the status bar once the app is mounted. Here's the documentation: https://reactnative.dev/docs/next/statusbar#methods

And I really don't think the react-native is meant to be only Javascript code. You can customize the native codes as well.

[Julesssss]

@emonidi thanks for your comments, but in this case I think the native solution is fine. This status bar UI bug is a common issue in native Android dev, and fixing it here is the simplest solution IMO. We have a lot more control by setting Android styles/themes here, and not every case can be handled at the RN layer -- we often need to make changes to native code.

[emonidi]

@emonidi thanks for your comments, but in this case I think the native solution is fine. This status bar UI bug is a common issue in native Android dev, and fixing it here is the simplest solution IMO. We have a lot more control by setting Android styles/themes here, and not every case can be handled at the RN layer -- we often need to make changes to native code.

After looking at it deeper I realized what the problem is and my criticism was out of place. @kakajann you are right this in that case is possibly the best solution.

[kakajann]

@Julesssss PR is ready to review

[Julesssss]

Merged, awaiting payment.

[kakajann]

Reminder)

[Julesssss]

Hi @kakajann, sorry but I now realize I set the payment date to 7 days after the merge, instead of deployment (which happened 3 days ago). Resetting the timer.

[Julesssss]

Actally, we have a bot for this now ❤️

[kakajann]

Reminding the Upwork again

[trjExpensify]

Paid 👍

[botify]

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

• Fix the android status bar color change on app launch #6387

If no regressions arise, payment will be issued on 2021-12-13. 🎊