[Android] Change Status Bar colour to match theme (or option to hide it)

Features
1

Currently the status bar colour remains the same colour regardless of which theme you select on Android.

I would like for it to become black/dark gray to match the darker themes in the app.

I have figured out how to do this in code (I think). It seems to work in the emulator.

I also think it might be nice to have an option to hide the status bar altogether.

Something like this? In the global-style.js file.

if(Platform.OS === 'android')
{
	StatusBar.setBackgroundColor('#000000');
	StatusBar.setBarStyle("light-content");
}

This line already exists in the root.js file:

<StatusBar barStyle="dark-content" />

It overrides any changes I make in the global style file.

This may not be the best way to handle it. I haven’t really programmed much in a couple of years, so if there is a better way to handle this, please tell me.

This is how it looks by default:

Before
Before420×864 44.7 KB

And this is how with the changes I made (using the OLED dark theme):

After
After420×864 45 KB

2

Hi @DeadManIV , I’ve actually changed that in a pull request that I’m working on, but if you want to make the change yourself (and hopefully get it merged sooner) then you can change the StatusBar line to

<StatusBar barStyle="default" backgroundColor={theme.raisedBackgroundColor} />

This will make the status bar the same color as the header.

3

@CalebJohn Ohh, that’s a much better way of doing it. Yeah I can take a look at making a pull request tomorrow. Thanks for the code.

4

Although, on the React Native docs, it says that backgroundColor is available on Android only. Will that cause an error for iOS devices, or just only work for android?

StatusBar · React Native https://reactnative.dev/docs/statusbar#__docusaurus

5

That’s a good question, I don’t actually know the answer. I suspect it will be ignored.

6

I’ve been taking a look at some (possibly out of date) iOS screenshots and it seems there’s a bit of an issue with how the bar style is currently implemented.

In OLED dark mode, the colour of the icons is black, but so is the statusbar:

Images taken from here: https://github.com/laurent22/joplin/issues/2694

This is not quite as bad with the dark theme, but it’s still not great:

The “default” value for barStyle is dark for iOS.
(https://reactnative.dev/docs/statusbar - bottom of the page)

So it might be best to have something like this?

    if (Platform.OS === 'ios') {
    	//If theme is light, then status bar icons should be dark
    	if(theme.backgroundColor === '#ffffff') { 
    		barStyle = 'dark-content';
    	}
    	else { //If theme is dark, then status bar icons should be light
    		barStyle = 'light-content';
    	}
    }

And then this:

<StatusBar barStyle={barStyle} backgroundColor={theme.raisedBackgroundColor} />

Do you think this would be okay? There might be a better way of checking which theme is in use, but hopefully the colour issue should be fixed for both iOS and Android.
I can’t test the iOS version though.

Edit: Oh wait, if the default is dark, then we only need to check if it’s not using the light theme on iOS.

Edit 2:

//Default is dark for ios
//If platform is ios and background colour is NOT white, then set icons to be light
if (Platform.OS === 'ios' && theme.backgroundColor !== '#ffffff') {
	barStyle = 'light-content';
}

Edit 3: Unless the iOS statusBar is hidden by default… I need to get up to date screenshots to see how it works currently.

Edit 4: According to the App store page for Joplin, the status bar is shown:

7

There’s no need to do the theme check specific for ios, the behavior should be the same on android. I would suggest adding barStyle to the theme.js because it will change based on theme.backgroundColor. For all current themes I think we would want barStyle to be light-content currently. But you can test that.

<StatusBar barStyle={theme.barStyle} backgroundColor={theme.raisedBackgroundColor} />

And then in globalstyles you can add barStyle.

8

The reason for the check for iOS is that, the status bar is set to whatever the background colour is by default. And I’m not sure that can be changed. So if the background colour is black, the status bar will be set to black as well (as in the OLED dark theme). And the default barStyle for iOS is dark. Meaning dark icons. Meaning that it will be black on black. As in that screenshot I posted.
The default barStyle on Android is light. Meaning light icons. Which I do agree is appropriate for all current themes on Android. So default works fine for Android. But since we can’t control the statusBar colour (using the same API call at least, maybe there’s another way?), I think we have to manually set the barStyle/icon colour for iOS.

But implementing it in the globalStyles file is a good idea.

Sorry if I misunderstood or didn’t explain properly.

9

The mistake is mine, I didn’t catch how the ios app works. That’s annoying. I think the correct solution is adjust the android behavior to match the ios.

<StatusBar barStyle={theme.barStyle} backgroundColor={theme.backgroundColor} />

I still don’t know if setting the backgroundColor will cause IOS to crash though so you will need someone elses support for that.

10

I think it may be possible to have similar behaviour using the NavigatorIOS API

But I tried and failed to figure it out using https://snack.expo.io/
I used that because I don’t have any way to test iOS otherwise.

Regardless of that, I do agree, it’s probably best to have the mobile apps match up.

11

I created a pull request: