How do I hide the iOS7 status bar when returning from PhoneGap Camera API?

Question

I've come up across an issue whilst using Cordova/Phonegap to build an app for iOS7. I cannot keep the iOS7 status bar hidden very well.

Initially I went into the plist in Xcode and added all the correct settings to make the status bar invisible just like in this solution Cannot hide status bar in iOS7.

This works great until I hit a snag with the Cordova CAMERA API. When I get my app to go to the Camera Roll to pick an image (then insert it into the screen). After selecting the image and returning to the app the status bar is visible again.

I've installed the status bar cordova plugin and I'm trying to hide the status bar as soon as it returns back from the camera device to my app. Surprise - it does not work! However I can enable a button which calls a function to hide the status bar on click - but I want it to happen automatically.

I have inserted my code below:

<div id="Ccamera-fun" data-role="page" data-title="Camera Fun Activity">
  <div data-role="header" data-theme="e">
      <a href="#" data-rel="back" data-theme="h" data-icon="arrow-l" data-direction="reverse">Back</a>
      <h1>3.5 years - 4.5 years</h1>
  </div>
  <div data-role="content" data-theme="a" class="content">
   <h1>Camera Fun</h1>
   <div id="imageContainer"></div>
   <p>Use your photos and ask your child to describe one in detail. Use your photos as picture talks where your child can share their memories and recall events before or after the photo was taken. <strong>Together you could invent their own story.</strong></p>
    <p>Use the buttons below to take a picture with your phone or select an image from your phone&rsquo;s Photo Library. Once you have selected a photo, it will be embedded into the top of this screen.</p>
<script type="text/javascript" charset="utf-8">
    function hideStatus() {
     StatusBar.hide(); 
     navigator.notification.alert("status bar hidden");
    }

    function takePhoto() {
        navigator.camera.getPicture(onCameraSuccess,                            
        onCameraError,
        {quality: 50,
         destinationType : Camera.DestinationType.FILE_URI});
    }
    function onCameraSuccess(imageURL) {
        //HIDE STATUS BAR IMAGE
        StatusBar.hide();
        //GET A HANDLE TO THE IMAGE CONTAINER DIV
        ic = document.getElementById('imageContainer');
        //THEN WRITE AN IMAGE TAG OUT TO THE DIV USING THE URL WE RECEIVED FROM CAMERA APPLICATION
        ic.innerHTML = '<img src="' + imageURL + '" width="100%" />';
        navigator.notification.alert("onCameraSuccess:" + imageURL);
    }
    function onCameraError(e) {
        console.log(e);
        navigator.notification.alert("onCameraError:" + e);
    }
    function fromAlbum() {
        navigator.camera.getPicture(onLibrarySuccess,                            
        onLibraryError,
        {quality: 50,
         sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
         allowEdit : true,
         destinationType : Camera.DestinationType.FILE_URI});
    }
    function onLibrarySuccess(imageURL) {
        //GET A HANDLE TO THE IMAGE CONTAINER DIV
        ic = document.getElementById('imageContainer');
        //THEN WRITE AN IMAGE TAG OUT TO THE DIV USING THE URL WE RECEIVED FROM CAMERA APPLICATION
        ic.innerHTML = '<img src="' + imageURL + '" width="100%" />';
        navigator.notification.alert("onCameraSuccess:" + imageURL);
    }
    function onLibraryError(e) {
        console.log(e);
        navigator.notification.alert("onCameraError:" + e);
    }
</script>
   <button onclick="takePhoto();" data-theme="h">Take a Picture</button>
   <button onclick="fromAlbum();" data-theme="h">Choose a Picture</button>
   <button onclick="hideStatus();" data-theme="h">Hide status bar</button>
 </p>
  </div>
</div>

I'd appreciate if anyone could tell me where I am going wrong with this.

Thanks

Answer 1

This is a phonegap bug, please refer to CB-5265:

You can fix this by adding

 [[UIApplication sharedApplication] setStatusBarHidden:YES];

to the end of imagePickerController:didFinishPickingMediaWithInfo: which resides in CDVCamera.m

However, the above code is just a quick fix for you, didn't consider it in all-round, you should test it for yourself.

I hope this could help you!

Answer 2

Imnbeyond's solution didn't work for me. I had to go into my plist, change

View controller-based status bar appearance = YES

And then controll the status bar in my view controllers by overriding the method prefersStatusBarHidden in each,

-(BOOL)prefersStatusBarHidden{
    return YES;
}