Guides
Plan-enterprise-icon
Expo Application Services
API Reference

AppLoading

Info-icon
Deprecated. Use expo-splash-screen directly instead: SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync(). Learn more.
expo-app-loading tells expo-splash-screen to keep the splash screen visible while the AppLoading component is mounted.
This is useful to 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.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon

Installation

Terminal
→ npx expo install expo-app-loading

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

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

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

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._cacheResourcesAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      );
    }

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

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

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

    return Promise.all(cacheImages);
  }
}

API

import AppLoading from 'expo-app-loading';

Component

AppLoading

Type: Component<AppLoadingProps>

Props

Warning-icon
Deprecated

onError

Type: (error: Error) => void

If startAsync throws an error, it is caught and passed into the function provided to onError.

Warning-icon
Deprecated

onFinish

Type: () => void

(Required if you provide startAsync). Called when startAsync resolves or rejects. This should be used to set state and unmount the AppLoading component.

Warning-icon
Deprecated

startAsync

Type: () => void

A function that returns a Promise, and the Promise should fulfil when the app is done loading required data and assets. You can do this process manually if you prefer. This is mainly for backwards compatibility and it is not recommended.

When provided, requires providing onError prop as well.

  • Message-iconAsk a question on the forums about AppLoading
  • Github-iconView open bug reports for AppLoading
  • Code-iconView source code for AppLoading
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?