iOS 7 Status bar with Phonegap

please, install that plugin for phonegap: https://build.phonegap.com/plugins/505

And use the correct setting like below, to control the overlay of the webview:

<preference name="StatusBarOverlaysWebView" value="false" />

For me, with Phonegap 3.3.0 it works.

More information, on the Github project page: https://github.com/phonegap-build/StatusBarPlugin


In addition to Ludwig Kristoffersson's resize fix, I recommend changing status bar color:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    self.view.backgroundColor = [UIColor blackColor];
}
-(UIStatusBarStyle)preferredStatusBarStyle{
    return UIStatusBarStyleLightContent;
}

I found an answer on another thread, but I'll answer the question in case someone else wonders.

Just replace the viewWillAppear in MainViewController.m with this:

- (void)viewWillAppear:(BOOL)animated {
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

To hide statusbar, add the following code in the file MainViewController.m under the function -(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}