Why am I receiving a cannot read property `UIAppFonts of null` error when running react-native link?

user_10546752 0
Viewed 1062

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:
react-native-cli react-native reactjs android
1 Answers

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

user_74879880
Related