Native-React + Expo: Unable to resolve "@expo/vector-icons/fonts/Ionicons.ttf" from "src/boot/setup.js"

Question

I am just starting out on React Native 0.57.1 and expo 2.21.2 using a boilerplate code that attempts to load a font during startup with the command npm start or expo start :

import * as Expo from "expo";

....

async componentWillMount() {
    await Expo.Font.loadAsync({
        Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
    });

    this.setState({ isReady: true });
}

This gives an error

Unable to resolve "@expo/vector-icons/fonts/Ionicons.ttf" from "src/boot/setup.js"

Attempt #1: npm install --save @expo/vector-icons . However, doing this does not solve the error.

Why is this happening, and how can we resolve this issue? Thank you!

---

Update: Following the suggestions of both mialnika and Carlos Abraham, the error is fixed but a new one is encountered:

The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo.

This is from running the RN app in Expo's development mode, connected through LAN, using the iOS Expo client on an actual iPhone.

No such error appears from a fresh expo init project

Answer 1

I'm not sure what version of vector-icons you have but can you check if this link will work :)? '@expo/vector-icons/website/src/fonts/Ionicons.ttf';

Answer 2

It's not necessary to load the Icon library like that to be able to use Ionicons in expo, just install the package and use it like so:

import React, { Component } from 'react';
import { Ionicons } from '@expo/vector-icons';

export default class IconExample extends Component {
  render() {
    return <Ionicons name="md-checkmark-circle" size={32} color="green" />;
  }
}