Status Bar

Status Bar

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

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

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

Param	Type
options	StatusBarStyleOptions

---

setBackgroundColor(...)

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

Set the background color of the status bar

Param	Type
options	StatusBarBackgroundColorOptions

---

show(...)

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

Show the status bar

Param	Type
options	StatusBarAnimationOptions

---

hide(...)

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

Hide the status bar

Param	Type
options	StatusBarAnimationOptions

---

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"

Param	Type
options	StatusBarOverlaysWebviewOptions

---

Interfaces

StatusBarStyleOptions

Prop	Type
style	StatusBarStyle

StatusBarBackgroundColorOptions

Prop	Type
color	string

StatusBarAnimationOptions

Prop	Type	Description
animation	StatusBarAnimation	iOS only. The type of status bar animation used when showing or hiding.

StatusBarInfoResult

Prop	Type
visible	boolean
style	StatusBarStyle
color	string
overlays	boolean

StatusBarOverlaysWebviewOptions

Prop	Type
overlay	boolean

Enums

StatusBarStyle

Members	Value	Description
Dark	"DARK"	Light text for dark backgrounds.
Light	"LIGHT"	Dark text for light backgrounds.

StatusBarAnimation

Members	Value	Description
None	"NONE"	No animation during show/hide.
Slide	"SLIDE"	Slide animation during show/hide.
Fade	"FADE"	Fade animation during show/hide.