Hide StatusBar and fullscreen with Ionic 2 and Cordova

Resume

In some cases, we want to hide the status bar while developing our app. Here we will show you how can we hide the status bar with Ionic 2.

Headers

To hide status bar, we need to import the following libraries.

import { Platfrom, App } from 'ionic-angular';
import { StatusBAr } from 'ionic-native';

Hide

We can add these codes to hide the status bar in our constructor.

constructor(private platform: Platform){
    this.platform.ready().then(() => {
        StatusBar.hide();
        document.addEventListener('resume',()=>{
            StatusBar.hide();
        });
    });
}

Because in some cases, when we switch to another app, and switch back to our app, the status back comes back. So I would suggest you to add an EventListener to hide StatusBar when resuming.

Until now, it seems that the native Ionic 2 resume listener (platform.pause.subscribe(()=>{ /* TODO */});) hasn’t been implemented. I would recommend you to use native Ionic 2 event listener

Cordova plugin

Before using fullscreen, you should launch this command in you Terminal to install Cordova’s fullscreen plugin

cordova plugin add cordova-plugin-fullscreen

Fullscreen in XML

After installing the Cordova plugin, insert <preference name="Fullscreen" value="true" /> to you config.xml in <platform></platform>

<platform name="android">
...
<preference name="Fullscreen" value="true" />
...
</platform>