question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic fonts are not rendering on Android with "react-native-dynamic-fonts" package

See original GitHub issue

Hello, guys, just noticed a problem when I use “react-native-dynamic-fonts” package to apply custom fonts on SVG <Text> element on Android application. iOS application shows fonts perfectly.

React Native Dynamic Fonts package works correctly, because I can see preloaded custom font on simple React Native <Text> elements on Android.

It can be reproduced on empty app with SVG <Text> element with fontFamily prop and with preloaded base64 font with “react-native-dynamic-fonts”.

<Svg
      version="1.1"
      id="test"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      style={{ width: 200, height: 200 }}
      viewBox="0 0 200 200"
    >
  <G>
    <Text fontFamily="Any Custom Font Name">
       Test text
    <Text>
  </G>
</Svg>
import { loadFont } from 'react-native-dynamic-fonts';

...
const base64FontString = 'Any Custom Font Name encoded as base64 string';

/* Load a single font */
loadFont('Any Custom Font Name', base64FontString, 'ttf').then(function(name) {
	console.log('Loaded font successfully. Font name is: ', name);
});
...

“react”: “16.6.1”, “react-native”: “0.57.7”, “react-native-svg”: “9.0.0”, (same on 8.x.x)

Mac OS 10.14.2 High Sierra Xcode v10.1 Android Studio 3.2.1 Android Emulator with Android 8.1 Gradle v4.8 NodeJS v10.13.0 npm v6.4.1

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

3reactions
msandcommented, Jan 23, 2019
screen shot 2019-01-23 at 18 14 21
0reactions
oleksandr-dziubancommented, Jan 23, 2019

@msand Double checked in my app, it works perfectly now with 9.0.3! It was a cache issue maybe. Thank you a lot!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic fonts are not rendering on Android with "react-native ...
Hello, guys, just noticed a problem when I use "react-native-dynamic-fonts" package to apply custom fonts on SVG <Text> element on Android ...
Read more >
react-native android fontFamily does not take effect
8 Answers 8 · fonts must be placed in android/app/src/main/assets/fonts · only .ttf files are supported · The name of the file has...
Read more >
react-native-dynamic-fonts - npm
Start using react-native-dynamic-fonts in your project by running `npm i react-native-dynamic-fonts`. There are 4 other projects in the npm ...
Read more >
Font - Expo Documentation
expo-font allows loading fonts from the web and using them in React Native ... Note, the fonts are not "reloaded" when you dynamically...
Read more >
Blog: Fix Custom Font Inconsistency in React Native - Vincit
If your custom fonts are starting to drive you mad in your react-native projects, you're not alone! Here's how to fix them.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found