how to get statusbar height about cordova-plugin-statusbar HOT 16 CLOSED

The env(safe-area-inset-top) does not work with android. With more and more notched android phones coming out, it makes sense that the statusbar plugin does actually provide the height of the statusbar. At my company, we require the statusbar height to deal with our app styles when we overlay our application with the status bar but are unable to get statusbar height for android devices since the env variables only works for iOS. There seems to be no other solution other than creating a cordova plugin (or additional method to this library) to get this using the getInset function from the application window natively to get our value. Is there a better way to resolve this? @mhartington

from cordova-plugin-statusbar.

I'm running into the same issue. The safe area height returned by env(safe-area-inset-top) is always the same on the respective iOS versions but in reality, the notch causes the height to be different

from cordova-plugin-statusbar.

https://www.npmjs.com/package/cordova-plugin-statusbar-latest
use the version，StatusBar.height is used to get StatusBar height

the version from #134

from cordova-plugin-statusbar.

Or you could use another plugin to get the height:

https://www.npmjs.com/package/dfocus-fm-cordova-plugin-statusbar-height

It's a bit obscure, but I checked the source and it's really simple and appears to work well (hint to the maintainers of this plugin).

from cordova-plugin-statusbar.

No, this is not one of the supported methods: https://github.com/apache/cordova-plugin-statusbar#methods

Why do you need this functionality?

from cordova-plugin-statusbar.

i need this functionality also, cuz i want my statusbar has a liner background: linear-gradient(to right black white) for example, so i choose set StatusBar.overlaysWebView(true) and add a custom "statusBar" which has a linear gradient backgroudColor, meanwhile, different android devices has different height of statusBar, so i need to get the devices height of statusBar to set on my custom ""statusBar""

from cordova-plugin-statusbar.

Newer versions of iOS and Android provide env-variables in css for this

env(safe-area-inset-top)

Which would return the space reserved for the status bar. But that's only for newer version of the OS. Older versions would not have this. Thankfully, iOS would have ~20px as the height for the status bar, but android could have many different status bar sizes, so there's not way to know for sure.

from cordova-plugin-statusbar.

To get statusbar height on android I use in JS:
var statusbarheight = screen.height - window.innerHeight

And I set this variable on css var.

Is it is correct?

from cordova-plugin-statusbar.

Same Issue here. Did someone found a Solution?

from cordova-plugin-statusbar.

Did anyone find a solution?

from cordova-plugin-statusbar.

How can I test it ?

from cordova-plugin-statusbar.

This is what I did.

• First, set the overlay to false
• then get the current value of document.documentElement.clientHeight
• then set the overlay to true
• then get the current value of document.documentElement.clientHeight
• the difference of currentHeight and initialHeight should be the safe area

const setSafeArea= async () => {
  await Plugins.StatusBar.setOverlaysWebView({
    overlay: false,
  })
  await delay(0)
  const initialHeight = document.documentElement.clientHeight
  await Plugins.StatusBar.setOverlaysWebView({
    overlay: true,
  })
  await delay(0)
  const currentHeight = document.documentElement.clientHeight
  const safeArea = currentHeight - initialHeight
  document.documentElement.style.setProperty('--safe-area-top', `${safeArea}px`)
}

from cordova-plugin-statusbar.

This is what I did.

@ronn9419 That doesn't work for me unfortunately. The following does sort of, but only if I manually set a rather long delay (like 1000ms)...

(async () => {
    await StatusBar.overlaysWebView(false);
    var initialHeight = document.documentElement.clientHeight;
    await StatusBar.overlaysWebView(true);
    await delay(1000);
    var currentHeight = document.documentElement.clientHeight;
    console.log('safeArea', currentHeight - initialHeight);
})();
function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }

(Why are you using Plugins.StatusBar.setOverlaysWebView({overlay: false}) instead of StatusBar.overlaysWebView(false)?)

from cordova-plugin-statusbar.

The following seems like a better solution:

var initialHeight = document.documentElement.clientHeight;
window.addEventListener('resize', resizeFunction);
function resizeFunction() {
    console.log('STATUS BAR HEIGHT', document.documentElement.clientHeight - initialHeight);
    window.removeEventListener('resize', resizeFunction);
}
StatusBar.overlaysWebView(true);

It takes about 150ms from deviceready.

from cordova-plugin-statusbar.

@nielsjakob looks like the best solution I found... thanks

from cordova-plugin-statusbar.

if you using capacitori, you can use this package
https://github.com/Aashu-Dubey/capacitor-statusbar-safe-area
im already tested on ionic 7 with vue

from cordova-plugin-statusbar.