I am trying to add custom fonts to my app. I tried everything on the internet but nothing works. However, I think that the only thing that works on React Native 0.70.5 is linking assets using npx react-native-asset.
I tried making react-native.config.jsfile, then using npx react-native-asset. However, it just doesn't give any output and resets the command prompt. I even tried Cmder and Windows PowerShell. Nothing works they all reset.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets'],
};
You have to specify the exect location of the font's TTF or OTF file.
Update react-native.config.js file like this.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'], // stays the same
};
Put the font files in project>>assets>>fonts folder
After that run command npx react-native-asset
Probabily you will get the results.
before react-native 0.70
I used the following configuration
//file react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/aaa', './src/assets/fonts/bbb'],
};
and just calling
react-native link
it handles the linking job now
I'm getting error: unknown command 'link'
how to do the same job?
this was removed react-native link after 0.69 i believe
you can use the following it works
npx react-native-asset
I am creating react-native component library I am able to consume it in another app but how about fonts how can I auto-link fonts from a package?
Using react-native-builder-bob for packaging.
There is partial solution i did
S1: Shipping src folder package.json module config looks like this:
...
"main": "lib/module/index.js",
"module": "lib/module/index.js",
"react-native": "src/index.tsx",
"types": "lib/typescript/src/index.d.ts",
...
keeping assets inside src folder folder structure looks like
src
|--assets
|--components
|--index
S2: Then for setup readme i've added this package config step
Link assets:
1. Create `react-native.config.js` and add following
```bash
module.exports = {
project: {
ios: {},
android: {},
},
assets: ["node_modules/#<YOUR PKG SCOPE>/<PKG NAME>/src/assets/"]
}
```
or run
```bash
touch react-native.config.js && echo "module.exports = {
project: {
ios: {},
android: {},
},
assets: ["node_modules/#<YOUR PKG SCOPE>/<PKG NAME>/src/assets/"]
};" > react-native.config.js
```
2. link assets - `yarn react-native link`
I want to setup a monorepo.
I init my React native project with npx react-native init myProject as the first project. (there will be more project added later)
Folder structure
Parent
myProject
package.json (created by react-native)
yarn.lock
package.json (where I setup workspace)
Then I setup yarn workspace from the parent folder of myProject.
{ "name": "Parent",
"private": true,
"workspaces": {
"packages": [
"*"
],
"nohoist": [
"**/react-native",
"**/react-native-*",
"**/#react-native-*",
"**/#react-native-*/**",
"**/#react-navigation",
"**/#react-navigation/**",
"**/hermes-engine",
"**/rn-*"
] }
}
Everything seems to work until I push to git and clone back. I use yarn install but got this error when start the project (run android or run ios)
Error: Unable to resolve module `scheduler` from `node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js`: scheduler could not be found within the project or in these directories:
..\node_modules
The only way I can fix that is to cd myProject and run npm install (it will add some packages and the app will work) while cd and using yarn install won't do anything
I just want to use yarn for the project so what can I do to fix this problem?
I figure out how to fix it. I forgot to edit metro.config in RN folder.
const path = require('path')
const linkedLibs = [path.resolve(__dirname, '..')]
console.info('CONFIG', linkedLibs)
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders: linkedLibs,
};
Use this and everything will be fine
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
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.
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 ''
For React-native > 0.69, npx react-native link is no longer working
Use npx react-native-asset instead
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']
};
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.
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?
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/']
};
change assets: ['./src/assets/fonts/'] to assets: ['/src/assets/fonts/']
or use
assets: ['./src/assets/fonts/'] but nameProject/assets
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
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