How to fix Unrecognised font family error in React Native

Des
2 min readMay 24, 2021
Screenshot of error

React native font/icon family plays a role in typography and pictorial representation for certain parts of your application.

When you install a particular font/icon or several kinds, you could be hit with an “Unrecognised” error, fear not, we’re here to solve it. This error occurs due to improper integration of the font/icon to Xcode or your code base.

Firstly, go to your react native project, then open node_modules -> react-native-vector-icons -> Fonts, now open your ios folder then open [project].xcworkspace, now right click below your project name and select New Group, rename it to Fonts

drag the .ttf fonts you need from your node_modules folder and drop just below your Fonts Group.

Expand the Group with the same name as your react native project and click on info.plist, click on the + beside Information Property List in the Key section then replace Get info string with Fonts provided by application, type the font details beside item [number] exactly as it is in your Fonts Group.

After this, run shift + command + K to clean your previous build, then command + B to run a new build and finally command + R to start your application.

This would solve the issue else restart your metro bundler.

If the problem still persist, open [project].xcworkspace and click on your project name under Targets, click on Build Phases, scroll to Copy Bundle Resources then click on the + and add your fonts.

Now rerun and you good.

If you found this useful or used another method, do comment to help others. Thanks.

--

--

Des

•Lifestyle by day 🌝• {coder} by night 🌚• Socials - @deksmond•