React Native Unrecognized font family not fixing

Question

The fonts are in my asset folder, they are also inside xcode copy bundle resources, and also inside resource folder. I already also ran react-native link, but it still doesn't find the font. Is there something I missed? Please see attached images for reference:

enter image description here

Answer 1

React Native Part:

Add fonts to assets/fonts of the root folder of react-native project

react-native-project/
  package.json
  ios/
  android/
  assets/
    fonts/
      GROBOLD...
      ...

Add the below snippet to package.json

"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
}  

Run the following command in your react-native project to link your assets.

react-native link react-native-vector-icons 

iOS Part:

Check info.plist for the font files whether they have added already.

Delete derived data, build and run your Xcode project.

Double check the fonts added to project by navigating to the AppDelegate.m file and add these lines of code below NSURL *jsCodeLocation;

for (NSString* family in [UIFont familyNames])
{
  NSLog(@"%@", family);
  for (NSString* name in [UIFont fontNamesForFamilyName: family])
  {
    NSLog(@" %@", name);
  }
}

Android Part:

Copy the font files to if they are not exist already.

android/
    app/
      src/
        main/
          assets/
            fonts/
              GROBOLD...

Answer 2

Please update below with your code:

"rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }

You missed "/" that's why your compiler didn't find the font file.

Let me know if you still got any issues.

Answer 3

'rnpm' is deprecated for version > 0.60 and will be removed completely in major release.

Please follow below steps to start using custom fonts in your react native app

1. Create react-native.config.js in root directory

2. Add below code in react-native.config.js

   module.exports = {
     assets: ['./assets/fonts']
   };
   

3. In terminal, run npx react-native link command

4. Add a style to the component e.g. <Text style={styles.titleText}>Home Screen</Text>

5. Add a below property to title titleText: { fontFamily: 'name-of-font-without-ttf-extension'}

6. Run your app npx react-native run-android / run-ios

7. You will see the new font added to your app.