Splash screens in Capacitor: the complete guide

The splash screen is the first frame of your app and the last thing most teams polish. Done well, it hides load time and feels intentional; done poorly, it flashes, lingers, or shows a white gap. This guide covers configuring a native splash screen in Capacitor on iOS and Android — and using that moment to check for an OTA update before the user sees stale content.

1. Install and configure

npm install @capacitor/splash-screen
npx cap sync

Configure it in capacitor.config.ts — disable auto-hide so you control exactly when it disappears:

plugins: {
  SplashScreen: {
    launchAutoHide: false,
    backgroundColor: '#ffffff',
  },
}

2. Generate the assets

Use @capacitor/assets to generate the platform-specific splash and icon sets from a single source image, so you're not hand-cropping for every density.

3. Hide it when you're actually ready

The point of launchAutoHide: false is to hide the splash only once your app has booted and rendered its first real screen — no white flash:

import { SplashScreen } from '@capacitor/splash-screen';

// after your app shell has mounted and data is ready
await SplashScreen.hide();

4. Check for an update behind the splash

This is the OTA-native trick: the splash is the perfect cover for an update check. If an update is already downloaded and ready, applying it before you hide the splash means the user boots straight into the newest bundle — no visible reload:

import { OtaKit } from '@otakit/capacitor-plugin';

const state = await OtaKit.getState();
// let a ready update apply, then reveal the app
await SplashScreen.hide();

See background vs foreground updates for how apply-on-launch fits your update UX.

Where to go next

See edge-to-edge display for the rest of the first-launch polish, and update strategies for apply timing.