Font not found yellowbox warning

I get the following yellowbox warning when my app runs:

Font not found 
/data/user/0/host.exp.exponent/cache/ExperienceData/%40anonymous%2Flogindemo-1163fc3b- 
   4484-44a2-9076-b4b71df1e55c/ExponentAsset-300996394b166f5ee73c58bbf468913f.ttf
  - node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:80:57 in <unknown>
  - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:400:4 in __invokeCallback
  - ... 4 more stack frames from framework internals

and I’m just curious as to what it means because I can use all the fonts just fine, except 1 of the loaded font, which is the first on the cacheFonts array. Here’s how I loaded the font in my app.js:

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

async _loadAssetsAsync() {
        const fontAssets = cacheFonts([
            {RobotoBlack: require('./assets/fonts/Roboto-Black.ttf')},
            {RobotoBold: require('./assets/fonts/Roboto-Bold.ttf')},
            {RobotoMedium: require('./assets/fonts/Roboto-Medium.ttf')},
            {RobotoRegular: require('./assets/fonts/Roboto-Regular.ttf')},
            {RobotoLight: require('./assets/fonts/Roboto-Light.ttf')}
       ]);

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

then use this in render:

<AppLoading
           startAsync={this._loadAssetsAsync}
           onFinish={() => this.setState({isReady: true})}
           onError={console.warn}
        />

Now I just avoided using RobotoBlack altogether at this point, but I’m just curious as to why this happened, I have double checked that the font is there in my assets. And I’m extra sure about this because if I changed the order of the array, it still is the first in cacheFonts array that’s not loading properly.

I’m using expo “sdkVersion”: “26.0.0” in case anyone need to know…

Any pointers?

Thanks in advance! :slight_smile:

hi! please provide a mcve (How to create a Minimal, Reproducible Example - Help Center - Stack Overflow) for this. it’s difficult to help when we don’t have runnable code

Hi, thanks for the reply, so I guess I’ll just pass the full code for my app.js here?

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Font, AppLoading } from 'expo';

import Router from 'loginDemo/config/routes.js'
import store from 'loginDemo/redux/store.js';

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

export default class App extends Component {
    constructor() {
        super();
        this.state = {
            isReady: false,
        }
    }

    async _loadAssetsAsync() {
        const fontAssets = cacheFonts([
            {RobotoBlack: require('./assets/fonts/Roboto-Black.ttf')},
            {RobotoBold: require('./assets/fonts/Roboto-Bold.ttf')},
            {RobotoMedium: require('./assets/fonts/Roboto-Medium.ttf')},
            {RobotoRegular: require('./assets/fonts/Roboto-Regular.ttf')},
            {RobotoLight: require('./assets/fonts/Roboto-Light.ttf')}
        ]);

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

    render() {
        if (!this.state.isReady) {
            return (
                <AppLoading
                    startAsync={this._loadAssetsAsync}
                    onFinish={() => this.setState({isReady: true})}
                    onError={console.warn}
                />
            );
        }
        console.disableYellowBox = true;
        Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT_UP);
        return (
            <Provider store={store}>
                    <Router/>
            </Provider>
        );
    }
}

Not sure how is this any more helpful than the one I posted earlier tho…
But the thing is I simply followed this guide here plain and simple and then access it from my styles/theme.js like so:

const fontFamily = {
    extrabold: "RobotoBlack",
    bold: "RobotoBold",
    medium: "RobotoMedium",
    regular: "RobotoRegular",
    light: "RobotoLight"
}

The thing is, the other fonts from RobotoBold on got recognized but just always the first item in the array (in this case RobotoBlack) does not.

Thanks for the help! :slight_smile:

that doesn’t really repro it, as mentioned in the mcve guide it should be minimal and include no code that’s unrelated to reproducing it. the best way to share it would be a github repo

Right sorry, pretty new to this, here’s my github repo:

https://github.com/rayj10/loginDemo

hey @raywinarto - the roboto-black font file appears to be invalid.

1 Like

Hi @notbrent, thanks so much for letting me know of that, sorry for the trouble!
Just curious, what did u use to preview fonts like that?
Just in case something like this happens in the future

Cheers!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

built in font app on mac