[Android] overlaysWebView(true) doesn't work as expected when called in deviceready event

[breautek]

Bug Report

Problem

Statusbar doesn't go into overlaymode when using overlaysWebView(true) when called inside the deviceready callback.

What is expected to happen?

The statusbar should go into overlay mode.

What does actually happen?

The statusbar stays in solid.

Information

I've provided a reproduction app available at https://github.com/breautek/statusbar-overlay-issue

I simply call StatusBar.overlaysWebView(true), however the statusbar remains a solid black colour.

If I open up the dev tools, and call StatusBar.overlaysWebView(true) again via the javascript console, it still doesn't work.

In the console, if I do:

StatusBar.overlaysWebView(false);
StatusBar.overlaysWebView(true);

Then the statusbar finally goes into the overlay state.

Additionally, if I comment out the StatusBar.overlaysWebView(true); line in deviceready and launch the app. Then call StatusBar.overlaysWebView(true); in the console, the statusbar does go into overlay mode the first time. Surrounding StatusBar.overlaysWebView(true); also works the first time in deviceready IF I surround the statement in a setTimeout of 1 second.

Occassionally the code in the reproduction app works as expected as is the first time. This suggests there is a race condition at play here.

Original discovery of this bug was found at #155 (comment)

Command or Code

Environment, Platform, Device

Observed on Android 6 & Android 9, cordova-android 8.1.0
Cordova 9

Version information

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[mosabab]

This problem still not solved !

[breautek]

Any help to investigate this issue or PRs would be greatly appreciated.

[breautek]

In my testing, if you apply the PR #171 and set the overlay via config.xml preference, it appears to reliability set the statusbar properly.

I still haven't determined the cause of the statusbar not working properly when using the JS api on the deviceready event. Logging out information shows that the view state is all proper, even though visually the statusbar does not update.

[yxk0909]

The problem is still unsolved, when i set <preference name="StatusBarOverlaysWebView" value="true" />

i used your code on https://github.com/apache/cordova-plugin-statusbar/pull/171/files
That solved my problem. Thank you

[SchnWalter]

@breautek, related, to your comment #172 (comment); I'm not sure if it's the same issue.

The page is rendered properly, but then immediately, the WebView height is increased by the size of the statusbar and we see the map being resized to fit the new viewport. And this doesn't happen at the application startup, we change the overlaysWebView only when we navigate into the map page, so the layout is already stable before we change the overlay.

[ahmedelatab]

Follow this approach to overcome the bug in the StatusBar plugin:

statusBar.overlaysWebView(false);
statusBar.overlaysWebView(true);

setTimeout(() => {
  statusBar.overlaysWebView(false);
  statusBar.overlaysWebView(true);
}, 80);

Reverse the logic to prevent the status bar fro overlaying the web view.

[erophames]

@breautek, related, to your comment #172 (comment); I'm not sure if it's the same issue.

The page is rendered properly, but then immediately, the WebView height is increased by the size of the statusbar and we see the map being resized to fit the new viewport. And this doesn't happen at the application startup, we change the overlaysWebView only when we navigate into the map page, so the layout is already stable before we change the overlay.

Were you ever able to fix this issue? I am currently seeing this on my app.