Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to load custom font file after upgrading 17.0.0 to 18.0.3

See original GitHub issue

Here is my test code.

export default class App extends React.Component {
  state = {
    fontLoaded: false,
  }

  async componentDidMount() {
    await Expo.Font.loadAsync({
      'Roboto': require('./assets/fonts/Roboto.ttf'),
      'Roboto_medium': require('./assets/fonts/Roboto_medium.ttf'),
      'Ionicons': require('./assets/fonts/Ionicons.ttf'),
      'MaterialIcons': require('./assets/fonts/MaterialIcons.ttf')
    })
    this.setState({ fontLoaded: true });
  }

  render() {
    if (this.state.fontLoaded) {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      )
    } else {
      return <Expo.AppLoading />
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I copied font files into ‘./assets/fonts’. But SDK shows error like below and fonts are not loaded. I worked with 17.0.0.

Possible Unhandled Promise Rejection (id: 0):
Error: File '/Users/jdhlee/Library/Developer/CoreSimulator/Devices/A71CE168-C004-477D-B176-8B3601A2E826/data/Containers/Bundle/Application/3C8DBE15-2AA1-4D93-A130-C74D7EC08527/Exponent-1.17.1.app/undefinedExponentAsset-54a91b0619ccf9373d525109268219dc.ttf' for font 'B77F4A23-751D-48A8-8B71-95F5B6C41229-Roboto' doesn't exist
createErrorFromErrorData@http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:1911:24
http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:1869:49
__invokeCallback@http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:2187:21
http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:2036:32
__guard@http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:2123:11
invokeCallbackAndReturnFlushedQueue@http://packager.2h-mcz.brucejlee.my-new-project.exp.direct:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:2035:19
invokeCallbackAndReturnFlushedQueue@[native code]

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:14 (5 by maintainers)

Top GitHub Comments

2reactions

idecommented, Jul 11, 2017

Really sorry about the time you spent trying to figure this out. Thanks for your patience.

2reactions

idecommented, Jul 11, 2017

Sorry for this bug. This might have been due to an incompatible version of the expo package (incompatible versions are 18.0.8 and 19.0.0-alpha.0 – check node_modules/expo/package.json to see which version you have).

Can you try installing expo@^18.0.6, restarting the packager, and seeing if that fixes your issue?

Top Results From Across the Web

Why does the android studio gives me an error when I add the ...

Try this: You have to create a folder named font inside the res folder and copy your font inside the new folder.

Adding a Custom Font to Your App - Apple Developer

After adding the font file to your project, you need to let iOS know about the font. To do this, add the key...

Add Firebase to your Android project

Step 1: Create a Firebase project; Step 2: Register your app with Firebase; Step 3: Add a Firebase configuration file; Step 4: Add...

Troubleshooting - Puppeteer

If you get an error that looks like this when trying to launch Chromium: (node:15505) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser ...

Upgrading to React 18 with TypeScript - LogRocket Blog

The upgrade of the React type definitions to support React 18 involved ... After a significant period of time in alpha and beta,...