React Native Expo.Font.loadAsync doesn't load Material Icons

Question

I have a React Native, React hybrid app. For React Native i am using react-native-elements.

My app is run using Expo and was built out with the react-native init. I am getting the Material Icons (missing) RSD;

Through much searching, i have found the @expo/vector-icons but it doesn't seem to work. My App.js looks like this;

import React from 'react'
import { Font, AppLoading } from 'expo'
import { MaterialIcons } from '@expo/vector-icons'
import HybridApp from './src/App'

export default class NativeApp extends React.Component {
  constructor() {
    super()
    this.state = {
      fontsAreLoaded: false
    }
  }
  async componentWillMount() {
    await Font.loadAsync(MaterialIcons.font)
    this.setState({ fontsAreLoaded: true })
  }
  render() {
    const { fontsAreLoaded } = this.state
    return !fontsAreLoaded ? <AppLoading /> : <HybridApp />
  }
}

As you can see, i am waiting for the font to load... all to no avail.

Answer 1

After hours wracking my brain on this, the answer was there in front of me the whole time.

Presumably, React Native Elements refers to Material icons as Material Icons, not MaterialIcons.

This means that the default import from @expo/vector-icons does not work as their reference to Material icons is different.

The solution is to manually select Material icons from expo, replacing this line;

await Font.loadAsync(MaterialIcons.font)

with

await Font.loadAsync({
  'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
})

I hope this saves someone some time in the future.