cordova-plugin-statusbar on phonegap-version cli-5.2.0 ignoring StatusBarOverlaysWebView

  • 1
  • Problem
  • Updated 5 years ago
  • Acknowledged
Hello,

I'm using the plugin cordova-plugin-statusbar and am attempting to set the StatusBarOverlaysWebView to false so the status bar does not overlay the webview but I can't get it to work:


<gap:plugin name="cordova-plugin-statusbar" source="npm" version="1.0.1" />


with phonegap version cli-5.2.0 and setting the StatusBarOverlaysWebView to false
<preference name="StatusBarOverlaysWebView" value="false" />

PhoneGap Build produces the following config.xml in the generated .ipa file which appears to include 2 settings for StatusBarOverlaysWebView. One with my set preference and the other with StatusBarOverlaysWebView = true.

Is this a bug or am I missing something?

thanks in advance


<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
<name>
Hello Cordova
</name>
<description>
A sample Apache Cordova application that responds to the deviceready
event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="android-minSdkVersion" value="15" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="android-build-tool" value="gradle" />
<preference name="deployment-target" value="8.0" />
<preference name="SplashScreen" value="screen" />
<preference name="KeepRunning" value="True" />
<preference name="ShowTitle" value="True" />
<preference name="InAppBrowserStorageEnabled" value="True" />
<preference name="SuppressesIncrementalRendering" value="False" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="BackgroundColor" value="0x000000" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#008102" />
<preference name="StatusBarStyle" value="lightcontent" />
<content src="index.html" />
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<preference name="CameraUsesGeolocation" value="false" />
<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature>
<feature name="Compass">
<param name="ios-package" value="CDVCompass" />
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" />
<param name="onload" value="true" />
</feature>
<preference name="StatusBarOverlaysWebView" value="true" />
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<feature name="Keyboard">
<param name="ios-package" onload="true" value="IonicKeyboard" />
</feature>
<feature name="FacebookConnectPlugin">
<param name="ios-package" value="FacebookConnectPlugin" />
<param name="onload" value="true" />
</feature>
<plugin name="FacebookConnectPlugin" value="FacebookConnectPlugin" />
<access origin="https://m.facebook.com" />
<access origin="https://graph.facebook.com" />
<access origin="https://api.facebook.com" />
<access origin="https://*.fbcdn.net" />
<access origin="https://*.akamaihd.net" />
</widget>
Photo of Francesco Fiorenza

Francesco Fiorenza

  • 8 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1.
You may want to remove all those feature elements, as they are deprecated for PGB3.x and cli-5.x
Instead, you should use the plugins for each of those functions.

2.
Also, you could try
StatusBar.overlaysWebView(false);
upon receiving the 'deviceready' event.

3.
BTW, be aware that <plugin .... is invalid under PGB. You should use <gap:plugin ...> as described in the Phonegap Build Plugins documentation.
Next, you are missing the whitelist plugin, which is required for the access and allow-intent rules to take effect. See the Phonegap Build Whitelisting documentation.
Finally, where in your config did you specify cordova-plugin-statusbar?
Photo of Francesco Fiorenza

Francesco Fiorenza

  • 8 Posts
  • 0 Reply Likes
Hi Petra,

thanks for your reply :-) The config.xml I listed is the one that is produced by PhoneGap Build and resides in the output .ipa file for an iOS build.

The PhoneGap Build generated output config.xml file has the following:


<preference name="StatusBarOverlaysWebView" value="false" />
...
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" />
<param name="onload" value="true" />
</feature>
<preference name="StatusBarOverlaysWebView" value="true" />


It appears PhoneGap build isn't parsing the preference values set in my PhoneGap Build config.xml correctly and instead is outputting the default values for the cordova-plugin-statusbar plugin and hence listing the preference setting for StatusBarOverlaysWebView twice.

The output PhoneGap Build config.xml file in the .ipa package automatically includes the feature tag.

Using the other plugins org.apache.cordova.statusbar and com.phonegap.plugin.statusbar makes no difference.

If I can't set the StatusBarOverlaysWebView via config I'll definitely use your suggestion in point 2.

Does this seem like a bug with PhoneGap Build?

Thanks in advance

Here is my config.xml that I upload to PhoneGap Build (XXXX is blanked out text):


<?xml version='1.0' encoding='utf-8'?>
<widget
id="XXXX"
version="1.0.1"
android-versionCode="20"
defaultlocale="en-US"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">

<name>XXXX</name>
<description>XXXX/description>
<author email="XXXX" href="XXXX">XXXX</author>
<content src="index.html" />
<access origin="*" subdomains="true" />

<preference name="phonegap-version" value="cli-5.2.0" />

<gap:platform name="ios" />
<gap:platform name="android" />

<!-- Android SDK Version -->
<preference name="android-minSdkVersion" value="15" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="android-build-tool" value="gradle" />

<!-- iOS Version -->
<preference name="deployment-target" value="8.0" />

<!-- PREFERENCES -->
<preference name="SplashScreen" value="screen" />
<preference name="KeepRunning" value="True" />
<preference name="ShowTitle" value="True" />
<preference name="InAppBrowserStorageEnabled" value="True" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="BackgroundColor" value="0x000000" />

<!--IOS SPECIFIC PREFERENCES -->
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#008102" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="DisallowOverscroll" value="true"/>
<preference name="HideKeyboardFormAccessoryBar" value="true"/>
<preference name="EnableViewportScale" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="true"/>
<preference name="AllowInlineMediaPlayback" value="true"/>
<preference name="BackupWebStorage" value="local"/>
<preference name="TopActivityIndicator" value="white"/>
<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
<preference name="SuppressesIncrementalRendering" value="true"/>
<preference name="GapBetweenPages" value="0"/>
<preference name="PageLength" value="0"/>
<preference name="PaginationBreakingMode" value="page"/>
<preference name="PaginationMode" value="unpaginated"/>
<preference name="UIWebViewDecelerationSpeed" value="fast" />

<!--ANDROID SPECIFIC PREFERENCES -->

<!-- PLUGINS -->

<!-- Core plugins -->
<gap:plugin name="org.apache.cordova.splashscreen" source="pgb" version="0.3.4" />
<gap:plugin name="org.apache.cordova.camera" source="pgb" version="0.3.2" />
<gap:plugin name="org.apache.cordova.device" source="pgb" version="0.2.12" />
<gap:plugin name="org.apache.cordova.device-orientation" source="pgb" version="0.3.9" />

<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<gap:plugin name="org.crosswalk.engine" source="pgb" version="1.3.0" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" version="1.0.0" />
<gap:plugin name="cordova-plugin-statusbar" source="npm" version="1.0.1" />
<gap:plugin name="cordova-plugin-inappbrowser" source="npm" version="1.0.1" />
<gap:plugin name="ionic-plugin-keyboard" source="npm" version="1.0.7" />

<gap:plugin name="cordova-plugin-customurlscheme" source="npm" version="4.0.0" >
<param name="URL_SCHEME" value="fitgorillas" />
</gap:plugin>

<gap:plugin name="cordova-plugin-facebook4" source="npm" version="1.3.0" >
<param name="APP_ID" value="XXXXX" />
<param name="APP_NAME" value="XXXXX" />
</gap:plugin>

<!-- Keyboard setting for Android -->
<gap:config-file platform="android" parent="/manifest/application">
<activity android:windowSoftInputMode="adjustResize" />
</gap:config-file>

<!-- Icons -->
<icon src="icon.png" />

<!-- IOS -->
<!-- iPhone 6 / 6+ -->
<icon src="resources/icons/icon-60@3x.png" gap:platform="ios" width="180" height="180" />

<!-- iPhone / iPod Touch -->
<icon src="resources/icons/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="resources/icons/icon-60@2x.png" gap:platform="ios" width="120" height="120" />

<!-- iPad -->
<icon src="resources/icons/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="resources/icons/Icon-152.png" gap:platform="ios" width="152" height="152" />

<!-- Settings Icon -->
<icon src="resources/icons/Icon-29.png" gap:platform="ios" width="29" height="29" />
<icon src="resources/icons/Icon-58.png" gap:platform="ios" width="58" height="58" />

<!-- Spotlight Icon -->
<icon src="resources/icons/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="resources/icons/Icon-80.png" gap:platform="ios" width="80" height="80" />

<!-- iPhone / iPod Touch -->
<icon src="resources/icons/Icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="resources/icons/Icon-114.png" gap:platform="ios" width="114" height="114" />

<!-- iPad -->
<icon src="resources/icons/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="resources/icons/Icon-144.png" gap:platform="ios" width="144" height="144" />

<!-- iPad Spotlight and Settings Icon -->
<icon src="resources/icons/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="resources/icons/Icon-100.png" gap:platform="ios" width="100" height="100" />

<!-- ANDROID -->
<icon density="ldpi" src="resources/icons/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon density="mdpi" src="resources/icons/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon density="hdpi" src="resources/icons/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon density="xhdpi" src="resources/icons/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />

<!-- SPLASH -->
<gap:splash src="splash.png" />

<!-- iPhone and iPod touch -->
<gap:splash src="resources/icons/IOS-4-splash.png" gap:platform="ios" width="640" height="960" />

<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="resources/icons/IOS-5-splash.png" gap:platform="ios" width="640" height="1136" />

<!-- iPhone 6 -->
<gap:splash src="resources/icons/IOS-6-splash.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="resources/icons/IOS-6plus-Splash.png" gap:platform="ios" width="1242" height="2208" />

<!-- ANDROID -->
<gap:splash src="resources/icons/IOS-4-splash.png" gap:platform="android" gap:qualifier="ldpi" />
<gap:splash src="resources/icons/IOS-5-splash.png" gap:platform="android" gap:qualifier="mdpi" />
<gap:splash src="resources/icons/IOS-6-splash.png" gap:platform="android" gap:qualifier="hdpi" />
<gap:splash src="resources/icons/IOS-6plus-Splash.png" gap:platform="android" gap:qualifier="xhdpi" />

<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
<application android:theme="@android:style/Theme.NoTitleBar" >
<activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" ></activity>
</application>
</gap:config-file>

</widget>

Photo of Yi Ming Kuan

Yi Ming Kuan

  • 1840 Posts
  • 78 Reply Likes
This is a known issue (https://github.com/phonegap/build/issues/465). In the meantime, set the statusbar controls in the deviceready event as per Petra's suggestions.

-yiming