Capacitor transparent status bar overlapping with toolbar in Ionic app for android

I set a transparent status bar in my app.component.html in my ionic app for android as follows:

import { Component,OnInit } from '@angular/core';
import { StatusBar,Style } from "@capacitor/status-bar";
import { Storage } from "@capacitor/storage";
import { Router } from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    public router:Router
  ) {}
  async shouldShowStarterScreen(){
    let hasSeenScreen = await Storage.get({key:"seenScreen"});
    if(hasSeenScreen.value == null){
      this.router.navigate(["starter-screen"]);
    }
  }
  slideOpts = {

  }
  async ngOnInit(){
    this.shouldShowStarterScreen();
  /*  await StatusBar.setStyle({style:Style.Dark})
    StatusBar.setBackgroundColor({
      color:"#3F00FF"
    })*/
    StatusBar.setOverlaysWebView({overlay:true});
  }
}

Its working but there is a slight overlap of the status bar on the app as seen below

What is a quick, suitable way of correcting this

1 post - 1 participant

Read full topic