Get Started
API Reference


A React component that tells Expo to keep the app loading screen open if it is the first and only component rendered in your app. Unless autoHideSplash prop is set to false, the loading screen will disappear and your app will be visible when the component is removed.
This is incredibly useful to let you download and cache fonts, logos, icon images and other assets that you want to be sure the user has on their device for an optimal experience before rendering and they start using the app.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb


This API is pre-installed in managed apps. It is not available for bare React Native apps.

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset } from 'expo-asset';
import { AppLoading } from 'expo';

export default class App extends React.Component {
  state = {
    isReady: false,

  render() {
    if (!this.state.isReady) {
      return (
          onFinish={() => this.setState({ isReady: true })}
      ); }

    return (
      <View style={{ flex: 1 }}>
        <Image source={require('./assets/snack-icon.png')} />

  async _cacheResourcesAsync() {
    const images = [require('./assets/snack-icon.png')];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    return Promise.all(cacheImages);

import { AppLoading } from 'expo';

The following props are recommended, but optional for the sake of backwards compatibility (they were introduced in SDK21). If you do not provide any props, you are responsible for coordinating loading assets, handling errors, and updating state to unmount the AppLoading component.
  • startAsync (function) -- A function that returns a Promise, and the Promise should resolve when the app is done loading required data and assets.
  • onError (function) -- If startAsync throws an error, it is caught and passed into the function provided to onError.
  • onFinish (function) -- (Required if you provide startAsync). Called when startAsync resolves or rejects. This should be used to set state and unmount the AppLoading component.
  • autoHideSplash (boolean) -- Whether to hide the native splash screen as soon as you unmount the AppLoading component. See SplashScreen module for an example.