[Solved] How to hide UIStatusBar?

1

Hello!

I’ve been trying to hide this status bar for about 8 hours now and still no luck.

Methods I’ve tried:

  • Added the following in my main controller. This one flickrs the layout on initial load.

    // hide the status bar
    ionic.Platform.fullScreen();

  • Set Key, Value pairs in info.plist

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

which equates to:

Status bar is initially hidden = YES
View controller-based status bar appearance = NO

  • Setting the following in my MainViewController.m

[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade]; and add new method

- (BOOL)prefersStatusBarHidden { return YES; }

  • I’ve tried about 3 different cordova plugins off of github.

I have an open StackOverflow question regarding this issue:

Any help would be appreciated!

2

Try this right after you define your app in your app.js

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the status bar
    if(window.StatusBar) {
      StatusBar.hide();
    }
  });
})
1 Like
3

I tried that, I ended up getting a black screen after the splash screen.

Is this the correct order?

4

Yeah thats correct…hmm, did you create this from the CLI? Obviously you have the status bar plugin installed correct?

5

Pretty much only using the CLI for the build command right now.

I have the plugin that utilizes this ionic.Platform.fullScreen();

Do you have the cordova install cmd for using the StatusBar plugin?

6

The cordova function is :

StatusBar.hide();
7

I have that method in and working, but I still get the initial flicker before it’s hidden.

Should I try hiding the body and then displaying it in the ionic.ready function()? Maybe keep the background the same color as my splash screen?

I really need to get rid of the flicker.

8

Added a bounty on the SO post if anyone’s down to take a gander.

9

If the plugin is giving your trouble, you can always set the app to full screen in Xcode.

But just to be sure, you have installed the status bar plugin?

$ cordova plugin add org.apache.cordova.statusbar
10

How do you do that? I thought that config parameter was supposed to set that up?

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

I definitely have the status bar plugin installed. But it initializes after the splash screen causing a flicker/bounce of my Red top navigation button.

11

What you can do is install the splash screen pluign

 $ cordova plugin add org.apache.cordova.splashscreen

Then do this in your .run function .

.run(function ($ionicPlatform, $timeout) {
    $ionicPlatform.ready(function () {
        // Hide the status bar
        if (window.StatusBar) {
            StatusBar.hide();
            $timeout(function () {
                window.navigator.splashscreen.hide();
            }, 2500);
        }
    });
})
12

That ended up working! Had to use ionic.Platform.fullScreen(); instead of StatusBar.hide() though to get the status bar space to go away, otherwise the bar would be hidden but the 20px would still push my button down.

Thank you so much!

13

Hey I want to hide status bar on landscape mode. I am able to achieve this using directive and ngCordova but problem is that ion-header size is like status bar is still there

image
Screen Shot 2017-01-12 at 9.04.49 PM.png1108×204 31.6 KB 

 function setProviderBarStatus() {
                if (utilityService.getOrientation() === MeteoConst.orientation.landscape) { 
                    $cordovaStatusbar.hide();
                     $cordovaStatusbar.overlaysWebView(false);
                } else{ 
                    $cordovaStatusbar.show();
                     $cordovaStatusbar.overlaysWebView(true);
                }
            }

  /***Device Ready****/
                document.addEventListener("deviceready", function () { 
                    setProviderBarStatus();
                    angular.element($window).bind('orientationchange', function () { 
                        setProviderBarStatus();
                    });
                }, false);
                /****Device Ready****/