Skip to main content
Version: v2

Status Bar

Status Bar

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

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 StatusBarStyle.Light. You can change these defaults by adding UIStatusBarHidden and or UIStatusBarStyle in the Info.plist.

setBackgroundColor and setOverlaysWebView are currently not supported on iOS devices.

Events

  • statusTap

Example

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

//API
import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar } = Plugins;

export class StatusBarExample {
isStatusBarLight = true;

changeStatusBar() {
StatusBar.setStyle({
style: this.isStatusBarLight ? StatusBarStyle.Dark : StatusBarStyle.Light,
});
this.isStatusBarLight = !this.isStatusBarLight;

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

hideStatusBar() {
StatusBar.hide();
}

showStatusBar() {
StatusBar.show();
}
}

API

setStyle(...)

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

Set the current style of the status bar

ParamType
optionsStatusBarStyleOptions

setBackgroundColor(...)

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

Set the background color of the status bar

ParamType
optionsStatusBarBackgroundColorOptions

show(...)

show(options?: StatusBarAnimationOptions) => Promise<void>

Show the status bar

ParamType
optionsStatusBarAnimationOptions

hide(...)

hide(options?: StatusBarAnimationOptions) => Promise<void>

Hide the status bar

ParamType
optionsStatusBarAnimationOptions

getInfo()

getInfo() => Promise<StatusBarInfoResult>

Get info about the current state of the status bar

Returns: Promise<StatusBarInfoResult>


setOverlaysWebView(...)

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

Set whether or not the status bar should overlay the webview to allow usage of the space around a device "notch"

ParamType
optionsStatusBarOverlaysWebviewOptions

Interfaces

StatusBarStyleOptions

PropType
styleStatusBarStyle

StatusBarBackgroundColorOptions

PropType
colorstring

StatusBarAnimationOptions

PropTypeDescription
animationStatusBarAnimationiOS only. The type of status bar animation used when showing or hiding.

StatusBarInfoResult

PropType
visibleboolean
styleStatusBarStyle
colorstring
overlaysboolean

StatusBarOverlaysWebviewOptions

PropType
overlayboolean

Enums

StatusBarStyle

MembersValueDescription
Dark"DARK"Light text for dark backgrounds.
Light"LIGHT"Dark text for light backgrounds.

StatusBarAnimation

MembersValueDescription
None"NONE"No animation during show/hide.
Slide"SLIDE"Slide animation during show/hide.
Fade"FADE"Fade animation during show/hide.