CODEWITHSUNDEEP
angularcordovaionic4ionic-nativecapacitor
Sampath
Sampath

Reputation: 65870

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?

Upvotes: 2

Views: 10711

Answers (3)

Jhon Julio
Jhon Julio

Reputation: 1

After searching around I could not found a solution.

But after playing around with Xcode, I discovered what could be a temporary Solution.

Your will have to change the status bar color using native code in Xcode....this was the only solution I could come with

Upvotes: 0

dotNetkow
dotNetkow

Reputation: 5313

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();
  }
}

Upvotes: 4

RicardoVallejo
RicardoVallejo

Reputation: 1096

capacitor states that is not compatible with the cordova plugin because it delivers their own cordova-plugin-statusbar (not needed, Capacitor has its own) Therefore I advise you should be using the one from capacitor.

Something similar to this:

const { SplashScreen, StatusBar } = Plugins;
try {
  await SplashScreen.hide();
  await StatusBar.setStyle({ style: StatusBarStyle.Light });
} catch (err) {
  console.log('This does not have influence on the browser', err);
}

Upvotes: 4

Related Questions