The Splash Screen API provides methods for showing or hiding a Splash image.

npm install @capacitor/splash-screen
npx cap sync

This only affects the launch splash screen and is not used when utilizing the programmatic show() method.

Capacitor 4 uses the Android 12 Splash Screen API and the androidx.core:core-splashscreen compatibility library to make it work on Android 11 and below.

The compatibility library can be disabled by changing the parent of AppTheme.NoActionBarLaunch from Theme.SplashScreen to AppTheme.NoActionBar in android/app/src/main/res/values/styles.xml. The Android 12 Splash Screen API can't be disabled on Android 12+ as it's part of the Android OS.

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

NOTE: On Android 12 and Android 12L devices the Splash Screen image is not showing when launched from third party launchers such as Nova Launcher, MIUI, Realme Launcher, OPPO Launcher, etc., from app info in Settings App, or from IDEs such as Android Studio. Google Issue Tracker Google Issue Tracker Google have fixed those problems on Android 13 but they won't be backport the fixes to Android 12 and Android 12L. Launcher related issues might get fixed by a launcher update. If you still find issues related to the Splash Screen on Android 13, please, report them to Google.

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

// Hide the splash (you should do this on app launch)
await SplashScreen.hide();

// Show the splash for an indefinite amount of time:
await SplashScreen.show({
  autoHide: false,
});

// Show the splash for two seconds and then automatically hide it:
await SplashScreen.show({
  showDuration: 2000,
  autoHide: true,
});

By default, the Splash Screen is set to automatically hide after 500 ms.

If you want to be sure the splash screen never disappears before your app is ready, set launchAutoHide to false; the splash screen will then stay visible until manually hidden. For the best user experience, your app should call hide() as soon as possible.

If, instead, you want to show the splash screen for a fixed amount of time, set launchShowDuration in your Capacitor configuration file.

In certain conditions, especially if the splash screen does not fully cover the device screen, it might happen that the app screen is visible around the corners (due to transparency). Instead of showing a transparent color, you can set a backgroundColor to cover those areas.

Possible values for backgroundColor are either #RRGGBB or #RRGGBBAA.

If you want to show a spinner on top of the splash screen, set showSpinner to true in your Capacitor configuration file.

You can customize the appearance of the spinner with the following configuration.

For Android, androidSpinnerStyle has the following options:

• horizontal
• small
• large (default)
• inverse
• smallInverse
• largeInverse

For iOS, iosSpinnerStyle has the following options:

• large (default)
• small

To set the color of the spinner use spinnerColor, values are either #RRGGBB or #RRGGBBAA.

If you want to have an animated splash screen on iOS, set animated to true, and launchAnimationDuration to the desired animation length in milliseconds in your [Capacitor configuration file] (https://capacitorjs.com/docs/config).

Once done, you can add the splash screen assets into your app's Assets.xcassets file inside a folder called Splash. Each frame should be placed in order, with Splash_xx (where xx is the number it belongs to in sequence, e.g. splash_1.png, splash_2.png, ...).

If you want to have an animated splash screen on Android, create a splash.xml in your app's res/drawable folder with an animation list showing the location and duration of each frame.

For example:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
	<item android:duration="22" android:drawable="@drawable/splash_1">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_2">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_3">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_4">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_5">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_6">
	</item>
	<item android:duration="22" android:drawable="@drawable/splash_7">
	</item>
</animation-list>

Be sure to correctly scale your images as well, as not scaling them may cause significant performance degradation when loading your app.

These config values are available:

In capacitor.config.json:

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "launchFadeOutDuration": 3000,
      "backgroundColor": "#ffffffff",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "showSpinner": true,
      "androidSpinnerStyle": "large",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#999999",
      "splashFullScreen": true,
      "splashImmersive": true,
      "layoutName": "launch_screen",
      "useDialog": true,
      "animated": true,
      "launchAnimationDuration": 3000
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/splash-screen" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      launchFadeOutDuration: 3000,
      backgroundColor: "#ffffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
      animated: true,
      launchAnimationDuration: 3000,
    },
  },
};

export default config;

To use splash screen images named something other than splash.png, set androidSplashResourceName to the new resource name. Additionally, in android/app/src/main/res/values/styles.xml, change the resource name in the following block:

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/NAME</item>
</style>

This plugin will use the following project variables (defined in your app's variables.gradle file):

$coreSplashScreenVersion version of androidx.core:core-splashscreen:$coreSplashScreenVersion (default: 1.0.0-rc01)

Adding Your Own Icons and Splash Screen Images ›

Creating a Dynamic/Adaptable Splash Screen for Capacitor (Android) ›

• show(...)
• updateProgress(...)
• hide(...)
• Interfaces

show(options?: ShowOptions | undefined) => Promise<void>

Show the splash screen

Since: 1.0.0

updateProgress(options: UpdateProgressOptions) => Promise<void>

Update progress of splash screen

Since: 1.2.3

hide(options?: HideOptions | undefined) => Promise<void>

Hide the splash screen

Since: 1.0.0