React native: Unable to resolve "@ant-design/icons-react-native/fonts/antoutline.ttf"

I have a little problem with React Native, I'm using the ant design RN for UI components (https://rn.mobile.ant.design/) But when i tried to load the ant design fonts , an error appeared. It sayed

"Unable to resolve "@ant-design/icons-react-native/fonts/antoutline.ttf" from "App.js"

the code :

async componentDidMount() {
    await Font.loadAsync({
      antoutline: require("@ant-design/icons-react- 
            native/fonts/antoutline.ttf")
     })
  }

Package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
},
"dependencies": {
    "@ant-design/icons-react-native": "^1.0.2",
    "@ant-design/react-native": "^3.1.3",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
},
"devDependencies": {
    "babel-preset-expo": "^5.0.0"
},
"private": true

}

I'm using Expo as a cli

Solution

Unfortunately you are trying to use a dependency that requires linking of native code.

From their installation instructions you can see the following:

react-native link @ant-design/icons-react-native

As your app is made with Expo, and the native code is abstracted away from you, it is not possible to use the link command.

Your options are:

Eject your Expo project using expo eject. This will give you full access to the native code. You can read more about it here.
Expo comes with AntDesign icons built in, you can access them using @expo/vector-icons. There is more in the documentation here.

Your easiest option is 2, using @expo/vector-icons. You don't need to install anything to use them.

Just add the following import to your component

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

Then in your render you can use them in the following way:

<AntDesign name="stepforward" size={32} color="green" />

Making sure to check that the icon you want is available in the directory

If you want to preload your font. The font object is available as a static property on the font component, so in the case above it is AntDesign.font, which should evaluate to something like {antdesign: require('path/to/antdesign.ttf')}

The documentation on fonts and icons on the Expo website is full of great examples.