Splash screen configuration with expo-splash-screen, animated transitions, and asset preloading.

Splash Screen

The splash screen is the first thing users see when launching your app. ScaleRocket Mobile uses expo-splash-screen to show the splash while loading fonts, checking auth state, and preloading data.

Basic Configuration

Configure the splash screen in app.json:

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#FFFFFF"
    }
  }
}

Property	Value	Description
`image`	Path to PNG	The splash image (use 1284x2778 for best quality)
`resizeMode`	`"contain"` or `"cover"`	How the image fits the screen
`backgroundColor`	Hex color	Background behind the image

Keeping the Splash Visible

By default, the splash hides as soon as the app renders. Use preventAutoHideAsync to keep it visible while loading:

import * as SplashScreen from "expo-splash-screen";

// Prevent auto-hide before the app is ready
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [appReady, setAppReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Load fonts
        await Font.loadAsync({
          "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
        });
        // Check auth
        await checkSession();
        // Preload critical data
        await preloadDashboardData();
      } catch (e) {
        console.warn(e);
      } finally {
        setAppReady(true);
      }
    }

    prepare();
  }, []);

  useEffect(() => {
    if (appReady) {
      SplashScreen.hideAsync();
    }
  }, [appReady]);

  if (!appReady) return null;

  return <Slot />;
}

Platform-Specific Configuration

iOS

{
  "expo": {
    "ios": {
      "splash": {
        "image": "./assets/splash-ios.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "dark": {
          "image": "./assets/splash-ios-dark.png",
          "backgroundColor": "#111827"
        }
      }
    }
  }
}

Android

{
  "expo": {
    "android": {
      "splash": {
        "image": "./assets/splash-android.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "dark": {
          "image": "./assets/splash-android-dark.png",
          "backgroundColor": "#111827"
        }
      }
    }
  }
}

Dark Mode Splash

Support both light and dark splash screens with the dark key as shown above. The OS picks the right version based on the device theme.

Animated Splash Transition

Create a smooth transition from splash to app content:

import Animated, { FadeOut } from "react-native-reanimated";

function AnimatedSplash({ onFinish }: { onFinish: () => void }) {
  return (
    <Animated.View
      exiting={FadeOut.duration(500)}
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#FFFFFF",
      }}
      onLayout={() => {
        // Start hide after animation
        setTimeout(onFinish, 200);
      }}
    >
      <Image
        source={require("./assets/splash.png")}
        style={{ width: 200, height: 200 }}
        resizeMode="contain"
      />
    </Animated.View>
  );
}

Preloading Assets

Load everything you need during the splash:

async function preloadAssets() {
  const imageAssets = [
    require("./assets/images/logo.png"),
    require("./assets/images/onboarding-1.png"),
  ].map((image) => Asset.fromModule(image).downloadAsync());

  const fontAssets = Font.loadAsync({
    "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
    "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
  });

  await Promise.all([...imageAssets, fontAssets]);
}

Image Sizing Guide

Device	Resolution	Recommended Splash Size
iPhone 15 Pro Max	1290x2796	1284x2778
iPhone SE	750x1334	750x1334
Pixel 8	1080x2400	1080x2400
Galaxy S24	1080x2340	1080x2340

Use resizeMode: "contain" with a matching backgroundColor to handle different screen sizes gracefully.

Common Issues

White flash before splash: Set backgroundColor in app.json to match your splash
Splash stays forever: Ensure hideAsync() is called even if loading fails (use finally)
Image quality: Use at least 1284x2778 resolution
Expo Go: Splash screen configuration only works in development builds

Splash Screen

On this page