Hide StatusBar in Ionic 2

Question

I have build a app using Ionic 2.When i run it in browser,the UI is looking good but as soon as i run in iOS simulator,everything seems bulky.The issue is with Status bar.I need to hide the status bar.I tried with StatusBar from ionic-native,like this-

    import {StatusBar} from 'ionic-native';
constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.hide();
      //StatusBar.styleDefault();
    });

But in reality its not hiding the status bar,instead its just overriding status bar colour with my page header colour.Any solution of hiding status bar.

Answer 1

I am working on ionic3 and hope it will work for ionic 2 also. I was also in the need of same and here is my local setup-

li packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

Now make changes in following files as-

config.xml

<preference name="Fullscreen" value="true" />

Component.ts

StatusBar.overlaysWebView(true);

That worked for me.

Note:- Changes will reflect in simulator or android phone only, not in browser.