@capacitor/status-bar

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

Install

npm install @capacitor/status-bar
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 { StatusBar, Style } from '@capacitor/status-bar';

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

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

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

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

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

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

API

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

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

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

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

getInfo() => Promise<StatusBarInfo>

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