Include a new font to React Native project

Developers
#1

Hello everybody! Im trying to include a new font (Noto) to my project based on Jitsi Meet (Ive made some custom pages and stuff…)

But after include the font files on the directory and configured the react-native.config.js like this print:

module.exports = {
    project: {
        ios: {
            project: '.ios/jitsi-meet.xcworkspace'
        }
    },
    assets: [ './assets/fonts/' ]
};

And then, when I try to link the assets I face this error:

Captura de Tela 2022-03-08 às 06.32.29
Captura de Tela 2022-03-08 às 06.32.291322×250 49.6 KB

Ive noticed that the project.pbxproj are really not located at the workspace, but can be found on /app and /sdk

If I change the project.pbxproj location on react-native.config.js and when I run “npx react-native link” I face this error

info Linking assets to ios project
warn Group ‘Resources’ does not exist in your Xcode project. We have created it automatically for you.
error Linking assets failed.
TypeError: Cannot read properties of null (reading ‘UIAppFonts’)

Does anybody know how to solve this?

1 Like
#2

You may need to follow whatever manual steps are necessary, because our app layout is slightly different than a vanilla RN app.

#3

Hi saghul, thanks for the tip. Do you suggest some specific manual? Im trying do include this font in many ways without success…

I already build the project in both Android and iOS versions and its flowing amazing. Indeed Im getting used to the project now, and soon Ill try to contribute at the main project!

#4

Not sure, I think you’ll need to adjust the steps to match our layout, but that should be it.

Exciting!

#5

I am also facing the same issue
Not sure where to find the manual steps to followed up

#6

@caon do you have an open issue or MR for this? Would love to see where this stands so far

#7

Hello guys! Sorry for the late answer!

In my case I couldnt just config the

react-native.config.js

with the location of the font files and then link with npx react-native link.

So I had to create the folders manually (both android and iOS) and then build the project (must clean before, then run npm install or yarn).

After creating the folders and put the font files on it, just build Android (gradle) and iOS (pods) and the App will recognize the new fonts.

Hope that this help you guys!

2 Likes