Guide to configuring splash screens in Capacitor apps including asset generation, animation, and programmatic control. Use this skill when users need to customize their app launch experience.

Splash Screen in Capacitor Configure and customize splash screens for iOS and Android. When to Use This Skill User wants to customize splash screen User needs splash screen assets User wants animated splash User has splash screen issues Quick Start Install Plugin Basic Configuration Programmatic Control Generate Assets Using Capacitor Assets iOS Sizes Size Usage 2732x2732 iPad Pro 12.9" 2048x2732 iPad Pro portrait 2732x2048 iPad Pro landscape 1668x2388 iPad Pro 11" 1536x2048 iPad 1242x2688 iPhone XS Max 828x1792 iPhone XR 1125x2436 iPhone X/XS 1242x2208 iPhone Plus 750x1334 iPhone 8 640x1136 iPhone SE Android Sizes Density Size mdpi 320x480 hdpi 480x800 xhdpi 720x1280 xxhdpi 960x1600 xxxhdpi 1280x1920 iOS Storyboard Android Configuration XML Splash Screen (Android 11+) Colors Dark Mode Support Animated Splash Lottie Animation Best Practices 1. Keep it fast Under 2 seconds total 2. Match branding Use consistent colors/logo 3. Support dark mode Provide dark variants 4. Don't block Load essentials only 5. Progressive reveal Fade out smoothly Troubleshooting Issue Solution White flash Match splash background to app Stretching Use correct asset sizes Not hiding Call hide() manually Dark mode wrong Add values night resources Resources Capacitor Splash Screen: https://capacitorjs.com/docs/apis/splash screen Capacitor Assets: https://github.com/ionic team/capacitor assets Android Splash Screens: https://developer.android.com/develop/ui/views/launch/splash screen

capacitor-splash-screen