Olle Plugins - Cordova- Custom Status Bar

What does it do?

It is used to configure Android's status bar as desired using css.

How to install?

This installation method requires cordova 5.0+

cordova plugin add cordova-plugin-custom-statusbar-android

How to use?

A variable named "--status-bar-height" is created in the .scss file.

:root {
    --status-bar-height: 0px;
}

The notch height is assigned to this variable when the application is first run. (e.g. -> app.js)

if (typeof cordova !== "undefined" && cordova.platformId == "android") {
    const  cssPromise  =  new  Promise((resolve, reject)  => {
	    if (window.customstatusbar) {
		    customstatusbar.statusBarBlackText();
		    // Apply insets as css variables
		    window.customstatusbar.getInsetTop(px  => {
			    let  root  =  document.documentElement;
			    root.style.setProperty('--status-bar-height', px  +  "px");
			    resolve();
	    }, (err)  =>  console.error("Failed to get insets top:", err));
	    }
    });
    await  cssPromise;
}

Create a "div" tag at the beginning of the page you want to use.

<div  id="status-bar"  class="status-bar"></div>

You can configure this div with css.

.status-bar{
    position: absolute;
    z-index: 9999999;
    top: 0px;
    width: 100%
    background: rgba(44, 44, 44, 0.5);
    backdrop-filter: blur(4.5px) !important;
    height: var(--status-bar-height);
}

You can configure page elements by status bar.

.status-padding{
	padding-top: var(--status-bar-height);
}
.status-margin{
	margin-top: var(--status-bar-height);
}
.status-top{
	top: var(--status-bar-height);
}

On pages where the status bar is used, you can choose black or white status bar text color.

if( typeof  cordova  !==  'undefined' ){
    if( cordova.platformId  ==  'android' ){
	    customstatusbar.statusBarBlackText();
		//Or
		customstatusbar.statusBarWhiteText();
    }
}