2

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:

enter image description here

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.)

Improve this question
9
  • Specify a different font. Commented Nov 22, 2020 at 9:49
  • 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. Commented Nov 22, 2020 at 10:24
  • font="<whatever font you want>" or font-family="<whatever font familty you want>" Commented Nov 22, 2020 at 11:03
  • Do I need to download the font file firstly from somewhere? Commented Nov 22, 2020 at 22:48
  • Depends on whether it's already present on the device or not. Commented Nov 23, 2020 at 7:26

2 Answers 2

Reset to default
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:

  1. 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.

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

  • 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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?
stackoverflow.com/questions/57130259/… 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.
And my react-native version is 0.62.2, do I still need to manually link the font with the command react-native link?
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
1

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

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.