"TypeError: undefined is not an object (evaluating '_expo.default.Font')]" facing this error when asynchronously loading the font
Welcome to Expo!
This code has some problems.
1, To export class use “export default Class” instead of “export Class”
export default
In react-native, You don't need constructor.
In react, you should use arrow function instead anonymous function, because arrow function’s this mean class!
componentWillMount = async() => {
- 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>
)
}
}
Also use import * as Font from 'expo-font'
in the newer versions of Expo instead of importing it from 'expo'.