I am getting the error in react native - fontFamily "ionicons" is not a system font

Question

I am getting the following error in react native - fontFamily "ionicons" 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.

I am trying to import the expo vector icons.

import { Ionicons } from '@expo/vector-icons';

and using the icon

<Button transparent>
            <Ionicons name="md-checkmark-circle" size={32} color="green" />
        </Button>

but getting the above mentioned error.

Answer 1

Another possible solution I happened upon after of hours of looking at code that should work and which is identical to the sample and the excellent previous answer.

If you have been upgrading Expo this may be your answer.

1. Delete node_modules
2. Delete package-lock.json
3. run expo install
4. run expo start -c

Answer 2

If nuking node_modules is not working, then make sure you don't have installed multiple versions of expo-font.

1. Remove expo-font from node_modules/expo/node_modules/expo-font/.
2. Remove expo-font form list of dependencies from node_modules/expo/package.json.
3. Run expo r -c

For details Expo cannot load a font due to multiple versions of expo-font installed.

Answer 3

The library @expo/vector-icons is only installed by default on the template project that get through expo init -- it is part of the expo package .

If you created your project using react-native init use react-native-vector-icons instead

Installation

npm i react-native-vector-icons

react-native link react-native-vector-icons

Usage

import Icon from 'react-native-vector-icons/Ionicons';

<Button transparent>
    <Icon name="md-checkmark-circle" size={32} color="green" />
</Button>

OR

try loading Ionicons using Font.loadAsync in your App.js

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

Answer 4

Adding Iconicons in loadAsync solved this bug for me.

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