expo-app-loading
tells expo-splash-screen
to keep the splash screen visible while the AppLoading component is mounted.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-app-loading
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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); } }
import AppLoading from 'expo-app-loading';
AppLoading
component.function
that returns a Promise
, and the Promise
should resolve when the app is done loading required data and assets.startAsync
throws an error, it is caught and passed into the function provided to onError
.startAsync
). Called when startAsync
resolves or rejects. This should be used to set state and unmount the AppLoading
component.