Adding custom fonts in create-react-native-library project

Question

I have created a react native library using create-react-native-library command.

According to the requirement, I will have to add some custom fonts to this module.

Since, this is not react native app and this is react native module, I cannot do "npx react-native-asset" because there were some undefined errors showing up.

So, I decided to follow manual way and added fonts in each android and ios folders.

Android works fine without an issue but for ios, it only has .xcodeproj folder and ViewManager.m. Don't even have info.plist. So, I tried to follow apple's documentation for adding custom fonts in ios static library and it does not work. According to documentation and some tutorials from online, I created this info.plist.

This is appple documentation I followed.

https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

This is my info.plist I created

This is my project in xcode.

This is my target's Build Phases.

I also created react-native.config.js and custom font is working fine in android but for ios, it is still not working even with these setups.

I also checked font folder as target membership.

muazzez · Accepted Answer · 2023-08-10 09:50:49Z

1

The project in the image belongs to me and it works correctly in android and iOS environments.

The copy bundle resources in your project seems to be incorrect. Make sure that you've provided the correct path for assets in the react-native.config.js file. You can try as below:

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

};

answered Aug 10, 2023 at 9:50

muazzez

10810 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyaw Soe Hein Over a year ago

I believe you created this project with create-react-native-app instead of create-react-native-library because normally, images.xsassets and info.plist are not there if you use create-react-native-library, or did you create them yourselves? My react-native.config.js is correct because android is working fine. The problem is with ios.

Rodrigo Dias · Accepted Answer · 2023-08-10 11:52:33Z

0

can you try to remove the folder and add all fonts files like this?

answered Aug 10, 2023 at 11:52

Rodrigo Dias

1981 silver badge12 bronze badges

1 Comment

Rodrigo Dias Over a year ago

Your fonts folder should be inside the assets folder at the root of the project

Collectives™ on Stack Overflow

Adding custom fonts in create-react-native-library project

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related