3

I am trying to implement custom fonts in a react native application. I am using react native web and can see the custom fonts working on web but not in native. I am working on an Android app but the issues seems to be within the IOS folder which I'm not even using. I found this question on SO but none of the solutions have worked for me. I've tried:

  1. Uninstalling and reinstalling react-native
  2. Running react-native upgrade
  3. The assets folder was originally in my src folder so I moved it to the root of the project

My fonts are located in ./assets/fonts in the root of my project and they are otf files, there are no hyphens in the file names. I created a react-native.config.js file in the root of my project and this is what is in it: 

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

When I run react-native link this is the error I'm receiving: 

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. Run CLI with --verbose flag for more details.
TypeError: Cannot read property 'UIAppFonts' of null
    at Object.linkAssetsIOS [as copyAssets] (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli-platform-ios/build/link/copyAssets.js:89:31)
    at Object.keys.forEach.platform (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAssets.js:42:16)
    at Array.forEach (<anonymous>)
    at linkAssets (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAssets.js:33:32)
    at linkAll (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAll.js:96:31)
    at Object.link [as func] (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/link.js:82:33)
    at Command.handleAction (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/index.js:186:23)
    at Command.listener (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:198:13)
    at Command.parseArgs (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/commander/index.js:651:12)

When I run react-native info this is what is shows: 

System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.72 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.6 - /Users/daniellemccarthy/.sdkman/candidates/java/current/bin/javac
    Python: 3.7.3 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.8.0 => 4.8.0 
    react: ^16.9.0 => 16.13.1 
    react-native: ^0.62.2 => 0.62.2 
  npmGlobalPackages:
mcc
  • 111
  • 10

2 Answers2

3

goto IOS folder > Info.plist add this code in .plist file

<plist version="1.0"> <dict>
<key>....</key> 
<!--this below code-->
<key>UIAppFonts</key>
<array>
    <string>Poppins-Bold.ttf</string>
    <string>Poppins-ExtraBold.ttf</string>
    <string>Poppins-Italic.ttf</string>
    <string>Poppins-Medium.ttf</string>
    <string>Poppins-MediumItalic.ttf</string>
    <string>Poppins-Regular.ttf</string>
    <string>Poppins-SemiBold.ttf</string>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Roboto_medium.ttf</string>
    <string>Roboto.ttf</string>
    <string>rubicon-icon-font.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
</array>

and make sure in the IOS folder you have a proper name as app.json

example.,

app.json

{
  "name": "<appname>",
  "displayName": "<appname>"
}

make sure you having the same name in the IOS folder

run react-native link

Sagar Mistry
  • 131
  • 11
0

You should not add UIAppFonts key into Info.plist manually, also app.json has nothing to do with this issue. If you keep getting the mentioned error, most probably you have renamed your project some time ago and there are some files in ios folder (Podfile, project, etc.) that still contain previous name.

Vyacheslav Orlovsky
  • 329
  • 1
  • 6
  • 15