Expo SDK 50/51/52 Compliant · app.json Snippets · contain / cover ModeCategory: Mobile & Splash

Expo Splash Screen Generator (app.json Config & Asset Builder)

A specialized configuration and asset builder for React Native developers using Expo. Generate properly proportioned splash icons, background color values, and pre-written app.json / app.config.js code snippets that work out of the box with the modern expo-splash-screen module.

Quick Tutorial

How to use Expo Splash Screen Generator

1Step 1

Upload App Emblem or Logo

Provide your brand logo as an SVG or high-resolution PNG image.

2Step 2

Configure Background & Resize Mode

Select your splash background color and pick between contain, cover, and native resizeMode behavior.

3Step 3

Download Assets & Copy app.json

Download splash.png for your assets directory and copy the pre-formatted app.json splash block.

Technical Reference

Technical specifications & standards

Verified standards, supported properties, and industry specifications implemented in this utility.

app.json Property	Type	Example Value	Description
splash.image	String (File Path)	"./assets/splash.png"	Path to the center splash icon or full image
splash.resizeMode	Enum	"contain" \| "cover" \| "native"	contain preserves aspect ratio; cover fills viewport
splash.backgroundColor	String (Hex)	"#21392d"	Color fill behind the splash image during load
android.splash.mdpi	String (Path)	"./assets/android/splash-mdpi.png"	Optional density-specific Android asset override

In-Depth Documentation

Architecture & best practices

Best Practices for expo-splash-screen and App Loading

In modern Expo applications, import SplashScreen from 'expo-splash-screen' and call SplashScreen.preventAutoHideAsync() at top-level execution. This holds the native splash screen visible while fonts, authentication tokens, and initial API states resolve, preventing unwanted flash of unstyled content (FOUC). Once your layout is ready, invoke SplashScreen.hideAsync().

Resize Mode: Why 'contain' is Preferred Over 'cover'

Using resizeMode: 'cover' stretches and crops full-bleed images across differing phone aspect ratios (such as 16:9 on older devices vs 19.5:9 on modern phones). Setting resizeMode: 'contain' with a clean, branded backgroundColor guarantees your emblem remains perfectly proportioned and unclipped on every device.

Common Questions

Frequently asked questions

Everything you need to know about formats, browser compatibility, and usage.

What is the recommended splash.png dimensions for Expo?▼

Expo recommends providing a splash icon of at least 1242 x 2436 px or an icon centered on a 1024 x 1024 px square canvas paired with an explicit backgroundColor in app.json.

How do I prevent the white flash before my app mounts?▼

Ensure your app.json splash.backgroundColor matches your app's root background color, and use SplashScreen.preventAutoHideAsync() in conjunction with your root layout's onLayout callback.

Does this work with Expo Router and Expo Prebuild?▼

Yes! The generated configuration is 100% compliant with Expo Router v3/v4 and runs smoothly through npx expo prebuild without manual native editing.

Can I configure dark mode splash screens in Expo?▼

Yes. In Expo SDK 50+, you can configure dark mode splash variants under the userInterfaceStyle setting using plugins or density-specific overrides.