How to completely hide the status bar in iOS using Cordova?

Question

I want to have no status bar for the Cordova app I am developing. I am nearly there, the status bar doesn't show on the splash screen. However on the first page that loads you see a flash of the status bar, before it gets hidden.

I have checked the "hide status bar" checkbox in Xcode.

I have added the cordova-plugin-statusbar plugin, and on the deviceready callback, I'm calling StatusBar.hide().

However when the splash image disappears and the first page is being rendered there is a flash of status bar prior to the page being display. It is only for a split second but looks awful.

Anybody know how the status bar can be hidden completely, without flashing up before being hidden?

Hertford

Answer 1

Original Answer

Although I'm answering this question very late but after one full day of the search, I got this working simply so I would like to share it with others.

According to the docs (and like jcesarmobile answered):

Hiding at startup

During runtime you can use the StatusBar.hide function below, but if you want the StatusBar to be hidden at app startup, you must modify your app's Info.plist file.

Add/edit these two attributes if not present. Set "Status bar is initially hidden" to "YES" and set "View controller-based status bar appearance" to "NO". If you edit it manually without Xcode, the keys and values are:

This requires you to modify your app's info.plist file inside platforms/ios/<app-name>/<app-name>-Info.plist file to add the following lines:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

But that is not recommended because this will require you to save that change which might get overwritten after the build process.

(Please see the Update 2 from here if you are using the latest Cordova CLI)

So as the clean alternative you should use cordova-custom-config. According to docs:

Why should I use it?

While some platform preferences can be set via Cordova/Phonegap in the config.xml, many (especially ones related to newer platform releases) cannot. One solution is to manually edit the configuration files in the platforms/ directory, however this is not maintainable across multiple development machines or a CI environment where subsequent build operations may overwrite your changes.

This plugin attempts to address this gap by allowing additional platform-specific preferences to be set after the prepare operation has completed, allowing either preferences set by Cordova to be overridden or other unspecified preferences to be set. Since the custom preferences are entered into the config.xml, they can be committed to version control and therefore applied across multiple development machines, CI environments, and maintained between builds or even if a platform is removed and re-added.

Now, all you have to do is to run the following command for your Cordova app:

cordova plugin add cordova-custom-config --save

And add this to your config.xml file under <platform name="ios"> block:

Please refer cordova-custom-config (version > 5) plugin for more information

<custom-config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
    <true/>
</custom-config-file>
<custom-config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
    <false/>
</custom-config-file>

Update 1 (20th Feb 2018)

If you are using cordova-custom-config plugin version < 5 then replace custom-config-file tag with config-file.

https://github.com/dpa99c/cordova-custom-config#changes-in-cordova-custom-config5

Update 2 (6th July 2018)

Since Cordova CLI 6, you now don't require to install the cordova-custom-config plugin for altering the platforms/ios/*-info.plist file. Cordova CLI has the inbuilt support of it using edit-config tag. So now you can simply add the following in your config.xml under <platform name="ios">:

<edit-config file="*-Info.plist" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

This change might fail when you build your Cordova application because it will conflict with platform/ios/ios.json file. To fix this you have two options (reference):

Option 1 (Overkill but working)

Re-add the iOS platform:

ionic cordova platform remove ios
ionic cordova platform add ios

https://issues.apache.org/jira/browse/CB-13564

Option 2 (Recommended but not working for me)

Use platform/ios/ios.json instead of *-Info.plist in the edit-config file. So the final config you have to add:

<edit-config file="platforms/ios/ios.json" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="platforms/ios/ios.json" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

And then do:

cordova prepare ios

Deanedeaner

This is the best solution to maintain a reproducible build! – Preposition

Where do these get set in Xcode. I'm not getting the status bar to hide. I put the above config in side <platform name="ios"> – Resign

Yes, you have to put the above config inside the <platform name="ios">. That should work. Which version of cordova, iOS you are using? Also, did you installed cordova-custom-config plugin? – Deanedeaner

cordova-custom-config is the way to go, works like a charm! Thanks a lot, as I've been manually editing info.plist for several months now. – Icicle

Note that the cordova-custom-config is not allowed when using Phonegap Build. – Straka

Using this method, I end up with a white bar on top of the view. Anyone getting this issue? – Phrenology

I had the same issue when I upgraded to latest version. Please try downgrade to just the lower version. I think I have already raised an issue – Deanedeaner

Note that the platform="ios" attribute is not required in the config-file tag if it is already inside the <platform name="ios"> block. – Zelda

Oh! Good to know! – Deanedeaner

Worked today, fyi – Psychophysics

Answer 2

EDIT:

Since Cordova CLI 6.5.0 you can use edit-config tag to write in the info.plist without a plugin. This should hide the statusbar at startup

<edit-config file="*-Info.plist" target="UIStatusBarHidden" mode="merge">
    <true/>
</edit-config>
<edit-config file="*-Info.plist" target="UIViewControllerBasedStatusBarAppearance" mode="merge">
    <false/>
</edit-config>

Hiding at startup

During runtime you can use the StatusBar.hide function below, but if you want the StatusBar to be hidden at app startup, you must modify your app's Info.plist file.

Add/edit these two attributes if not present. Set "Status bar is initially hidden" to "YES" and set "View controller-based status bar appearance" to "NO". If you edit it manually without Xcode, the keys and values are:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

https://github.com/apache/cordova-plugin-statusbar

Valentinevalentino

The latter setting did the trick I think. I did read this but assumed (incorrectly) that this was the equivalent of checking the hide status bar checkbox in Xcode. Apparently not. – Hertford

There are 2 settings there, the first one (UIStatusBarHidden) is equivalent of checking the hide status bar checkbox, the second (UIViewControllerBasedStatusBarAppearance) is to make the app control the status bar instead of letting each view controller decide. – Valentinevalentino

Answer 3

This way worked to me:

On your mac or VM xcode, select TARGETS->Your app

Then on INFO menu, on CUSTOM iOS TARGET PROPERTIES, add this NEW properties:

Statusbar is initially hidden -> Then set the value to YES.

View controller-based status bar appearance -> Then set the value to NO

Build and you should have no statusbar.

printscreen: http://prntscr.com/fg0jtf

Outflank

Answer 4

I was also having the same problem for android. It was solved by simply calling the below statusBar() function from the 'appCtrl' init() function.

Hope it will work for iOS.

 $rootScope.statusBar = function(){
        document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    //console.log(StatusBar);
    StatusBar.hide();
}

Beige