What Is a Splash Screen?
A splash screen is the first thing a user sees when they open your app. It appears instantly while the app loads its resources, initializes services, and prepares the first screen. A well-designed splash screen makes the app feel fast and polished. A poorly designed one shows a blank white screen that feels broken.
Both iOS and Android have evolved their splash screen systems significantly. Understanding the platform requirements is important because each enforces specific rules.
iOS Launch Screen
Storyboard Requirement
Apple requires a Launch Screen storyboard (LaunchScreen.storyboard) for all apps. This is a static interface that the system renders before your app code runs:
- Must be a storyboard file (not code, not an image)
- Cannot contain custom classes or dynamic content
- Can include static images, background colors, and text
- Auto Layout constraints control the layout across different device sizes
- The system caches the launch screen aggressively
What You Can Do
- Display your app logo centered on a solid background color
- Use the Asset Catalog for adaptive images
- Set a background color that matches your app's theme
What You Cannot Do
- Run any code during the launch screen
- Show a loading indicator or dynamic content
- Use custom fonts (system fonts only in the storyboard)
Transition to App
The launch screen disappears as soon as your app's first view is ready. To control this:
- With Expo, use expo-splash-screen to keep the splash visible until you call SplashScreen.hideAsync()
- With React Native (bare), use react-native-bootsplash for similar control
Android 12+ Splash Screen API
Starting with Android 12, the system provides a standardized splash screen for all apps. You cannot opt out.
Default Behavior
When the app launches, the system shows a solid background color with your app icon in the center and an optional branding image at the bottom.
Customization Options
- Background color: Set via your theme
- Icon: Uses your adaptive icon by default, or a custom splash icon
- Animated icon: Supports animated vector drawables (AVD) up to 1000ms
- Exit animation: Customize the transition from splash to first screen
For Android 11 and below, use the androidx.core:core-splashscreen compat library for consistent behavior.
Cross-Platform Implementation
Expo
expo-splash-screen is the standard approach:
- Configure splash in app.json (image, background color, resize mode)
- Expo generates native splash assets during prebuild
- Call SplashScreen.preventAutoHideAsync() at app start
- Call SplashScreen.hideAsync() when your app is ready
React Native (bare)
Use react-native-bootsplash (recommended):
- Generates native splash screen assets from a single source image
- Handles both iOS storyboard and Android splash theme
- Provides a smooth fade transition
Flutter
Use the flutter_native_splash package to configure background color and center image. The native splash transitions to Flutter's first frame automatically.
Loading States After Splash
Your app may still need to load data after the splash. Design a loading experience:
Skeleton Screens
Show the layout structure with placeholder shapes (gray boxes where content will appear). This feels faster than a spinner because the user sees the page "filling in."
Animated Transitions
Transition from the splash screen to a branded loading animation. Popular libraries: Lottie (cross-platform After Effects animations) and Rive (interactive animations with small file sizes).
Common Mistakes
- Showing a blank white/black screen before the splash (missing native configuration)
- Keeping the splash screen visible too long (more than 2-3 seconds feels stuck)
- Not testing on slow devices where initialization takes longer
- Forgetting that iOS caches the launch screen storyboard aggressively
Best Practices
- Keep the splash screen minimal: logo on a solid background
- Match the splash background color to your first screen for a seamless transition
- Load critical data during the splash, but set a timeout so the app always opens
- Test on low-end devices to ensure acceptable launch times
- Support both light and dark mode splash screens