"TypeError: undefined is not an object (evaluating '_expo.default.Font')]" facing this error when asynchronously loading the font

Question

This is my error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$

Initially I was getting an error like:

fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync. If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

So i used load async to load the font, but started getting the above error.

import React, { Component } from "react";
import { Alert, AsyncStorage, StyleSheet, Text } from "react-native";
import {Container,Header,Content,Card,CardItem,Body,Form,Input,Button,Item
} from "native-base";
import { AppHeader } from "../sections/Header";
import Expo from "expo";
import {Font} from 'expo';
export class Login extends Component {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      isReady: false
    };
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <AppHeader />
      </Container>
    );
  }
}

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$ - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:271:30 in invoke - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:135:28 in invoke - node_modules\regenerator-runtime\runtime.js:170:17 in - node_modules\promise\setimmediate\core.js:45:7 in tryCallTwo - node_modules\promise\setimmediate\core.js:200:23 in doResolve

This is the error that i am facing

Answer 1

Welcome to Expo!

This code has some problems.

1, To export class use “export default Class” instead of “export Class”

export default

2. In react-native, You don't need constructor.

3. In react, you should use arrow function instead anonymous function, because arrow function’s this mean class!

componentWillMount =  async() => {

4. AppLoading isn't UI component. use ActivityIndicator.

if (!this.state.isReady) {
  return <ActivityIndicator />
}

Below code works well. Try!

import React, { Component } from 'react'
import { ActivityIndicator } from 'react-native'
import { Container } from 'native-base'
import { AppHeader } from '../sections/Header'
import { Font } from 'expo'

export default class Login extends Component {
  static navigationOptions = {
    header: null
  }

  state = {
    isReady: false
  }

  componentWillMount = async() => {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    })
    this.setState({ isReady: true })
  }

  render () {
    if (!this.state.isReady) {
      return <ActivityIndicator />
    }
    return (
      <View>
        <AppHeader />
      </View>
    )
  }
}