AppLoading

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 Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

Terminal

→ 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';

The following props are recommended, but optional. 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.