Help loading multiple fonts

#1

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")
]);

#2

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
#3

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,
     ]);
   }
#4

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?

#5

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.

#6

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

#7

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");

#8

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

#9

current version “expo”: “^19.0.0”

#10

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.

#11

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

1 Like
#12

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]);
   }
}