capacitor-status-bar-area v0.0.1

Capacitor Status Bar Area

Forked from @capacitor/status-bar with additional feature

The StatusBar API Provides methods for getting height, configuring the style of the Status Bar, along with showing or hiding it.

Install

npm install capacitor-status-bar-area
npx cap sync

iOS Note

This plugin requires "View controller-based status bar appearance" (UIViewControllerBasedStatusBarAppearance) set to YES in Info.plist. Read about Configuring iOS for help.

The status bar visibility defaults to visible and the style defaults to Style.Default. You can change these defaults by adding UIStatusBarHidden and/or UIStatusBarStyle in Info.plist.

setBackgroundColor and setOverlaysWebView are currently not supported on iOS devices.

Example

import { StatusBarArea, Style } from 'capacitor-status-bar-area';

// iOS only
window.addEventListener('statusTap', function () {
  console.log('statusbar tapped');
});

// Display content under transparent status bar (Android only)
StatusBarArea.setOverlaysWebView({ overlay: true });

StatusBarArea.getHeight().then((info) => {
  document.documentElement.style.setProperty(
    '--status-bar-safe-area',
    `${info?.height || 24}px`
  );
});

const setStatusBarStyleDark = async () => {
  await StatusBarArea.setStyle({ style: Style.Dark });
};

const setStatusBarStyleLight = async () => {
  await StatusBarArea.setStyle({ style: Style.Light });
};

const hideStatusBar = async () => {
  await StatusBarArea.hide();
};

const showStatusBar = async () => {
  await StatusBarArea.show();
};

API

• setStyle(...)
• setBackgroundColor(...)
• show(...)
• hide(...)
• getInfo()
• getHeight()
• setOverlaysWebView(...)
• Interfaces
• Enums

setStyle(...)

setStyle(options: StyleOptions) => Promise<void>

Set the current style of the status bar.

setBackgroundColor(...)

setBackgroundColor(options: BackgroundColorOptions) => Promise<void>

Set the background color of the status bar.

This method is only supported on Android.

show(...)

show(options?: AnimationOptions | undefined) => Promise<void>

Show the status bar.

hide(...)

hide(options?: AnimationOptions | undefined) => Promise<void>

Hide the status bar.

getInfo()

getInfo() => Promise<StatusBarInfo>

Get info about the current state of the status bar.

Returns: Promise<StatusBarInfo>

getHeight()

getHeight() => Promise<StatusBarHeight>

Get the current style of the status bar in pixels.

Returns: Promise<StatusBarHeight>

setOverlaysWebView(...)

setOverlaysWebView(options: SetOverlaysWebViewOptions) => Promise<void>

Set whether or not the status bar should overlay the webview to allow usage of the space underneath it.

This method is only supported on Android.

Interfaces

StyleOptions

BackgroundColorOptions

AnimationOptions

StatusBarInfo

StatusBarHeight

SetOverlaysWebViewOptions

Enums

Style

Animation