function cacheImages(images) {
return images.map(image => {
if (typeof image === 'string') {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
function cacheFonts(fonts) {
return fonts.map(font => Font.loadAsync(font));
}
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = { isReady : false };
}
async _loadAssetsAsync () {
const imageAssets = cacheImages(require('./assets/icon.png'));//['https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png']);
const fontAssets = cacheFonts([FontAwesome.font]);
await Promise.all([...imageAssets, ...fontAssets]);
}
render() {
if (!this.state.isReady) {
return (
<AppLoading
startAsync={this._loadAssetsAsync}
onFinish={() => this.setState({ isReady: true })}
onError={alert('Error loading assets')}/>
);
}
return (
<Provider store={Store}>
<View style={{ flex:1, width: '100%', height: '100%' }}>
<Navigator></Navigator>
<LoadingModal></LoadingModal>
</View>
</Provider>
);
I tried to use the expo provided code on their website to prefetch the assets and other related images before the application load.
i received an error after rendered the Apploading element. The exception does not show any particular error which make any sense.
AppLoading threw an unexpected error when loading:
cacheImages@http://localhost:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fsimonlam%2FDesktop%2Freact_native%2F
Remove the alert in the AppLoading onError
method and use console.error
instead,
There's a parsing error on that line.