CODEWITHSUNDEEP
react-native
Siraj Alam
Siraj Alam

Reputation: 10055

Can't link assets (fonts) in react native >= 0.60

react-native: 0.60.4,
react: 16.8.6,
npm: 6.10.1
XCode: 10.2.1
AndroidStudio: 3.4.1

I created a project using

npx react-native init awesomeApp --template typescript

I have put my assets in the 

assets/fonts/<Bunch of .ttf files>

My Directory Structure

awesomeApp
|
+--android
+--ios
+--assets
|  |
|  +---fonts
|      |
|      +-- ProximaNova-Bold.ttf
+--react-native-config.js

then I ran react-native link

Nothing happends, XCode not showing any added Resource neither the android, and when I'm running react-native run-ios showing error that the font is not found.

My react-native-config.js

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts']
};

I have also tried yarn react-native link and npx react-native link

Upvotes: 27

Views: 49654

Answers (10)

Akshay I
Akshay I

Reputation: 4185

Create a file in your react native project called react-native.config.js:

In it, paste

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts/'],
};

assets: ['./src/assets/fonts/'], should be the path to wherever you stored your custom fonts in your project folder. When you run the link command, it should work then.

For React-native > 0.69, npx react-native link is no longer working

Use npx react-native-asset instead

Upvotes: 5

Nicolai Lissau
Nicolai Lissau

Reputation: 8322

For React-native > 0.69, npx react-native link is no longer working

Use npx react-native-asset instead

Upvotes: 16

George Nch
George Nch

Reputation: 11

change assets: ['./src/assets/fonts/'] to assets: ['/src/assets/fonts/']

or use

assets: ['./src/assets/fonts/'] but nameProject/assets

Upvotes: 1

Siraj Alam
Siraj Alam

Reputation: 10055

Well, finally, I linked my fonts,

I just renamed my file react-native-config.js to react-native.config.js and it worked.

I don't know if this is the right way, I just tried and it worked, for me at least.

Here is the complete walkthrough for linking custom fonts.

Upvotes: 33

amir behrouzi
amir behrouzi

Reputation: 155

some times you have writed react-native.config.js correctlly

in such cases ; if you do this tasks

it helps you

1- delete react-native.config.js file

2- create this file with same code again

3- write react-native link in console

then you can see resources folder in Xcode

and you can see your fonts in info.plist and copy bundle resources

Upvotes: 0

manman
manman

Reputation: 5113

None of the above solutions work for me. The issue with what I was having is my Xcode project already had Resources group with a backed folder in it. The way react-native link is working as my understanding is it's creating a group without a folder and add it to your project and link to all your fonts from there. This approach doesn't work when you already have a Resources folder. The solution I could come up with was just renaming the Resources folder to something else and run react-native link again.

If you don't have such a setup, create react-native.config.js file and running react-native link works fine.

react-native.config.js

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./src/assets/fonts/']
};

Upvotes: 1

Mohammad vatandoost
Mohammad vatandoost

Reputation: 117

my react-native.config.js

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts/'],
};

and logs:

info Linking assets to ios project                                                                                      
info Linking assets to android project                                                                                  
success Assets have been successfully linked to your project

but My mistake was:

Wrong way:

fontFamily: BYekan

Right way: 

fontFamily: 'BYekan'

just put font name in ''

Upvotes: 8

Lucas Sim&#245;es
Lucas Sim&#245;es

Reputation: 657

Just to complement keyserfaty's answer, here is my react-native.config.js working using react-native link:

module.exports = {
  dependencies: {
    "react-native-gesture-handler": { platforms: { android: null, ios: null } }
  },
  assets: ['./src/assets/fonts']
};

Upvotes: 3

keyserfaty
keyserfaty

Reputation: 145

Using RN 0.60.8 with a react-native-config.js file should allow you to link your fonts using react-native link.

My logs:

react-native link       
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

Since you installed React Native using npx I'm guessing you maybe don't have react-native installed globally? Is running react-native link giving you any errors?

Upvotes: 1

rabbit87
rabbit87

Reputation: 3205

The "adding the font" should be done in your package.json. Add:

"rnpm": {
 "assets": ["./assets/fonts/"]
}

Then run 

react-native link

Source

EDIT: The above only works for react-native below 0.60.0

Upvotes: -5

Related Questions