feat: System Bars Plugin #8180
feat: System Bars Plugin #8180
Conversation
|
This looks great, what more is needed before merge? |
|
I am noticing that currently, without this plugin, the safe area and the status bar are working great on iOS -- it even changes the status bar text depending on light or dark mode when I toggle dark on the root: I am noticing this PR includes some styling on the status bar. Is there any way to have Android act like the iOS and have it "just work"? I also want to make sure this won't break what we have working fine on iOS. |
I am not sure if you have a correct understanding of this "inject css variables" thing. It doesn't inject |
|
I'd like to add that as of November 1st (actually earlier, but Google granted an extension to developers that depend on older SDKs) no one will be able to publish a release to the play store if they're not supporting edge-to-edge. So I think this should be given the utmost priority by the Capacitor team |
I just discovered all of this was only a problem with an Android Medium emulator. I just tried the Pixel 9 emulator and safe area is working great without any plugins. |
|
Hello everyone! Stay tuned, I'm on the verge of getting this past the finish line, The plan is to make some final changes and wrap this up this week. |
By "just work", you're expecting just the default status bar, without the fullscreen / transparent status bar style, correct? |
|
I'm curious which approach you've chosen to go with. I'm still advocating for going the native route. To demonstrate how that would work I made a simple demo proof of concept. Mind you that I've created this in like 5 minutes, so it's still not perfect, but you will get the main idea. Demo: https://github.com/tafelnl/capacitor-demo I also commented some todos which I haven't done because it's a proof of concept. |
As of right now on iOS, without this plugin, the status bar is transparent and switches the text color automatically to the right color when I set the root html class to dark mode and light mode. Not sure how this is working. |
theproducer
requested review from
ItsChaceD,
OS-pedrogustavobilro,
alexgerardojacinto,
andredestro,
jcesarmobile and
markemer
| } | ||
| ``` | ||
|
|
||
| To disable the inset variable injections, set the configuration setting `enableInsets` to `false`. |
There was a problem hiding this comment.
The code doesn't do what this documentation suggests. IMO the documentation suggests that this config only toggles the injection of fallback variables. But in reality, it disables all of the logic. Meaning that on webview version < m140 the insets will be incorrect/broken.
That brings me to another issue; what will be done with the 'legacy' code related to insets. For example the adjustMarginsForEdgeToEdge logic
| String style = getConfig().getString("style", STYLE_DEFAULT).toUpperCase(); | ||
| boolean hidden = getConfig().getBoolean("hidden", false); | ||
|
|
||
| if (enableInsets) { |
There was a problem hiding this comment.
It might be possible to look at the viewport-fit=cover meta tag here. I think that would be the cleanest solution, as that is the official way of a developer telling the webview/browser "I'll handle the safe area insets"
There was a problem hiding this comment.
And if we decide not to do that, I think it should be very clearly stated in the docs that a developer should always handle the safe area insets when targeting the Android platform
This PR introduces a new core plugin, System Bars, designed to be a modern take on the Status Bar plugin, managing Android System Bars, the iOS status bar, and fix issues related to broken safe area insets on Android.