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

Nico924 · 2019-07-17T17:12:53Z

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

react-native init your_project --template typescript
Create a folder assets/fonts and put all your custom fonts : (mine were Lato-(Regular,..).ttf)
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
};

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

The text was updated successfully, but these errors were encountered:

lapucher · 2019-07-18T12:54:02Z

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

thehanimo · 2019-07-18T15:39:04Z

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 · 2019-07-18T15:40:49Z

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 · 2019-07-18T15:57:51Z

@thehanimo Thank you, that did the job!

Ravi448 · 2019-07-20T12:22:36Z

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 · 2019-07-20T12:52:10Z

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 · 2019-07-21T03:44:30Z

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 · 2019-08-21T13:16:00Z

@Ravi448's solution worked for me

alitele · 2019-09-21T18:37:14Z

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 · 2019-11-10T09:24:31Z

@alitele Thanks, man. It works.

anastely · 2020-01-24T00:42:42Z

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

raphaelpinel · 2020-03-10T07:42:40Z

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 · 2020-05-18T17:30:29Z

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 · 2020-05-19T01:39:57Z

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 · 2020-05-19T07:11:26Z

@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 · 2020-06-21T04:45:47Z

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 · 2020-09-14T13:38:08Z

I found that error

ianhunterharold · 2020-11-16T18:59:55Z

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 · 2020-11-17T11:21:21Z

Is there a way to connect without using link?

link should not be necessary with RN >= 0.60

Nico924 added the Bug label Jul 17, 2019

Nico924 closed this as completed Jul 18, 2019

maximilize mentioned this issue Sep 26, 2019

Adding custom fonts in react native 60+ #25852

Closed

facebook locked as resolved and limited conversation to collaborators Oct 7, 2021

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Nico924 commented Jul 17, 2019

lapucher commented Jul 18, 2019 •

edited

Loading

thehanimo commented Jul 18, 2019

thehanimo commented Jul 18, 2019

Nico924 commented Jul 18, 2019

Ravi448 commented Jul 20, 2019 •

edited

Loading

Ravi448 commented Jul 20, 2019

sirajalam049 commented Jul 21, 2019 •

edited

Loading

hpelitebook745G2 commented Aug 21, 2019

alitele commented Sep 21, 2019

sahithyandev commented Nov 10, 2019

anastely commented Jan 24, 2020

raphaelpinel commented Mar 10, 2020

xstable commented May 18, 2020

sahithyandev commented May 19, 2020

xstable commented May 19, 2020 •

edited

Loading

earthnoob commented Jun 21, 2020

Instead of

MahmudHasanMenon commented Sep 14, 2020

ianhunterharold commented Nov 16, 2020

raphaelpinel commented Nov 17, 2020

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

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

Comments

Nico924 commented Jul 17, 2019

Steps To Reproduce

lapucher commented Jul 18, 2019 • edited Loading

thehanimo commented Jul 18, 2019

thehanimo commented Jul 18, 2019

Nico924 commented Jul 18, 2019

Ravi448 commented Jul 20, 2019 • edited Loading

Ravi448 commented Jul 20, 2019

Instead of

sirajalam049 commented Jul 21, 2019 • edited Loading

hpelitebook745G2 commented Aug 21, 2019

alitele commented Sep 21, 2019

sahithyandev commented Nov 10, 2019

anastely commented Jan 24, 2020

raphaelpinel commented Mar 10, 2020

xstable commented May 18, 2020

sahithyandev commented May 19, 2020

xstable commented May 19, 2020 • edited Loading

earthnoob commented Jun 21, 2020

Instead of

MahmudHasanMenon commented Sep 14, 2020

ianhunterharold commented Nov 16, 2020

raphaelpinel commented Nov 17, 2020

lapucher commented Jul 18, 2019 •

edited

Loading

Ravi448 commented Jul 20, 2019 •

edited

Loading

sirajalam049 commented Jul 21, 2019 •

edited

Loading

xstable commented May 19, 2020 •

edited

Loading