Preloading and Caching Assets Expo v21

Expo SDK
1

Hi

Getting a red screen error “undefined is not an object (evaluating asset.downloadAsync)” when adding the asset preload and cache code for expo v21. This is the code in App.js. Many thanks for your help.

import React, { Component } from 'react';
import Image from 'react-native';
import FontAwesome from '@expo/vector-icons';
import { AppLoading, Asset, Font } from 'expo';
import firebase from 'firebase';
import firebaseConfig from './config';
import Routes from './routes';

function cacheImages(images) {
  return images.map((image) => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    }
    return Asset.fromModule(image).downloadAsync();
  });
}

function cacheFonts(fonts) {
  return fonts.map(font => Font.loadAsync(font));
}

export default class App extends Component {
  state = {
    isReady: false,
  };

  componentDidMount() {
    firebase.initializeApp(firebaseConfig);
  }

  loadAssetsAsync = async () => {
    const imageAssets = cacheImages([
      require('./assets/icons/app-icon.png'),
      require('./assets/icons/loading-icon.png'),
      require('./assets/images/logo.png'),
    ]);

    const fontAssets = cacheFonts([FontAwesome.font]);

    await Promise.all([...imageAssets, ...fontAssets]);
  };

  render() {
    if (!this.state.appIsReady) {
      return (
        <AppLoading
          startAsync={this.loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          // onError={console.warn}
        />
      );
    }

    return <Routes />;
  }
}