React-native: Cannot use custom font with RN >= 0.60 --template typescript. react-native.config.js ignored

[Nico924]

I am trying to use a custom font in a freshly new React-native project made with the typescript template and I do not succeed to add a custom font family.

All the doc I found told me to use rnpm which has been now deprecated in favor of a react-native.config.js file in the root folder.
I therefore created this file in my project but I did not see anywhere where to tell the react-native builder to read it and therefore I get the error _font_name not found_

Has anyone any suggestion ?

React Native version:

System:
    OS: macOS 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 1.71 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1. react-native init your_project --template typescript
2. Create a folder assets/fonts and put all your custom fonts : (mine were Lato-(Regular,..).ttf)
3. Create a react-native.config.js in the root folder of your project as follow

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts'], // stays the same
  // commands: require('./path-to-commands.js'), // formerly "plugin", returns an array of commands
};

1. Use the font in the app Component as styling of you text
2. run react-native run-ios
3. You'll get an error "font Lato (in my case) not found"

[lapucher]

You may have an error in path to /fonts. Try this: assets: ['./src/app/assets/fonts/']

[thehanimo]

Link the assets manually using react-native link. This will give you a warning saying

Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.

After that, build again using react-native run-ios or whatever commands you use to build.

[thehanimo]

You may have an error in path to /fonts. Try this: assets: ['./src/app/assets/fonts/']

@lapucher That really depends on your file structure and where you place your assets.

[Nico924]

@thehanimo Thank you, that did the job!

[Ravi448]

I am facing same issue in RN 0.60.4

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
    Memory: 204.34 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.4 => 0.60.4 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1

My config looks like:

module.exports = {
    dependency: {
      assets: ['./Source/Resources/Fonts/']
    },
  };

When I run react-native link command, nothing happens.

This is my terminal output when I run rn link (I have added react-native link alias as rn in bash).

➜   rn link
➜   rn link
➜   rn link

Please help

[Ravi448]

got the mistake,

Config should look like ::

module.exports = {
      assets: ['./Source/Resources/Fonts/']
  };

Instead of

module.exports = {
    dependency: {
      assets: ['./Source/Resources/Fonts/']
    },
  };

This should be mentioned in the doc.
And both react-native link & yarn react-native link work fine

[sirajalam049]

Same Issue, but in my case, config, command and path all are same.

Created project using,

npx react-native init awesomeApp --template typescript

Directory structure

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

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

react-native link or npx react-native link or yarn react-native link didn't do the job for me.

[hpelitebook745G2]

@Ravi448's solution worked for me

[alitele]

I got it working for RN v0.60.5 by doing these steps.

1- Created a file in the react-native.config.js in the root of the project.
2- Paste this below code into above created file

module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'] }; . // Note assets folder created at root level (assets->fonts->YOUR FONT FILE)

3- Link assets to your project by running react-native link
4- Run project react-native run-ios

hopefully it should work fine.

[sahithyandev]

@alitele Thanks, man. It works.

[anastely]

@alitele i got this error Unrecognized command "link".

[raphaelpinel]

Verify that you have actually fonts in the assets/fonts folder. For some reason I had moved/deleted them, and of course the react-native link command does nothing

[xstable]

I'll also try to add new font to my App. I've found this thread here while I searched for a solution which not use rnpm.

But one question here: Isn't react-native link deprecated now because of auto-linking feature of react?
Maybe somebody can drop some lines about to agree, or disagree to this (and why, or what's state of the art at this point.)

[sahithyandev]

I am not an expert. But here is how I am thinking, react-native link is not necessary for libraries.
The libraries will link automatically. Libraries are loaded steps to auto-link. But fonts are not like that. Fonts don't know how to auto-link with the app.

[xstable]

@KSahithyan Ok, but as I remember in the right way, react-native link fully parse the library and try to link all it find... as react-native link bim-bom-my-library only the one library I've added as parameter.

Because AndroidX throw an warning if you have manually link something, the question is, if there is a way that I only link my fonts and not all the libraries via react-native link ?

---

Ok, I can answer it myself. It works with react-native link ... seems without race-conditions.

[earthnoob]

got the mistake,

Config should look like ::

module.exports = {
      assets: ['./Source/Resources/Fonts/']
  };

Instead of

module.exports = {
    dependency: {
      assets: ['./Source/Resources/Fonts/']
    },
  };

This should be mentioned in the doc.
And both react-native link & yarn react-native link work fine

I've tried your solution, after which both the fonts inside android and ios folders have been copied over successfully. However I still wasn't able to use the font (fontFamily: 'Rubik' - In my case I was trying to import Rubik font).

[MahmudHasanMenon]

I found that error

[ianhunterharold]

Link the assets manually using react-native link. This will give you a warning saying

Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.

After that, build again using react-native run-ios or whatever commands you use to build.

Is there a way to connect without using link?

[raphaelpinel]

Is there a way to connect without using link?

link should not be necessary with RN >= 0.60