React-native: Adding font assets to RN .60.3

Created on 18 Jul 2019 · 6Comments · Source: facebook/react-native

I appear to be unable to link font assets. Hopefully I have added the fonts correctly and configured the correct settings. When I run react-native link nothing appears to happen, no messages or errors are displayed.

React Native version:
System:
OS: macOS 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
Memory: 8.61 GB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.9.0 - /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, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.1, 28.0.2, 28.0.3
System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3
npmGlobalPackages:
create-react-native-app: 1.0.0
create-react-native-typescript-app: 1.2.0
react-native-git-upgrade: 0.2.7

Steps To Reproduce

My react-native.config.js:

module.exports = {
dependency: {
platforms: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
},
};
Screenshot 2019-07-18 at 11 50 10

Bug

Source

simonwalker-celadin

👍1

Most helpful comment

Hi @simonwalker-celadin,

I just succeeded to add custom fonts to my own project with React Native version 0.60.3, and my react-native.config.js file looks slightly different than yours:

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

This is what my file tree looks like:

App.js
__tests__
android
app.json
assets/
└── fonts
    ├── CustomFont.otf
    ├── CustomFont-Bold.otf
    └── CustomFont-Medium.otf
babel.config.js
index.js
ios
metro.config.js
node_modules
package.json
react-native.config.js
yarn.lock

Running react-native link correctly detected the fonts folder inside my assets folder:

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project
✨  Done in 1.14s.

It looks like you took inspiration from the Libraries section from the documentation of react-native link: https://github.com/react-native-community/cli/blob/master/docs/configuration.md#libraries

For an app, you don't need to scope your configuration under dependency.

So replace your config with

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

and you should be good to go! (I believe you can also drop the project part and use essentially the same config file as I used for my project.)

Hope that helps!

RobinCsl on 18 Jul 2019

👍7 🎉1 👎1

All 6 comments

Hi @simonwalker-celadin,

I just succeeded to add custom fonts to my own project with React Native version 0.60.3, and my react-native.config.js file looks slightly different than yours:

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

This is what my file tree looks like:

App.js
__tests__
android
app.json
assets/
└── fonts
    ├── CustomFont.otf
    ├── CustomFont-Bold.otf
    └── CustomFont-Medium.otf
babel.config.js
index.js
ios
metro.config.js
node_modules
package.json
react-native.config.js
yarn.lock

Running react-native link correctly detected the fonts folder inside my assets folder:

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project
✨  Done in 1.14s.

It looks like you took inspiration from the Libraries section from the documentation of react-native link: https://github.com/react-native-community/cli/blob/master/docs/configuration.md#libraries

For an app, you don't need to scope your configuration under dependency.

So replace your config with

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

and you should be good to go! (I believe you can also drop the project part and use essentially the same config file as I used for my project.)

Hope that helps!

RobinCsl on 18 Jul 2019

👍7 🎉1 👎1

Thank you. I have replaced my react-native.config.js with:

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

as per your suggestion and font linking is now working.

simonwalker-celadin on 19 Jul 2019

👍6 👎5

Hey, I happen to be facing the exacly same issue. I was using rnpm on package.json to link the fonts' path but when I tried react-native link on the terminal it returned nothing. I've just created a react-native.config.js, after I read about rpnm depreciation, and put the same lines as yours in it but it seems the file is not been recognized or something. react-native link still doesn't return anything

zerkeizi on 23 Jul 2019

same here, although I declared the moule to use ONLY my custom extensions metro.config.js is clearly ignored.

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    './src/assets/icons',
    './src/assets/svg',
    './src/assets/ai',
  ],
  assetExts: [
    ".xml", ".png", ".jpg", ".pb", ".tflite"
  ]
};

and the message is still the same:

error: bundling failed: Error: Unable to resolve module `./ai/annotations/Part1.xml` from `...src/assets/default-assets.js`: The module `./ai/annotations/Part1.xml` could not be found from `.../src/assets/default-assets.js`. Indeed, none of these files exist:
  * `.../src/assets/ai/annotations/Part1.xml(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`

Its starting to make making crazy...
How could it be so hard to use custom assets within an application?