expo-splash-screen

Control the native splash screen visibility until your app is ready

expo-splash-screen

Version: 55.0.6

Provides a module to keep the native Splash Screen visible until you choose to hide it. Useful for loading fonts, assets, or data before showing your app.

Installation

npx expo install expo-splash-screen

Usage

import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

function App() {
  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load fonts, make API calls, etc.
        await loadResourcesAsync();
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        await SplashScreen.hideAsync();
      }
    }

    prepare();
  }, []);

  return <YourApp />;
}

API Reference

Methods

SplashScreen.preventAutoHideAsync() · () => Promise<boolean>

Prevents the splash screen from auto-hiding

await SplashScreen.preventAutoHideAsync();

Call this before rendering your root component to prevent the splash screen from disappearing automatically.

SplashScreen.hideAsync() · () => Promise<boolean>

Hides the splash screen

await SplashScreen.hideAsync();

Call this after your app has finished loading resources and is ready to display.

SplashScreen.setOptions(options) · (options: SplashScreenOptions) => Promise<void>

Android only: Configure splash screen behavior

await SplashScreen.setOptions({
  duration: 1000,
  fade: true
});

Examples

Basic Usage with Asset Loading

import * as SplashScreen from 'expo-splash-screen';
import { Asset } from 'expo-asset';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Load fonts
        await Font.loadAsync({
          'Inter-Bold': require('./assets/fonts/Inter-Bold.ttf'),
        });
        
        // Load assets
        await Asset.loadAsync([
          require('./assets/images/logo.png'),
        ]);
        
        // Artificial delay for demo
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

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

  if (!appIsReady) {
    return null;
  }

  return <YourApp />;
}

With React Navigation

import * as SplashScreen from 'expo-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { useCallback, useEffect, useState } from 'react';
import { View } from 'react-native';

SplashScreen.preventAutoHideAsync();

function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load resources here
        await loadResources();
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <NavigationContainer>
        {/* Your navigation */}
      </NavigationContainer>
    </View>
  );
}

Animated Splash Screen Transition

import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';
import { Animated, StyleSheet } from 'react-native';

SplashScreen.preventAutoHideAsync();

function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [fadeAnim] = useState(new Animated.Value(0));

  useEffect(() => {
    async function prepare() {
      try {
        await loadResources();
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  useEffect(() => {
    if (appIsReady) {
      // Hide splash and fade in app
      SplashScreen.hideAsync().then(() => {
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }).start();
      });
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
      <YourApp />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 }
});

Error Handling

import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';

SplashScreen.preventAutoHideAsync();

function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    async function prepare() {
      try {
        await loadCriticalResources();
        setAppIsReady(true);
      } catch (e) {
        setError(e as Error);
      } finally {
        await SplashScreen.hideAsync();
      }
    }

    prepare();
  }, []);

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Error loading app: {error.message}</Text>
      </View>
    );
  }

  if (!appIsReady) {
    return null;
  }

  return <YourApp />;
}

With Multiple Loading Steps

import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function App() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    async function prepare() {
      try {
        // Step 1: Load fonts (33%)
        await loadFonts();
        setProgress(33);

        // Step 2: Load assets (66%)
        await loadAssets();
        setProgress(66);

        // Step 3: Initialize app (100%)
        await initializeApp();
        setProgress(100);
      } catch (e) {
        console.warn(e);
      } finally {
        await SplashScreen.hideAsync();
      }
    }

    prepare();
  }, []);

  if (progress < 100) {
    return null;
  }

  return <YourApp />;
}

Configuration

Configure Splash Image

app.json:

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

Advanced Configuration

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#1E1E1E",
      "imageLight": "./assets/splash-light.png",
      "imageDark": "./assets/splash-dark.png"
    },
    "android": {
      "splash": {
        "image": "./assets/splash-android.png",
        "resizeMode": "native",
        "backgroundColor": "#000000"
      }
    },
    "ios": {
      "splash": {
        "image": "./assets/splash-ios.png",
        "resizeMode": "cover",
        "backgroundColor": "#FFFFFF",
        "tabletImage": "./assets/splash-tablet.png"
      }
    }
  }
}

TypeScript

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

// Prevent auto-hide
const prevented: boolean = await SplashScreen.preventAutoHideAsync();

// Hide splash
const hidden: boolean = await SplashScreen.hideAsync();

Platform Support

Platform	Supported
iOS	✅
Android	✅
Web	❌

On web, there is no native splash screen. Use a custom loading component instead.

Best Practices

1. Call preventAutoHideAsync Early: Call it at the module level, before any component renders
2. Always Hide: Always call hideAsync() in a finally block to ensure the splash screen is hidden
3. Handle Errors: Catch and handle errors during loading to prevent stuck splash screen
4. Optimize Loading: Only load critical resources during splash screen
5. Test on Device: Splash screen behavior can differ between simulator and device

If you never call SplashScreen.hideAsync(), your app will remain stuck on the splash screen.

Resources

• Official Documentation
• Splash Screen Guide
• GitHub Repository