I seem to be getting an error with the async loading.
My code looks a little like this in my App.js
;
import React from 'react'
import PropTypes from 'prop-types'
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons'
import { AppLoading } from 'expo'
import { Asset } from 'expo-asset'
import * as Font from 'expo-font'
import './src/shared/config'
import Rubik from './assets/fonts/Rubik-Regular.ttf'
import RubikItalic from './assets/fonts/Rubik-Italic.ttf'
import RubikMedium from './assets/fonts/Rubik-Medium.ttf'
import RubikMediumItalic from './assets/fonts/Rubik-MediumItalic.ttf'
import iconInverted from './assets/images/icon-inverted.png'
import logoInverted from './assets/images/logo-inverted.png'
import logoPrimary from './assets/images/logo-primary.png'
import signInBackground from './assets/images/sign-in-background.png'
import splash from './assets/images/splash.png'
import HybridApp from './src/HybridApp'
global.Intl = require('intl')
class App extends React.Component {
state = {
isLoadingComplete: false,
}
loadResourcesAsync = async () => {
console.warn('loading async...')
return Promise.all([
Asset.loadAsync([
// Preload assets here....
iconInverted,
logoInverted,
logoPrimary,
signInBackground,
splash,
]),
Font.loadAsync({
MaterialIcons,
MaterialCommunityIcons,
rubik: Rubik,
'rubik-italic': RubikItalic,
'rubik-medium': RubikMedium,
'rubik-medium-italic': RubikMediumItalic,
}),
])
}
handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error)
}
handleFinishLoading = () => {
console.warn('finish loading...')
// this.setState({ isLoadingComplete: true })
}
render = () => {
const { isLoadingComplete } = this.state
const { skipLoadingScreen } = this.props
if (!isLoadingComplete && !skipLoadingScreen) {
return (
<AppLoading
startAsync={this.loadResourcesAsync}
onError={this.handleLoadingError}
onFinish={this.handleFinishLoading}
/>
)
}
return <HybridApp />
}
}
App.propTypes = {
skipLoadingScreen: PropTypes.bool,
}
export default App
This is a pretty close match to the example code that is found on Expo.
I am getting an error in the console;
TypeError: asset.downloadAsync is not a function
at _loadSingleFontAsync$ (Font.js:87)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:271)
at Generator.prototype.<computed> [as next] (runtime.js:97)
at tryCatch (runtime.js:45)
at invoke (runtime.js:135)
at runtime.js:170
at tryCallTwo (core.js:45)
at doResolve (core.js:200)
at new Promise (core.js:66)
And i then get an error on screen about using Rubik
before it’s ready. I am unsure why this is. I can only assume that something is falling over in the Font import?