How to Completely Hide the Status Bar in iOS Using Cordova

Cordova Hide Status Bar

After some long hours of debugging, I finally figured out what the issue was.

In fact, the status bar was hidden, and the white bar we would see is the overlay provided by Framework7, which explains the following:

StatusBar.isVisible // false

Apparently Framework7 is hiding the status bar, but leaving a blank white bar on top of the application, which is a padding.

So to remove the bar, I had to remove the class with-statusbar-overlay from the html tag. And to do so, I added the following to my Javascript file:

document.documentElement.classList.remove('with-statusbar-overlay');

Note that the Javascript fix must be executed before the deviceready event. Otherwise, you will see the home view with the bar, then the bar will disappear. If you put it before the event, the user will never see the bar.

document.documentElement.classList.remove('with-statusbar-overlay');

Dom7(document).on('deviceready', function(){
    // Your code
});

Cordova: How do you hide the status bar on the splash/launch screen?

It is not the full answer that makes Cordova do it automatically. But I went into my .plist file for the iOS build and added:

UIStatusBarHidden = true
UIViewControllerBasedStatusBarAppearance = false

This makes it behave the correct way and is not getting overwritten by Cordova when I do a build so it will work for now.

If anyone finds or knows of a better way to enforce these settings, feel free to post it and I will either update this answer or choose yours next time I notice it. Thank you!

Related Topics