Btukfyl

I have built phonegap application, it works fine on android and windows.
But for iOS I am facing issue as, status bar contents and page contents are mixed up therefore i unable to tap on the back button provided in header.
Can any body help me about this..?

This is my config.xml file

   <?xml version="1.0" encoding="UTF-8"?>

<widget xmlns   = "http://www.w3.org/ns/widgets"

        xmlns:gap   = "http://phonegap.com/ns/1.0"



        id        = "io.example.com"

        version     = "1.0.2">

    <name>MyAPP</name>



    <description>



    </description>



    <author  email="rakesh@gmail.com">

        Rakesh

    </author>



    <access origin="*"/>





    <content src="index.html" />





    <preference name="target-device" value="universal" />   <!-- all: possible values handset, tablet, or universal -->

    <!-- <preference name="fullscreen" value="true" />  -->          <!-- all: hides the status bar at the top of the screen -->

    <preference name="webviewbounce" value="false" />        <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->

    <preference name="ios-statusbarstyle" value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->

    <preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->

    <preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->

    <preference name="phonegap-version" value="3.7.0" />

    <icon src="icon.png" />



    <icon src="icon-57.png"            gap:platform="ios"        width="57" height="57" />

    <icon src="icon-72.png"            gap:platform="ios"        width="72" height="72" />

    <icon src="icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />

    <icon src="icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />

    <icon src="icon-120.png"           gap:platform="ios"        width="120" height="120" />

    <icon src="icon-76.png"            gap:platform="ios"        width="76" height="76" />

    <icon src="icon-76-2x.png"         gap:platform="ios"        width="152" height="152" />



    <gap:plugin name="com.phonegap.plugin.statusbar" />

    <gap:plugin name="org.apache.cordova.device" />

    <gap:plugin name="org.apache.cordova.dialogs" />

    <gap:plugin name="org.apache.cordova.camera" />

    <gap:splash src="SplashScreenImage.jpg" gap:platform="winphone" />

    <gap:splash src="splash.png" />

    <gap:splash src="screen-iphone-portrait.png"         gap:platform="ios"     width="320" height="480" />

    <gap:splash src="screen-iphone-portrait-2x.png"      gap:platform="ios"     width="640" height="960" />

    <gap:splash src="screen-iphone-portrait-568h-2x.png" gap:platform="ios"     width="640" height="1136" />

    <gap:splash src="screen-ipad-portrait.png"           gap:platform="ios"     width="768" height="1024" />

    <gap:splash src="screen-ipad-landscape.png"          gap:platform="ios"     width="1024" height="768" />



    <gap:config-file platform="ios" parent="CFBundleShortVersionString">

    <string>100</string>

    </gap:config-file>



    <feature name="App">

      <param name="android-package" value="org.apache.cordova.App"/>

    </feature>

    <feature name="http://api.phonegap.com/1.0/network"/>



    <!-- Deprecated plugins element. Remove in 3.0 -->





</widget>

Add these lines to your config.xml file

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

        <preference name="StatusBarBackgroundColor" value="#000000" />

        <preference name="StatusBarStyle" value="lightcontent" />

      <gap:plugin name="com.phonegap.plugin.statusbar" />

The accepted answer from sunil is no longer relevant, the plugin is deprecated.

Use the following in your config.xml

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

<preference name="StatusBarBackgroundColor" value="#000000" />

<preference name="StatusBarStyle" value="lightcontent" />

<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />

If you want to hide the StatusBar totaly you can add two keys into your info.plist which are Booleans:

Status bar is initially hidden - YES



View controller-based status bar appearance - NO

This can be accomplished with the help of the statusbar plugin.
All you need is to install the plugin via the command line phonegap plugin add https://github.com/apache/cordova-plugin-statusbar.git and then add StatusBar.hide(); onDeviceReady event.

Applied @sunil resolution but,

My problem was of "Content Security Policy" on iOS 10

Added below line to index.html resolved the issue:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

For detail usage in codova 6+ now, for more of @sunil's solution, we should use

cordova plugins add -save cordova-plugin-statusbar

For detail usage: https://www.npmjs.com/package/cordova-plugin-statusbar

add these lines in config.xml use this it will fix your issue and status bar get appear:

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



<preference name="StatusBarBackgroundColor" value="#000000"/>



<preference name="StatusBarStyle" value="lightcontent" />