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.
