CODEWITHSUNDEEP
react-nativesvgreact-native-iosreact-native-svg
Leem.fin
Leem.fin

Reputation: 42642

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

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

Upvotes: 2

Views: 1799

Answers (2)

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

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.

Upvotes: 2

jamal
jamal

Reputation: 1105

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

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

Upvotes: 1

Related Questions