Splash Screens

This guide takes ~15 minutes to complete.

💫 Overview

Splash screens provide visual feedback during app initialization and should match your brand.

🎯 Android Splash Screen

Basic Image Replacement

Replace in android/app/src/main/res/drawable/:

splashscreen.jpg    # Your splash image

Create splash_screen.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splashscreen" />
    </item>
</layer-list>

React Native Splash Screen

Install: npm install react-native-splash-screen

Usage:

import SplashScreen from 'react-native-splash-screen'

export default function App() {
  useEffect(() => {
    SplashScreen.hide() // Hide when app is ready
  }, [])

  return <YourApp />
}

🍎 iOS Splash Screen

Update ios/[ProjectName]/LaunchScreen.storyboard:

Add your logo and brand elements
Use Auto Layout for responsive sizing
Set background colors to match theme

Replace splash assets:

splash-screen.jpg         # Main splash image
splash-screen 1.jpg       # Alternate resolution 1
splash-screen 2.jpg       # Alternate resolution 2

Update Contents.json:

{
  "images": [
    { "filename": "splash-screen.jpg", "idiom": "universal" },
    { "filename": "splash-screen 1.jpg", "scale": "1x" },
    { "filename": "splash-screen 2.jpg", "scale": "2x" }
  ]
}

🎨 Guidelines

Portrait orientation, centered content
Avoid notches/home indicators
Keep duration brief (2-3 seconds max)
Match app icon and main UI colors

🔍 Testing

Android

npx react-native run-android --reset-cache
adb shell am force-stop com.your.app.package
adb shell am start com.your.app.package

iOS

npx react-native run-ios --reset-cache
# Use Hardware > Restart App in Simulator

⚠️ Issues

Not showing:

Verify file paths and Xcode storyboard
Check Auto Layout constraints
Test on multiple device sizes

Splash Screens

On this page