Capacitor: [Feature request]: StatusBar.setBackgroundColor(color)

[pwespi]

For now, the StatusBar Plugin has only the method setStyle(options), where options is either {style: 'DARK'} or {style: 'LIGHT'}.

I would like to have a method setBackgroundColor(color), where color is a hex string (as in cordova-plugin-statusbar).

[jcesarmobile]

This is not really supported on iOS, what cordova-plugin-statusbar does it to add a fake view and set it's color. We wanted to avoid this kind of hacks in Capacitor.

For now you can use cordova-plugin-statusbar as it's compatible with Capacitor.

@mlynch thoughts about implementing this just for Android?

[pwespi]

Thanks for the feedback. I was actually mainly thinking about Android. As many Android apps have a colored status bar (even PWAs on Android have a colored status bar via the theme_color), I think this would be used a lot.

[mlynch]

Added this for Android, also fixed a few things with the statusbar plugin, and made show/hide with animation work for iOS

[TrayserCassa]

Well @mlynch ... If this Method is only for Android, why are you not document that. I am sitting here on iOS place there a Hex string, doesn't work...
Place red --> Doesn't work
Place Red --> Doesn't work
Place RED --> Doesn't work
Place danger --> Doesn't work

Sorry but that is in my opinion why I would sad Ionic / capacitor is not good documented... Or am I to stupid to find that secret documentation?

core-plugin-definitions.d.ts:

export interface StatusBarPlugin extends Plugin {
/*
* Set the current style of the status bar
*/
setStyle(options: StatusBarStyleOptions): Promise;
/*
* Set the background color of the status bar
/
setBackgroundColor(options: StatusBarBackgroundColorOptions): Promise;
/*
* Show the status bar
/
show(): Promise;
/*
* Hide the status bar
*/
hide(): Promise;
}

[jcesarmobile]

Documentation is automatically generated from the typescript definitions, so it's not good at saying which methods are supported by platform and which ones aren't, we should improve that.

Anyway, it should return an error when it's not supported.

[TrayserCassa]

@jcesarmobile

I understand that, I am happy that we don't write Interfaces for developer, so I don't need to document many things, only wired code..
But if you want to be a good Framework that programmers like me (apprentice in third year) can understand, then you need to write a better documentation.

Anyway, this was the output in Xcode:

⚡️ [log] - Ionic Native: deviceready event fired after 437 ms
⚡️ To Native -> StatusBar setStyle 122486471
⚡️ To Native -> StatusBar setBackgroundColor 122486472
⚡️ To Native -> StatusBar show 122486473
⚡️ To Native -> SplashScreen hide 122486474
⚡️ TO JS {}
⚡️ TO JS {}
ERROR MESSAGE: {"errorMessage":"","message":"not implemented"}
⚡️ TO JS {}
⚡️ [log] - {"errorMessage":"","message":"not implemented"}
⚡️ WebView loaded

This is also not really helpful.. If I want to implement a bunch of Native code and commit that and test that, I see maybe one error or many errors.
But where? Or which plugin?

[jcesarmobile]

I agree with you, we should get better docs about which methods are supported and which ones aren't.

About the error, if you use promises, in the plugin call you'll get a .then that is called if everything went ok and a .catch were you can get the errors like the one you mention.
If you use async await then you'll have a try - catch that catches the error, so you'll now which method caused the error as you write the code for the catch.

I would recommend using Safari/Chrome for debugging as they show you the promises and it's easier to know which one had the error. As you say, Xcode is not very helpful with that.

[voidale]

My fix for this is to add div that covers the notch and you can set any background for it:

.app-navbar-notch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: env(safe-area-inset-top);
}

[hamidb80]

@mlynch you shuold give an example (at least) for every methods in a class, plugin,...

I waste my time only for being not aware of what the type of color ( hexa, name,...) is.

[Lhari]

Looking at https://capacitorjs.com/docs/cordova/known-incompatible-plugins the cordova-plugin-statusbar is no longer supported by Capacitor, because Capacitor has it's own, however, it is still not documented how you can get the status bar to behave as one would wish for. No in depth explanation on types and what values are expected makes capacitor really hard to work with, as the example here, with setBackgroundColor expecting a string with no defintion of format

[esai256]

I added a short sentence about setBackgroundColor not being supported for iOS, would be nice if someone could approve it :)
https://github.com/ionic-team/capacitor-site/pull/74