Showing SVG image with 'react-native-svg' library, however encounter 'Unrecognized font family' error in iOS (Android works fine.)

Question

My react-native version is "0.62.2".

In order to show remote SVG images, I use react-native-svg library in my React Native project.

I use it like:

import {SvgUri} from 'react-native-svg';

const MyScreen = ({route, navigation}) => {
  ...
  ...
  return (<View>
        <SvgUri width="100%" height="100%" uri={imageSource} />
        </View>)
}

export default MyScreen;

In Android emulator, it works fine!

In iOS, it works in a sense, but the way how it works is: when navigate to MyScreen, I always encounter the following error at runtime in the 1st place:

Then, I have to press on keyboard ctrl+S to save code again (though nothing needs to save) which triggers the simulator to refresh, then MyScreen is shown successfully with the SVG image.

Why I get the "Unrecognized font family 'Univers-Condensed'" error at runtime in iOS? How to get rid of it?

(In my code, I have no code using that font, so my guess is the library introduced that font.)

How to specify a different font? I mean that font in the error is not something I have declared or in use. That's why I don't understand why that error, most likely from the library I am using. — Leem.fin, Nov 22 '20 at 10:24
Depends on whether it's already present on the device or not. — Robert Longson, Nov 23 '20 at 07:26
What if it is not present on the device? Do you have a step by step guide reference to solve that? — Leem.fin, Nov 23 '20 at 21:30
then you'll need to obtain it from somewhere e.g. you could specify it as a data url — Robert Longson, Nov 23 '20 at 21:33
You need to download the font and add to the ios project and info.plist file. — Atul Raj, Nov 25 '20 at 04:21
Follow this tutorial: https://medium.com/@mehrankhandev/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4 and add the font to your iOS project. — Daniel Dimitrov, Nov 25 '20 at 06:31

Waheed Akhtar · Answer 1 · 2020-12-07T12:34:10.793

2

This happens when your app is trying to access the given font family and that specific font is not linked with your project and this error can happen only be on a single platform (Android, IOS) because these fonts linked separately on both platforms.

Solution:

Remove usage of Univers-Condensed font family in your JS code because JS code is the trigger point of this error.

Note: This solution will not work if this error is produced by some library that you are using in your project and that is using that Univers-Condensed font family.

Another solution is, You have to add and link this font family in your project.

Download the font .ttf file

Make a folder named assets and inside the assets, folder make the fonts folder on the root of the project and put your downloaded font file in it.

add this to your react-native.config.js file

 module.exports = {
 assets: ['./assets/fonts/']
  };

run react-native link

this process will automatically link fonts with your IOS and android project too.

edited Dec 07 '20 at 12:34

answered Dec 04 '20 at 20:07

Waheed Akhtar

3,110
1
16
30

I don't have `react-native-config.js` file by default in my project. Should I manually create that? Should it be put under root of my react-native project? – Leem.fin Dec 07 '20 at 11:08
https://stackoverflow.com/questions/57130259/cant-link-assets-fonts-in-react-native-0-60 This says I should create `react-native.config.js` instead of `react-native-config.js`. I tried that & the steps in your answer, I still get the same error at runtime. – Leem.fin Dec 07 '20 at 11:16
And my react-native version is 0.62.2, do I still need to manually link the font with the command `react-native link`? – Leem.fin Dec 07 '20 at 11:22
Sorry, yes it is react-native.config.js you could rename it also if you don't have a file you can create it, and lastly font will not link automatically even your version is greater then `0.60` so for linking fonts or other assets you have to run the `react-native link` – Waheed Akhtar Dec 07 '20 at 12:38

score 1 · Accepted Answer · answered Dec 04 '20 at 10:57

1

Can you try this add Universe-Condensed.ttf in info.plist

<key>UIAppFonts</key>
    <array>
        <string>Universe-Condensed.ttf</string>
    </array>

answered Dec 04 '20 at 10:57

jamal

1,007
1
11
26

Showing SVG image with 'react-native-svg' library, however encounter 'Unrecognized font family' error in iOS (Android works fine.)

2 Answers2