Search code examples
angularcordovaionic4ionic-nativecapacitor

Capacitor and Ionic native status-bar


I have created the Ionic 4 Capacitor app. It shows this by default and no Cordova plugin.

package.json

   "@ionic-native/splash-screen": "^5.0.0",
   "@ionic-native/status-bar": "^5.0.0",

app.component.ts

 async initializeApp(): Promise<void> {
    await this.platform.ready();

    this.statusBar.styleDefault();
    this.splashScreen.hide();

  }

But Capacitor doc says where it is not compatible with it. Do I need to remove this native plugin and use Capacitor implementation or since there is no Cordova here will this no issue?


Solution

  • We're working on updating the starter app templates - soon, they'll default to Capacitor APIs.

    I think those two actually do work with Cap, but as Ricardo wrote, our recommendation would be to use the Capacitor APIs.

    Here's what I'm using in one of our sample apps:

    import { Component } from '@angular/core';
    import { Plugins } from '@capacitor/core';
    const { SplashScreen } = Plugins;
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss']
    })
    export class AppComponent {
      constructor() {
        this.initializeApp();
      }
    
      initializeApp() {
        /* To make sure we provide the fastest app loading experience 
           for our users, hide the splash screen automatically 
           when the app is ready to be used:
    
            https://capacitor.ionicframework.com/docs/apis/splash-screen#hiding-the-splash-screen
        */
        SplashScreen.hide();
      }
    }