Olle Plugins - Cordova- Custom Status Bar

What does it do?

It is used to configure IOS and Android status bar as desired using css.

How to install?

This installation method requires cordova 5.0+

cordova plugin add cordova-plugin-custom-statusbar

How to use?

After Cordova is ready, the following class is added to the first element.

class="${typeof cordova !== `undefined` ? (cordova.platformId == 'ios' ? `device-ios` : `device-android`) : `` }"

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;
}

.device-android  .status-bar{
	height: var(--status-bar-height);
}

.device-ios  .status-bar{
	height: env(safe-area-inset-top);
}

You can configure page elements by status bar.

//.status-padding
.device-android  .status-padding{
	padding-top: var(--status-bar-height);
}
.device-ios  .status-padding{
	padding-top: env(safe-area-inset-top);
}

//.status-margin
.device-android  .status-margin{
	margin-top: var(--status-bar-height);
}
.device-ios  .status-margin{
	margin-top: env(safe-area-inset-top);
}

//.status-top
.device-android  .status-top{
	top: var(--status-bar-height);
}
.device-ios  .status-top{
	top: env(safe-area-inset-top);
}

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

if(typeof cordova !== "undefined" && typeof cordova !== 'undefined'){
	customstatusbar.statusBarWhiteText();
	//OR
	customstatusbar.statusBarBlackText();
}