Expo AppLoading

GitHub

npm

---

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

Installation

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