Help loading multiple fonts

I’m trying to get rid of the warning I receive because of fonts not loading before the app loads. I’m attempting to follow the example here https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

When I attempt to add fonts into the font assets array I’m receiving and error. Is there another way to accomplish this with cacheFonts and assign a name?

The error I receive is just related to an unexpected token “,” so I assume this is because of the :

If i remove the name of the font it loads ok.

const fontAssets = cacheFonts([
‘QuioIcons’: require(’…/…/…/assets/icons/icomoon.ttf’),
‘RobotoCondensed-Bold’: require(’…/…/…/assets/fonts/RobotoCondensed-Bold.ttf’),
‘RobotoCondensed-Regular’: require("…/…/…/assets/fonts/RobotoCondensed-Regular.ttf"),
‘Roboto-Italic’: require("…/…/…/assets/fonts/Roboto-Italic.ttf"),
‘Roboto-Light’: require("…/…/…/assets/fonts/Roboto-Light.ttf"),
‘Roboto-Medium’: require("…/…/…/assets/fonts/Roboto-Medium.ttf"),
‘Roboto-Regular’: require("…/…/…/assets/fonts/Roboto-Regular.ttf")
]);

hey @dekm thanks for using Expo,

The current way you have the following objects in JavaScript is invalid syntax.

[
    'string': require('example'),
]

Doesn’t work, but don’t worry! your first hint is this : which probaby tells you that the line should be wrapped in an object.

[{ 'string': require('example') }];

Try this, and I think your current problem will be solved. Good luck :slight_smile:

1 Like

Hey Thanks Jimmy. I was able to get past that block with the correct syntax like you suggested. It appears now that the async call is never being made.

If I do a log on the error I see it being called.

render() {
    if (!this.state.isReady) {
      console.log("LOADING ", this.state.isReady);
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.log("ERROR IN APP LOADING")}
        />
      );
    }
    return <App />
  }
  // THIS DOES NOT WORK FOR SOME REASON
   async _loadAssetsAsync() {
     /*const imageAssets = cacheImages([
       require('./assets/images/exponent-wordmark.png'),
       'http://www.google.com/logo.png',
     ]);
 */
   console.log("_loadAssetsAsync");
     const fontAssets = cacheFonts({
       'QuioIcons': require('./assets/icons/icomoon.ttf'),
       'RobotoCondensed-Bold': require('./assets/fonts/RobotoCondensed-Bold.ttf'),
       'RobotoCondensed-Regular': require("./assets/fonts/RobotoCondensed-Regular.ttf"),
       'Roboto-Italic': require("./assets/fonts/Roboto-Italic.ttf"),
       'Roboto-Light': require("./assets/fonts/Roboto-Light.ttf"),
       'Roboto-Medium': require("./assets/fonts/Roboto-Medium.ttf"),
       'Roboto-Regular': require("./assets/fonts/Roboto-Regular.ttf")
     });

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

hey @dekm, from your post, it seems like _loadAssetsAsync is getting run because you said the console.log is getting run. If the issue is that you dont think await Promise.all... is getting run, how do you know this?

The log console.log("_loadAssetsAsync"); never gets called. It’s the onError={console.log(“ERROR IN APP LOADING”)} log that get’s called. So no idea why this does not work. Every other method I tried gives me an error the fonts are not loaded yet.

hmm. How about doing a try catch and printing out the error? maybe this will help to figure out what exactly the issue is

startAsync={this._loadAssetsAsync} never gets called from AppLoading appears to be my issue.

The below console log is never called.

async _loadAssetsAsync() {

console.log("_loadAssetsAsync");

What’s your version of 'expo' in package.json?

current version “expo”: “^19.0.0”

The docs you linked to are for version 21 (at the time of posting this message). For version 19, the docs don’t specify the use of a startAsync prop: https://docs.expo.io/versions/v19.0.0/guides/preloading-and-caching-assets.html

You might either want to switch to version 21 (see “Upgrading your app” on the bottom here: https://blog.expo.io/expo-sdk-21-0-0-is-now-available-be33b79921b7) and continue doing what you’re doing, or switch your app’s code to be compatible with version 19.

ok thank you I will try the upgrade route as I am having some other issues with linking connections also.

1 Like

Ok so yes it was my version of expo. I updated everything to 21 and now everything works as intended.

class AppContainer extends Component {
  state = {
    isReady: false,
  }
  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.log("ERROR IN APP LOADING")}
        />
      );
    }
    return <App />
  }

   async _loadAssetsAsync() {
     /*const imageAssets = cacheImages([
       require('./assets/images/exponent-wordmark.png'),
       'http://www.google.com/logo.png',
     ]);
 */
   console.log("_loadAssetsAsync");
     const fontAssets = cacheFonts([{
       'QuioIcons': require('./assets/icons/icomoon.ttf'),
       'RobotoCondensed-Bold': require('./assets/fonts/RobotoCondensed-Bold.ttf'),
       'RobotoCondensed-Regular': require("./assets/fonts/RobotoCondensed-Regular.ttf"),
       'Roboto-Italic': require("./assets/fonts/Roboto-Italic.ttf"),
       'Roboto-Light': require("./assets/fonts/Roboto-Light.ttf"),
       'Roboto-Medium': require("./assets/fonts/Roboto-Medium.ttf"),
       'Roboto-Regular': require("./assets/fonts/Roboto-Regular.ttf")
     }]);
     await Promise.all([...fontAssets]);
   }
}