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

185 Views Asked by At

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 enter image description here

This is my project in xcode.

enter image description here

This is my target's Build Phases. enter image description here

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.

2

There are 2 best solutions below

1
muazzez On

my copy bundle resources

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

};

1
Rodrigo Dias On

can you try to remove the folder and add all fonts files like this? enter image description here