A way to only link fonts react native

Question

I am working with react native and I only want to link my fonts and nothing else.

I am using react-native-maps and it specifically says in the docs "Do not use react-native link"

Everywhere I look I see that people say to do react-native link in order to link fonts but I am wonder in if there is proper syntax for just linking fonts like:

react-native link ./assets/fonts or something? That way it will not also link all my other libraries

Beulahbeuthel

Answer 1

I'm just going to link them manually. This is a really strange requirement for react-native-maps though. Almost everything in react-native that is a individual library needs linking.

If anyone else has a better answer please let me know.

https://medium.com/@kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78

^ I know stack overflow does not like links but there are a lot of steps and images.

EDIT

Cool thing, if you do react-native link <specific-library-name-here> then react-native will first link your assets and then link that specific library. So if you ever just want to link your fonts you can do that by linking some specific library along with it.

EDIT 2

If you just want to link your assets folder, try react-native link "package-that-does-not-exist", it will still link your assets without linking anything else.

Beulahbeuthel

Answer 2

You can give react-native link a parameter / name that is not present in your package.json - this will cause the task list for the command to contain only the link assets task.

So react-native link ./assets/fonts is not a valid command, but it should work.

Do remember you need your fonts dir specified in package.json as per Hamed's answer.

Aragonite

Error: Cannot find module '/node_modules/assets/fonts/package.json doesn't work with react-native-cli: 2.0.1 – Bridgehead

This error has no effect on linking assets. It still works. – Demagogue

Answer 3

There is a suitable package called react-native-assets, which links & unlinks only the assets. Saved me some time manually linking.

https://www.npmjs.com/package/react-native-asset

Coffeepot

Answer 4

if React Native Version ≥ 0.60

Create File react-native.config.js in the project root and add the following code

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

and Run command : react-native link or npx react-native link

Terrier

Answer 5

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

Touchwood

Answer 6

While Marek Lisik answer didn't worked for me and I also didn't want to use a third party library for such small task. So, I solved it manually by copying fonts file in follwing folder for android development.

your_app\android\app\src\main\assets\fonts

For ios, you can also follow E Pierre answer.

Panoply