phonegap-build / statusbarplugin Goto Github PK

I have tried the Status Bar plugin in combination with Phonegap Build, PG 3.1 and iOS7, but it doesn't seem to work properly. The app uses full-screen landscape view.

I tried StatusBar.hide() in my deviceReady function, but the bar remained in view. And worse, the right-hand part of the screen became completely unresponsive to touch events. As if there was a transparent overlay on that part of the screen, possibly related to this bug: http://community.phonegap.com/nitobi/topics/inconsistent_ios_7_status_bar_build_problem. As described there, the overlay isn't transparent though, but it seems to cover exactly the same area that goes unresponsive in my case.

This is a very handy plugin but i experiencing some trouble when using it. It keeps adding a scrollable space of 20px at the bottom of the screen.

This is what i did:
$phonegap create StatusbarTest
$phonegap plugin add https://github.com/phonegap-build/StatusBarPlugin.git
$phonegap build ios

The result:

if i inspect the html with safari and checking for window.innerHeight it returns the height of 460px ((960/2)-20 i guess) which seems correct.

I am running phonegap -v 3.5.0-0.20.10

otherwise this plugin is the best solution for the ios7 statusbar problem.

Hello,

Looks like overlaysWebView (false) stops working as soon as I start using adMob.

I use this plugin for AdMob: https://github.com/aliokan/cordova-plugin-admob

Regards,
Aliaks

Hi,

First of all, thanks for the work on this nice little plugin!

This bug occurs on iOS 8.3 (maybe earlier versions as well). We are running the latest version of the plugin (1.1.0) and are only using one preference from the plugin:

StatusBarOverlaysWebView =false

As seen from the attached screenshot, a black line occurs under the statusbar when sharing an Internet connection. The issue only occurs if you start to share an Internet connection while the app is NOT running in the background. When starting the app again the black line occurs. If you stop sharing an Internet connection, you have to kill the app and restart it for the black line to dissapear.

If you start to share an Internet connection while the app is already running in the background, everything seems to be working just fine with regards to the statusbar.

When my app starts up the splashscreen is shown, then the statusbar turns black before turning into the color I'd like to use. Is this something I can prevent? I'm using these settings in Phonegap Build:

StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#666a6d");

I have the same issue as in #26 where StatusBar is undefined in the latest build when run on an iOS8 phone. This normally wouldn't be an issue if it wasn't for the javascript engine halting entirely. When this is encountered, any changes I do to for instance localStorage, is not available/reflected in the rest of the code running until the application is restarted. And to top it off, I'm not even calling StatusBar anywhere, so there's some initialization script that comes along that I assume does which fails because it's not available in the global scope?

So I tried with reverting to 1.0.1 as suggested in that thread, but then suddenly the width and height of the viewport was changed so that all the elements would have to get a custom set of code for iOS so that the width and heights were recalculated to much smaller percentages... at the moment the main body of the Single Page Application is set to 100% width and 100% height, but this makes elements near the right edge and/or bottom edge disappear outside of viewable area and are not reachable with scrolling.

I am using DevExpress framework and built through phonegap build directly from visual studio, so I don't have any build to share from. The ticket at devexpress is this; https://www.devexpress.com/Support/Center/Question/Details/T261533

Thanks!

I am using this addon to completely hide the status bar at boot which it does an excellent job of doing - But as soon as the ui image picker is accessed it re-appears. using hide() only adds to the problems as my content starts getting pushed 20px down the page upon 'each' image selection. Is there anyway you can add a fix for this so that the ui image picker never triggers the status bar to appear?

Thanks in advance.

To reproduce:

1. add plugins for both StatusBar and InAppBrowser
2. call StatusBar.hide()
3. call window.open(some_url, '_blank')
4. press "Done"
5. there is now a blank status bar - by blank I mean none of the actual status info is visible, just a blank bar

I'm testing on a physical iPhone 5 with iOS 7.

Viewport is wrong on iphone 4 inche since i've added this plugin. As you can see the window height return 656px instead to the correct 568px.

I am having trouble with the StatusBar plugin when my app is built using PhoneGap build. I have the following in my config.xml

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

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

The status bar looks good when I build my app locally, but when I use PhoneGap build, I think it is displayed as black on black because I can see part of the battery level indicator if it turns red, but otherwise I see a black bar.

I am using PhoneGap v3.4.

Hi, i want to use this plugin for Phonegap CLI 4.2.0, please let me to know how can i use this.

Here's how to reproduce the issue:

1. Rotate your iPad upside down (the home button on top), the iOS screen rotates to suit the orientation change
2. Launch the app in this orientation mode and you will see the status bar background color placeholder is at the bottom below the web view, while the real status bar still sits at top without custom set background colour

When I try 'cordova build android' I get the following error:

:processDebugResources/Users/blund/Documents/github/IdOra-app/platforms/android/res/xml/config.xml:40: AAPT: Error parsing XML: unbound prefix

====================
/Users/blund/Documents/github/IdOra-app/platforms/android/build/intermediates/res/merged/debug/xml/config.xml:40: error: Error parsing XML: unbound prefix

FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':processDebugResources'.

com.android.ide.common.process.ProcessException: Failed to execute aapt
====================

The offending line in ..../config.xml:40 is:
<gap:plugin name="com.phonegap.plugin.statusbar" />

I'm not really sure what's wrong, let alone how to fix it. Any suggestions would be welcome.

The height is 100% of the screen and the width is about the half of the screen, also the web view is pushed down to the middle of the screen

Hello

StatusBar plugin works great in the phonegap application. The problem is that when I start an inappbrowser from the application, the StatusBar plugin doesn't seem to do anything there.

Is there a solution for this?

If I build with phonegap build I have the following in config.xml:
<gap:plugin name="org.apache.cordova.core.inappbrowser" />
<gap:plugin name="com.phonegap.plugin.statusbar" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

and if I compile natively on ios I use in my project via the console:
phonegap plugin add org.apache.cordova.inappbrowser
phonegap plugin add https://github.com/phonegap-build/StatusBarPlugin.git

thanks

Let me preface this by saying I'm new to phonegap/cordova but not web development.

I added the following to my config.xml file:

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

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

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

I have also included phonegap.js in my project. It was loaded successfully and I have access to the cordova global variable.

As the README.md for this plugin implies I should be able to execute the following statement StatusBar.styleLightContent();. The issues is that StatusBar is not defined.

Am I missing something when it comes to using phonegap build plugins?

It seems that setting overlaysWebView to false causes the HTML of an application to be incorrectly sized (in iPad only). The HTML content extends beyond the viewport. Simply by changing to true and adjusting my html to account for this fixed my problem. Seems like this is a bug though - figured I would comment because this drove me crazy for quite a while.

I am using this plugin in my Cordova 3.3.1 project. When I try to run it on my iOS 7.1 64 bit iPhone I am getting an error when this function is called:

• (void) _ready:(CDVInvokedUrlCommand*)command
  {
  // set the initial value
  [self.commandDelegate evalJs:[NSString stringWithFormat:@"StatusBar.isVisible = %@;", [UIApplication sharedApplication].statusBarHidden? @"false" : @"true" ]];
  }

It complains that the command parameter is nil. When I go back to the calling code:

• (BOOL)execute:(CDVInvokedUrlCommand*)command
  {
  ...
  objc_msgSend(obj, normalSelector, command);
  ...
  }

the command here is not nil.

It works fine in the 64 bit emulator. It only seems to crash on a device.

Download ZIP on your computer https://github.com/phonegap-build/StatusBarPlugin/archive/master.zip

open plugin.xml

change version="3.1.0" to version=">=3.1.0"

then

$ phonegap local plugin add ~/Downloads/StatusBarPlugin

function sshide(){
StatusBar.hide();
}

< body onLoad="sshide()" >

For me with 3.3.0 works

It would be great to be able to animate the way status bar appear/disappear, using native status bar animation (UIStatusBarAnimationSlide/UIStatusBarAnimationFade).

Ex:

StatusBar.show("fade");
StatusBar.hide("slide");

Is this not working with Phonegap build?

Currently trying to change my status bar colour, with the following code:

    <gap:plugin name="com.phonegap.plugin.statusbar" />
    <preference name="StatusBarBackgroundColor" value="#4e9fd5" />

Is there any specific order I should be putting these in or in certain places?

Thanks for the plugin! Any help is greatly appreciated,

Jonathan

I am using PGB 3.3 with your latest plugin 1.10 and my ipad mini 7.0.6

when I use this method to show or hide the status bar and detect the statusbar is visible or not

StatusBar.show(); //the status bar is indeed show up
alert(StatusBar.isVisible);

it will alert "true" (good)

but...

StatusBar.hide(); //the status bar is indeed hidden
alert(StatusBar.isVisible);

it will still alert "true" (but I think it should be false in this situation)

Hello,

The issue is when I set HideKeyboardFormAccessoryBar as true in config.xml, the UI view will drop down 20px after I closed keyboard in iOS7.

Thanks for awesome plugin.

I am able to show & hide status bar through their given methods on web (inapp browser) but the overlay & statusbar color methods are not working. I tried using theses methods on load start & load stop but StatusBar.backgroundColorByName or by hex and StatusBar.overlaysWebView is not working on web. However these properties are working fine in native at the start of my app.

is there anything that i am missing here?

The Statusbar disappears after opening a URL using in-app-browser.

My config.xml definitions are:

    <gap:plugin name="com.phonegap.plugin.statusbar" />
    <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
        <false />
    </gap:config-file>
    <gap:config-file platform="ios" parent="UIStatusBarHidden">
        <true />
    </gap:config-file>

I read somewhere, that if the UIViewControllerBasedStatusBarAppearance will be set to "YES" it might solve it.
However, in my case, I would like the App to start without a statusbar, and only make it appear later on after the App is loaded. So I need those settings above.

On IOS 7 if I have the Personal Hotspot Notification showing then it is leaving an extra status bar gap to the application. This remains if I disable personal hotspot until I kill and restart. So I get 2 blue lines and then one blank black line. More worryingly my phone seems to crash 50% of the time on starting up the app with with hotspot enabled, so may be worth taking a good look at what happens if the status bar is double. I'm on Phonegap 3.3 and StatusBar 0.1.7.

Using the "Hide status bar during application launch" option followed by StatusBar.hide() as soon as the deviceready event is fired, causes the statusbar to appear for a short period of time.

问题

Overlaying the WebView is the default behaviour without using this plugin. When using the plugin you have to forcibly call StatusBar.overlaysWebView(true); e.g.

StatusBar.styleLightContent();
StatusBar.overlaysWebView(true); // required

The 2nd line shouldn't be necessary in my opinion. Thoughts?

Hi,

I tried to give the statusbar a color by hex but it stays black, am i doing something wrong??!! (ofc i do, i always do ;) )

this is in my config file:

        <gap:plugin name="com.phonegap.plugin.statusbar" />
        <preference name="StatusBarOverlaysWebView" value="false" />
        <preference name="StatusBarBackgroundColorByHexString" value="#5ba239" />

Thanks in Advance

//Sem

If we set StatusBar.hide() and launch the app landscape mode, a long about 200px wide bar runs along the right side of the screen. If we launch in portrait, no problem. Only on IOS7, of course.

With my PhoneGap Build application settings the background color of the statusbar on Android works perfectly fine. Either from within the config or from within javascript.

Now, when attempting to set the background color a second time (or if previously specified in the config, the first time from javascript), nothing happens.

StatusBar.backgroundColorByHexString('#000000'); // works
StatusBar.backgroundColorByHexString('#ffffff'); // does not work

or

<preference name="StatusBarBackgroundColor" value="#000000" /> <!-- works -->

StatusBar.backgroundColorByHexString('#ffffff'); // does not work

If you show the status-bar and the hide it - the screen size increases in around 20 pixels in width and height.
If you show and hide it again - it will increase in another 20 pixels.

Hi,
i use iphone 5 with ios 7, after i select photo (using Camera.PictureSourceType.PHOTOLIBRARY) when i back to the application, the status bar back over the application

Hi Ryan,

Thanks for doing such a great job man with this plugin (and PGB). A lot of us use it, just saying. My question is when will this...

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

...be supported by PhoneGap Build?

Thanks again!

~Anthony

Can you please make this compatible for Phonegap > 3.1 on Phonegap Build! Without that i can't build my app on phonegap build :(

To reproduce:

StatusBar.overlaysWebView(true);

receive phone call, open app, green bar is there

end phone call, go back to app, the status bar is no longer overlaying the web view.

This is not happening in the simulator, only on a device. Any ideas?

I have a post right here
http://community.phonegap.com/nitobi/topics/_splashscreen_api_problem

is there anything change by "Splashscreen" API ?

I have tried the following integration (Phonegap Build):

In my config.xml:

[gap:plugin name="com.phonegap.plugin.statusbar" /]
[preference name="StatusBarOverlaysWebView" value="true" /](tried false and true)
[preference name="StatusBarBackgroundColor" value="#111111" /]

I also tried:

function onDeviceReady() {
app.initialize();
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString("#111111");
}

Everything results in the standard status bar color. I'm I doing something wrong?

styleLightContent() doesn't seem to work in iOS 7.0.4. I used the example app at https://github.com/phonegap-build/pgb-example-statusbar to test this. When clicking the 'light content status bar', nothing happens. Am I missing something here?

Hi there, thanks very much for this plugin. We are using phonegap build with cordova 3.3. We added this to config.xml

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

Next, if we add this to our HTML (which by the way isn't mentioned in the README):

<script type="text/javascript" src="statusbar.js"></script>

And if we add this to the deviceready callback:

StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#321e15");
StatusBar.styleLightContent();

Then things work. However, the README suggests that this can be done just through config.xml. Is that correct? We tried this:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#321e15" />

But it didn't work.

Is it possible to add a status-tap event like here:
https://github.com/apache/cordova-plugin-statusbar/blob/master/www/statusbar.js#L102

Thanks
Yaron

Myself and a few others are experencing a problem with Hydration on Phonegap Build. I didn't see anything about the issue here so I thought I would post a link to it here.

http://gsfn.us/t/4imp0

I'm using PhoneGap Build. AppID 958859.

I've got this in my config.xml:

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

and I've got this in my main.js file:

function deviceReady() {
  StatusBar.backgroundColorByHexString("#660000");
  StatusBar.styleLightContent();
}
document.addEventListener('deviceready', deviceReady, false);

I get what appears to be a black status bar with black text and no access to the StatusBar object in the console using weinre. Specifically I get:

ReferenceError: Can't find variable: StatusBar

However, per another user's suggestion, if I switch to using version 1.0.1 and don't make any other changes I at least get the red background but still no white text.

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

I'm also able to access the StatusBar object from the console.

Any suggestions on the changes that would be necessary to make this support 2.3.0?

That's funny! For a long time I didn't understand why it doesn't work. It seems I'm doing all right and have looked through a lot of issues. It should have worked.

By the end of the day I've noticed that my content is covered by something like view with height of status bar and with the same background at the bottom!

It was clear for me. All orientations except portrait (top home button) work fine. It can be reproduced only if you will launch the app in this orientation.