GitHub
npm
Deprecated. Use expo-splash-screen directly instead:
SplashScreen.preventAutoHideAsync()
andSplashScreen.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.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
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.
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
Type: React.Component<AppLoadingProps>
autoHideSplash
Optional • Type: boolean
Whether to hide the native splash screen as soon as you unmount the AppLoading
component.
Auto-hiding is enabled by default. See SplashScreen module for an example.
Deprecated
onError
Type: (error: Error) => void
If startAsync
throws an error, it is caught and passed into the function provided to onError
.
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.
Deprecated
startAsync
Type: () => Promise<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.