Blank screen on Android/iOS after capacitor build when calling SplashScreen in ngOnInit

What’s happening?

In a native build the Capacitor runtime is not yet initialized when Angular’s ngOnInit runs. If SplashScreen.show() is executed at that moment it can block the UI thread (especially on Android) and the native splash image never hides, leaving a blank screen. The same applies to any plugin that depends on the Capacitor bridge.

Where should plugin calls live?

Root component (AppComponent)

Place them in the constructor *or* inside an explicit Platform.ready() callback. The constructor runs before the Angular view is rendered, but Platform.ready() guarantees the Capacitor bridge is active.

Lazy‑loaded modules

Call plugins inside ngAfterViewInit or a service that subscribes to Platform.ready(). Avoid ngOnInit for native plugin usage.

Is the Capacitor app ready event enough?

Yes, App.addListener('appStateChange', …) or App.addListener('pause', …) fire only after the platform is ready. However, for early initialization Ionic’s Platform.ready() is more idiomatic because it also works in the browser and provides a Promise that resolves when the bridge is available.

Safe pattern for SplashScreen

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private platform: Platform) {}

  async ngOnInit() {
    await this.platform.ready(); // guarantees Capacitor bridge
    SplashScreen.hide(); // hide native splash
  }
}

Do not call SplashScreen.show() here unless you also call hide() later. The Capacitor runtime automatically shows the splash on launch; manual show() is only needed for custom behavior.

Verify the solution

1. Run npx cap sync to ensure assets are copied.
2. Rebuild: ionic capacitor build android or ionic capacitor build ios.
3. Deploy to a device and watch adb logcat (Android) or Xcode console (iOS) for SplashScreen.hide() logs.
4. If the screen still stays blank, check that the splash images exist in android/app/src/main/res and ios/Runner/Assets.xcassets and follow Capacitor naming conventions.

One diagnostic detail to confirm

What is the exact error in the device logs when the blank screen appears? Knowing whether it’s a “SplashScreen not found” or a “platform not ready” message will pinpoint the missing step.