Search code examples
androidiosreact-nativefont-familycustom-font

TypeError: Cannot read property 'UIAppFonts' of null while linking custom fonts with react native project


I am trying to apply custom fonts to my react native application. When i run this command

react-native link or yarn react-native link

It gives me the following error when I try to link custom fonts to my app

info Linking assets to ios project
error Linking assets failed.
TypeError: Cannot read property 'UIAppFonts' of null
    at Object.linkAssetsIOS [as copyAssets] (C:\Users\saran\Documents\GitHub\estate-92-mobile\node_modules\@react-native-community\cli-platform-ios\build\link\copyAssets.js:89:31)
    at C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\linkAssets.js:42:16
    at Array.forEach (<anonymous>)
    at linkAssets (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\linkAssets.js:33:32)
    at linkAll (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\linkAll.js:96:31)
    at Object.link [as func] (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\link.js:82:33)
    at Command.handleAction (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:186:23)
    at Command.listener (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:315:20)
    at Command.parseArgs (C:\Users\saran\AppData\Roaming\npm\node_modules\react-native\node_modules\commander\index.js:651:12)
info Run CLI with --verbose flag for more details.

Due this custom fonts are not applying to text. I am using "react": "17.0.1" "react-native": "0.64.2". Here is my android/build.gradle file

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "20.1.5948944"
        supportLibVersion="28.0.0"
        playServicesVersion="17.0.0"
        androidMapsUtilsVersion="0.6.2"
        googlePlayServicesAuthVersion = "16.0.1" // <--- use this version or newer
        multiDexEnabled=true
    }
    repositories {
        google()
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.4")
        classpath 'com.google.gms:google-services:4.3.10'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.8.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

Here is my react-native.config.js file

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  dependencies: {
    '@react-native-google-signin/google-signin': {
      platforms: {
        ios: null,
      },
    },
    'react-native-fbsdk-next': {
      platforms: {
        ios: null,
      },
    },
  },
  assets: ['./src/assets/fonts'],
};

and package.json

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

Solution

  • in my case i delete ios folder in my project and then recreate with following command

    react-native eject
    

    then i run react-native link