Is it possible to set Android and iOS status and navigation bars to translucent?

[antonioberetini]

Is it possible to make status bar on both Android and iOS use translucent setting to allow for customizations? Having a black status and navigation bar looks very broken compared to native apps.

[jcesarmobile]

On Android you can set the color of the status bar, and also set it to overlay the WebView, the WebView becomes full screen and the top part is show behind the status bar, which becomes transparent except for the text/icons.
iOS always behaves as the android overlay, the WebView is always full screen and the status bar is transparent except for the text/icons.

There are no navigation bars on Capacitor, so not sure what do you mean by that.

[antonioberetini]

I think this might help, here is an example of iOS and Android screens of the same app. The goal is to take control of both navigation bar and the status bar so that we can make the app look unified on both platforms. Navigation bar on iOS works as expected, where on Android it's just a black bar. Status bar on the other hand is just black on both, optimally I would like both status bars to inherit header styling and show os characters as an overlay.

[jcesarmobile]

Ah, yeah, I understand you now. On iOS the navigation bar is a different thing, the gesture bar is called “home indicator”.

Capacitor doesn’t have any API for the android navigation bar, but you could create a plugin that uses the native APIs that allow to hide or change its color. iOS doesn’t have any APIs for the home indicator (as far as I know).

For the status bar you have the status bar plugin, as I said, you can set the color or make it overlay the webview and I think that’s the effect you want.
But on iOS the status bar is transparent, not sure why your app shows a black bar, that’s not added by capacitor.

[antonioberetini]

iOS version is actually just our app added to the home screen as a PWA. I’ll bundle it via capacitor and see how that works. So to recap iOS should work as expected and for Android we would need a custom plug-in for the navigation part.