capacitor-plugins
capacitor-plugins copied to clipboard
status-bar, android: hide leaves a black bar
Bug Report
Plugin(s)
@capacitor/status-bar@next
Capacitor Version
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 2.4.7
@capacitor/core: 2.4.7
@capacitor/android: 2.4.7
@capacitor/ios: 2.4.7
Installed Dependencies:
@capacitor/cli: 3.0.0-rc.0
@capacitor/android: 3.0.0-rc.0
@capacitor/core: 3.0.0-rc.0
@capacitor/ios: 3.0.0-rc.0
[success] iOS looking great! 👌
[success] Android looking great! 👌
Platform(s)
- android
Current Behavior
a black bar appears where the notch should be:
Also, if you go off the app and back, the clock shows back again.
Expected Behavior
StatusBar.hide()
should behave the same as iOs: take over the whole screen with the WebView.
Code Reproduction
import {StatusBar} from '@capacitor/status-bar';
StatusBar.hide();
I can reproduce when simulating the screen cutout, but works fine when not simulating it, I don't have any real device with cutout to test. I also see the same behavior in native apps such as Camera, so not sure if it's a bug on the cutout simulation or an Android bug.
On my Pixel 4A I get the exact same behaviour, so it's not a simulation bug. I'm wondering if it has something to do with the layout of WebView on the Window, because I also tried to use Cordova's AndroidFullScreen
plugin (which works fine on Cordova), but got the same result.
argh. Found the problem. It is with the window. One needs to set layoutInDisplayCutoutMode
on BridgeActivity.onCreate
. I'll send a patch to the android repo.
I'm facing the same issue
Found the solution: https://github.com/hugotomazi/navigation-bar
Apparently Navigation Bar is separate from the Status Bar. Seems to me that the Capacitor people should just consolidate them into one, but here we are...