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

Question

I am trying to remove the status bar across my app with Cordova. I have tried <preference name="Fullscreen" value="true" /> but it looks like in iOS7 that does not work. (And iOS6 it left a black gap instead.)

I have since been using the StatusBar plugin and just firing StatusBar.hide(); at device ready, but this will not hide the status bar on the launch screen. Is there a way to hide the status bar across the entire app in iOS7 and not have to rewrite it each time I do a cordova build? Thank you.

Bisulfate

Answer 1

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!

Bisulfate

Answer 2

Status Bar

To remove the status bar in iOS 7 use the following entries in the plist file.

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

In the configuration on XCode the following achieves the same

set Status bar is initially hidden = YES
add row: View controller-based status bar appearance = NO

Mallina

Answer 3

Don't waste your time just do simple at the splash time/launch time status bar hide

Seedtime

I don't understand why this gets a downvote. Worked perfectly for me. 1 click and it's done. – Medina

@Timo This solution is the same as setting UIStatusBarHidden to true in plist file. U can find they are synchronous. – Insuppressible

Good to know this is a GUI option. I suggest you edit your answer to remove referring to time wasting. – Melitta

Answer 4

Updated:

We can also inject the info.plist directly from config.xml.

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

The first config will hide the status bar on the splash/lunch screen. The second config will hide the status bar after the splash/lunch screen.

Deeprooted

Its works for me but I used it like this. If you want to edit the config.xml file and inject it as marge. I used this and it works for me. <edit-config file="*-Info.plist" mode="merge" target="UIStatusBarHidden"><true /></edit-config><edit-config file="*-Info.plist" mode="merge"target="UIViewControllerBasedStatusBarAppearance"><false /></edit-config> – Clabber

Answer 5

Have you seen the following:

http://ionicframework.com/tutorials/fullscreen-apps/

First, we need to note this only works on Cordova (recommend v3.3.1) or another native UIWebView wrapper. If we use Cordova, we will need to install one plugin:

$ cordova plugin add org.apache.cordova.statusbar

Then, we will use Ionic's Platform service to listen for the device ready event and remove the status bar:

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope, Platform) {
  Platform.ready(function() {
    // hide the status bar using the StatusBar plugin
    StatusBar.hide();
  });
});

Attis

Yep, doing that. Just using Backbone instead of Iconic/Angular. The launch screen loads before deviceready, so the status bar only hides after that screen. – Bisulfate

I found this only set the text to white, and the battery still showed – Quietly

Answer 6

I used it to remove the status bar from the ios application with Ionic & Angular FileName: config.xml

step1: add code in XML file

step2: import the plugin and implement it on your js file.

<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>

</platform>

for your .js/.ts file

Hiding and showing StatuBar

I used this plugin Link: https://github.com/apache/cordova-plugin-statusbar

import { StatusBar } from '@ionic-native/status-bar/ngx';

constructor( private statusBar: StatusBar ){}

this.StatusBar.overlaysWebView(true);

this.StatusBar.hide();

Clabber