[Solved] IOS Status Bar Show automatically after StatusBar.hide();

I am using cordova-plugin-statusbar to control status bar show / hide for certain page.
It is working fine in android but having problem in IOS now.

While i try to use ionic.Platform.fullScreen() to hide the status bar, the status bar will hide first (for less than 1second I think) then show back and a bit overlap with my header.

Suspect

  1. Will any plugin installed will caused this?
  2. Will any config setting will caused this?
  3. I did try use a timeout with 100ms as per below but ends up the statusbar keep flashing there, seem somebody always try to show the statusbar again. Check through my controller there’s no such action…
    $scope.hideStatusBar = function() {
    if ($window.StatusBar && StatusBar.isVisible) {
    StatusBar.hide();
    }
    $timeout($scope.hideStatusBar, 10);
    }
  4. Any others possible?

Thanks if anyone could help to advise.

pass { statusbarPadding: true } to the config variable of IonicModule.forRoot(MyApp, config)

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ModalPage } from '../pages/modal/modal';
import { BugPage } from '../pages/bug/bug';

var config = {
  statusbarPadding: true
}

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModalPage,
    BugPage
  ],
  imports: [
    IonicModule.forRoot(MyApp, config)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModalPage,
    BugPage
  ],
  providers: []
})
export class AppModule {}
1 Like

In IOS, u can try this


You can hide your status bar using native xcode changes like below

In the project setting

General

Tick Hide Status Bar to true at bottom
info.plist

Add new row View-controller based status bar with value no
Updated

Add this line to your config file and rebuild your app

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

Thanks. But I am using Ionic 1, any idea for that?

Thanks. But I need the status bar hide / show in controller.
As some page I need status bar but some not.

This method is to hide the status bar for all right?

Sorry guys. It’s my mistake. There’s a part of my service always show the status bar.
There’s no problem for Status bar plugin.