Customize Ionic 7 Status Bar with Ionic Native & Cordova

Last Updated on March 4, 2024 by Digamber in Ionic

This Angular/Ionic tutorial will help you understand how to set up or configure a status bar in Ionic application.

Moreover, you will learn how to display or similarly overlap status bar on top of your device, adding color in status bar, and how to hide status bar using Ionic native and Cordova plugins from scratch.

The Ionic native status bar plugin gives you no pain about configuring within the Ionic application. Apparently, it supports all the major platforms such as iOS, Android over and above that Windows.

Install Ionic Application

Make sure you have Ionic CLI configured on your system, then execute the following command to install Ionic project:

ionic start ionic-status-bar-example blank --type=angular

Land into the project root:

cd ionic-status-bar-example=angular

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Install Ionic Status Bar Plugin

Install status bar in Ionic to manage the look and feel of the native status bar.

npm i cordova-plugin-statusbar --legacy-peer-deps

npm install @ionic-native/status-bar --legacy-peer-deps

npm i @ionic-native/core --legacy-peer-deps

Next, install splash screen plugin:

npm i cordova-plugin-splashscreen --legacy-peer-deps

npm install @ionic-native/splash-screen --legacy-peer-deps

As you can see StatusBar is already comes defined in app.module.ts configuration file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Stauts bar
import { StatusBar } from '@ionic-native/status-bar/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Integrating Status Bar in Ionic/Angular Component

You don’t have to do anything to switch-on the status bar, rather Ionic framework does this job for you.

You can see that in app.component.ts file:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // let status bar overlay webview
      this.statusBar.overlaysWebView(true);

      // set status bar to white
      this.statusBar.backgroundColorByHexString('#ffffff');
      
      this.splashScreen.show();
    });
  }
}

Change Ionic Status Bar Color

Changing the color of the status bar can be done through two methods, the following methods can be added in AppComponent class.

this.statusBar.backgroundColorByHexString("darkGray");

You can define color by name using backgroundColorByName() method. It takes color name as a parameter, here are the supported color names:

black, darkGray, lightGray, white, gray, red, green, blue, 
cyan, yellow, magenta, orange, purple, brown

this.statusBar.backgroundColorByName("darkGray");

Apart from color names, you can also use hex values to change the color of the status bar.

this.statusBar.backgroundColorByHexString("4e4e4e");

Moreover, you can also use CSS shorthand values:

this.statusBar.backgroundColorByHexString("#ABA") // => #ABABAB

Make the Status Bar overlay in Ionic

The overlaysWebView() method makes the status bar overlay or not overlay the WebView. Set to true to make the statusbar overlay on top of your app.

Ensure that you adjust your styling accordingly not to cover your app’s title bar or content. If configured to false, then it makes the status bar solid not only but also not overlay your app.

// status bar overlays webview
this.statusBar.overlaysWebView(true);

// Hide status bar behind webview
this.statusBar.overlaysWebView(false);

Hide and Show Status Bar in Ionic

You can hide the status bar using the hide() method, vice versa; you can use the show() method to show the status bar.

this.statusBar.hide();

this.statusBar.show();

Light Content Status Bar

The styleLightContent() method recklessly lets you use a light content status bar, which basically means light text, for dark backgrounds.

this.statusBar.styleLightContent()

The Ionic status bar tutorial is over; we learned to configure the status bar with the help of Ionic Native and Cordova plugins. I hope you will love this tutorial.