Websites · Glossary
What is a splash screen?
A splash screen, called a launch screen on iPhone, is the screen an app shows from the moment it is opened until its first real screen is ready. Modern systems draw it from a simple specification, usually an icon centred on a background colour, so it appears instantly while the app loads its code, fonts and data.
The splash screen covers the second or two an app needs to start. Done well it feels like part of the app opening; done badly it feels like an advert in the way.
Indunil Asanka · Co-founder
4 min read · Published
| Platform | How it is defined | Size guidance |
|---|---|---|
| iPhone launch screen | A storyboard or launch screen settings in the app's configuration | Should resemble the first screen; Apple advises against using it as a branding moment |
| Android 12 and later | The system SplashScreen API: icon, background colour, optional branding | Icon with background 240 x 240 dp within a 160 dp circle; without background 288 x 288 dp within a 192 dp circle |
| Expo apps | The expo-splash-screen config plugin in app config | Expo recommends a 1024 x 1024 PNG with a transparent background |
What it is
When someone taps an app icon, the system needs something to show before the app's own code has run. A splash screen fills that gap. On iPhone, Apple's guidelines describe a launch screen that appears instantly and is quickly replaced by the first screen, ideally looking like that screen so the transition feels fast. On Android 12 and later, the system SplashScreen API draws a splash for every app automatically: the app icon on a background colour, with an optional branding image, animating into the app.
How it works
The splash is defined in native configuration, not drawn by the app's JavaScript, which is why it can appear before any code loads. In React Native apps, the app can keep the splash visible a little longer while it loads fonts or checks whether someone is signed in, then hide it once the first screen is ready. Expo provides this through the expo-splash-screen library and its config plugin, where you set an image, a background colour, a width and separate dark mode values. Android's documentation gives exact dimensions for the icon, which it treats like an adaptive icon.
When it matters
Every app has one, whether designed or not. It matters most on slower phones and the first launch after install, when loading takes longest. It matters for brand recognition in a quiet way: the icon and colour confirm the right app opened. And it matters in dark mode, where a white splash flashing before a dark app is jarring, so set a dark background too.
Common mistakes
Holding the splash for a fixed delay to show a logo longer, which only makes the app feel slow. Putting text or a tagline on it, which Apple discourages and which does not adapt to languages. An icon too large for Android's circle, so its edges are clipped. A splash that does not match the first screen's background, causing a flash. Forgetting a dark mode version. And hiding the splash before fonts load, so text jumps between fonts on the first screen.
Where it shows up in OneCraft
Phone apps built by OneCraft are Expo projects, using Expo Router, React Native Reusables and Uniwind, in their own repository. Each app is planned with a design family and its own colours, and its Account tab lets people choose Light, Dark or Follow device appearance; every tab is checked at 390 and 768 pixels and Home in dark mode. The project downloads as a zip with app.json filled, and builds run through Expo on paid plans.
Questions people ask
Is a splash screen the same as a launch screen?
Yes, in everyday use. Apple's term is launch screen; Android's API is called SplashScreen; most people say splash screen for both. The purpose is the same: something to show instantly while the app starts, replaced by the first real screen as soon as it is ready.
How long should a splash screen show?
Only as long as the app needs to load. There is no ideal number of seconds. A splash that stays for a fixed delay after the app is ready wastes people's time. Load what the first screen needs, hide the splash, and load everything else in the background.
What size should a splash screen image be?
Expo recommends a 1024 x 1024 PNG with a transparent background for its splash icon. On Android 12 and later, the icon follows adaptive icon rules: 240 x 240 dp inside a 160 dp circle with a background, or 288 x 288 dp inside a 192 dp circle without. Keep the logo well inside the circle.
Can a splash screen be animated?
Android 12 and later support an animated icon in the system splash screen, within time limits set by the system. iPhone launch screens are static. Many apps fake an animation by showing a matching screen in their own code after the system splash hides, but that adds to the wait.
Do I need a different splash for dark mode?
It is strongly recommended. A light splash before a dark app, or the reverse, flashes the wrong colour at people every launch. Expo's splash configuration accepts separate dark mode settings, and Android's API reads night resources, so set a dark background and, if needed, a lighter icon.
Make one with websites
The button opens the generator with this use case already described. Change the wording to match your own.
Create a website with OneCraftRelated questions
- App icon sizes for iPhone and AndroidApp icon sizes for iPhone and Android: the 1024 x 1024 App Store icon, the 512 x 512 Google Play icon, adaptive icon layers and safe zones.
- What is a tab bar?What is a tab bar? The row of top level destinations at the bottom of a phone app: Apple and Material guidance, how many tabs to use and what to avoid.
- What is Expo Router?What is Expo Router? The file based router for Expo and React Native apps: files become screens, folders become stacks and tabs, and every screen gets a link.
- What is Expo for React Native?What is Expo? An open source framework and set of services for building iPhone, Android and web apps with React Native from one codebase. How it fits together.
Written and checked by the OneCraft team. Last checked .