Missed the live Ionic Event? Check out all the product announcements, new releases, and more.



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


npm install @capacitor/splash-screen
npx cap sync


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

// Hide the splash (you should do this on app launch)

// Show the splash for an indefinite amount of time:
  autoHide: false

// Show the splash for two seconds and then automatically hide it:
  showDuration: 2000,
  autoHide: true

Hiding the Splash Screen

By default, the Splash Screen is set to automatically hide after a certain amount of time (3 seconds). However, your app should boot much faster than this!

To make sure you provide the fastest app loading experience to your users, you should hide the splash screen when your app is ready to be used by calling hide() as soon as possible.

If your app needs longer than 3 seconds to load, configure the default duration by setting launchShowDuration in your Capacitor configuration file.

If you want to be sure the splash never hides before the app is fully loaded, set launchAutoHide to false.

Background Color

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.

Full Screen & Immersive (Android only)

You can enable splashFullScreen to hide status bar, or splashImmersive to hide both status bar and software navigation buttons. If both options are enabled splashImmersive takes priority, as it also fulfils splashFullScreen functionality.


These config values are available:

  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "backgroundColor": "#ffffffff",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "androidSpinnerStyle": "large",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#999999",
      "showSpinner": true,
      "splashFullScreen": true,
      "splashImmersive": true


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>

Example Guides

Adding Your Own Icons and Splash Screen Images ›

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



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

Show the splash screen

Param Type
options ShowOptions

Since: 1.0.0


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

Hide the splash screen

Param Type
options HideOptions

Since: 1.0.0



Prop Type Description Default Since
autoHide boolean Whether to auto hide the splash after showDuration 1.0.0
fadeInDuration number How long (in ms) to fade in. 200 1.0.0
fadeOutDuration number How long (in ms) to fade out. 200 1.0.0
showDuration number How long to show the splash screen when autoHide is enabled (in ms) 3000 1.0.0


Prop Type Description Default Since
fadeOutDuration number How long (in ms) to fade out. 200 1.0.0
<- Share
Status Bar ->
Contribute ->