Skip to main content
Version: v7

@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

Android 16+ behavior change​

For apps targeting Android 16 (API level 36) and higher using Capacitor 8, the following Status Bar configuration options no longer work:

  • overlaysWebView
  • backgroundColor

These options relied on the ability to opt out of Android’s edge-to-edge system UI behavior, which allowed apps to control how the status bar overlays and its background color.

In Android 15 (API level 35), it was still possible to opt out of this enforced behavior by setting the windowOptOutEdgeToEdgeEnforcement property in the application layout file. Without that property, the application assumed overlaysWebView as always true. See more details in the Android documentation: https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement

Starting with Android 16, this opt-out is no longer available, and the behavior is enforced by the system.
As a result, the overlaysWebView and backgroundColor configuration options no longer have any effect.

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.

Example​

import { StatusBar, Style } from '@capacitor/status-bar';

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

// Display content under transparent status bar
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();
};

Configuration​

These config values are available:

PropTypeDescriptionDefaultSince
overlaysWebViewbooleanWhether the statusbar is overlaid or not. Not available on Android 15+.true1.0.0
stylestringStyle of the text of the status bar.default1.0.0
backgroundColorstringColor of the background of the statusbar in hex format, #RRGGBB. Doesn't work if overlaysWebView is true. Not available on Android 15+.#0000001.0.0

Examples​

In capacitor.config.json:

{
  "plugins": {
    "StatusBar": {
      "overlaysWebView": false,
      "style": "DARK",
      "backgroundColor": "#ffffffff"
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/status-bar" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    StatusBar: {
      overlaysWebView: false,
      style: "DARK",
      backgroundColor: "#ffffffff",
    },
  },
};

export default config;

API​

setStyle(...)​

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

Set the current style of the status bar.

ParamType
optionsStyleOptions

Since: 1.0.0

setBackgroundColor(...)​

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

Set the background color of the status bar. Calling this function updates the foreground color of the status bar if the style is set to default, except on iOS versions lower than 17. Not available on Android 15+.

ParamType
optionsBackgroundColorOptions

Since: 1.0.0

show(...)​

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

Show the status bar. On iOS, if the status bar is initially hidden and the initial style is set to UIStatusBarStyleLightContent, first show call might present a glitch on the animation showing the text as dark and then transition to light. It's recommended to use Animation.None as the animation on the first call.

ParamType
optionsAnimationOptions

Since: 1.0.0

hide(...)​

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

Hide the status bar.

ParamType
optionsAnimationOptions

Since: 1.0.0

getInfo()​

getInfo() => Promise<StatusBarInfo>

Get info about the current state of the status bar.

Returns: Promise<StatusBarInfo>

Since: 1.0.0

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. Not available on Android 15+.

ParamType
optionsSetOverlaysWebViewOptions

Since: 1.0.0

Interfaces​

StyleOptions​

PropTypeDescriptionSince
styleStyleStyle of the text of the status bar.1.0.0

BackgroundColorOptions​

PropTypeDescriptionSince
colorstringA hex color to which the status bar color is set.1.0.0

AnimationOptions​

PropTypeDescriptionDefaultSince
animationAnimationThe type of status bar animation used when showing or hiding. This option is only supported on iOS.Animation.Fade1.0.0

StatusBarInfo​

PropTypeDescriptionSince
visiblebooleanWhether the status bar is visible or not.1.0.0
styleStyleThe current status bar style.1.0.0
colorstringThe current status bar color.1.0.0
overlaysbooleanWhether the statusbar is overlaid or not.1.0.0

SetOverlaysWebViewOptions​

PropTypeDescriptionSince
overlaybooleanWhether to overlay the status bar or not.1.0.0

Enums​

Style​

MembersValueDescriptionSince
Dark'DARK'Light text for dark backgrounds.1.0.0
Light'LIGHT'Dark text for light backgrounds.1.0.0
Default'DEFAULT'The style is based on the device appearance. If the device is using Dark mode, the statusbar text will be light. If the device is using Light mode, the statusbar text will be dark.1.0.0

Animation​

MembersValueDescriptionSince
None'NONE'No animation during show/hide.1.0.0
Slide'SLIDE'Slide animation during show/hide. It doesn't work on iOS 15+.1.0.0
Fade'FADE'Fade animation during show/hide.1.0.0

Contents

Edit this page