not a system font error, might be related to async?

Question

So I got the "Roboto-Black" is not a system font, try putting through Expo.Font.loadAsync() error. but I've read in other posts that some people are having similar problems and the solution is by using await/promise. However, Im not sure how to do that with my code since I'm just following a tutorial to do this and this is my first attempt using create-react-native-app with minimum JS knowledge :( Please help me inspect this code snippet and let me know what I did wrong:

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('loginDemo/assets/fonts/Roboto-Black.ttf')},
            {RobotoBold: require('loginDemo/assets/fonts/Roboto-Bold.ttf')},
            {RobotoMedium: require('loginDemo/assets/fonts/Roboto-Medium.ttf')},
            {RobotoRegular: require('loginDemo/assets/fonts/Roboto-Regular.ttf')},
            {RobotoLight: require('loginDemo/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}
                 />
            );
        }

        return (
            <Provider store={store}>
                    <Router/>
            </Provider>
        );
   }
}