expo: Unable to use custom font with `Expo.Svg.Text`

Expo sdk v40. Managed workflow. Works with processFontFamily from expo-fonts: ...<Svg.Text fontFamily={processFontFamily('Manrope_200ExtraLight')}>{text}</Svg.Text>... default system family[iOS]:

Manrope_200ExtraLight[iOS]:

Same issue with EXPO ^39.0.0 🥺

Also running into the same issue. Expo 37.0.6 in managed mode, react-native 0.61.4, react-native-svg 11.0.1. It seems like there’s still some confusion about whether the issue is in Expo or react-native-svg. Maybe it would help for someone from each project to talk for a minute and at least figure out which project is responsible?

if you would like to fix the issue yourself, fund the maintainer of react-native-svg to do it, or fund a contractor to do it, we would absolutely encourage that, and we can recommend folks who can help you.

@brentvatne If I wanted to pay someone to fix this bug, where would I start?

Finally found an answer <Text fontFamily={processFontFamily("gothic-bold")} /> fixed the issue! Yay!

does this work on Android too?

yes, tested only on managed workflow.

UPD: works in ejected project too

Here is a workaround, for anyone interested:

Basically, with this solution you load the font file and use an external package (opentype.js) to convert text to a SVG Path. Depending on your usage, you might want to use some caching techniques as well.

First, get the opentype.js package.

Second, load the font.

Here is a simplified version of my code: (I did not test it after making modifications for this comment)

/* This function is synchronous to keep it simple.
 * You might want to make it asynchronous and return a promise that will be resolved
 * inside the opentype.load callback.
 */

export function loadFont(fontModule) {
  const result = {}

  const file = Asset.fromModule(fontModule)

  opentype.load(file.uri, function(err, font) {
    if (err) {
       // handle error
    }
    result.loadedFont = font
  })

  return result
}

Here’s an example how to use it:

const {loadedFont} = loadFont(
  require(`./assets/fonts/<font-file-name>.ttf`)
)

const SvgComponent = ({width, height, text, x, y, fontSize}) => {
  const path = loadedFont.getPath((
    text,
    0,        // x: Horizontal position of the beginning of the text
    fontSize, // y: Vertical position of the baseline of the text
    fontSize  // fontSize: Size of the text in pixels
  ))

  const pathData = path.toPathData()

  return (
    <Svg width={width} height={height}>
      <Svg.Path
        x={x}
        y={y}
        strokeWidth={2}
        d={pathData}
      />
    </Svg>
  )
}

I’m having this issue as well. Currently using SDK v31.

@schazers - I think this might actually be a bug with our font code

First of all I have no intention to ruin this thread with unrelated stuff, this comment has nothing to do with the issue itself.

I feel that RN or Expo (not sure about who does what really) don’t approach the development in a hierarchical way. There are so many issues that should have been fixed, but instead I am seeing Expo for web? Why? Seriously, are you porting React Native to web when React operates there…? I hope I am missing something important here. Reminds me of the countless problems of Apollo and they can’t stop posting on their blog about their new toys…

And regarding the payment of the people actively working on them (which again I have no idea what’s going on), I totally get that you are not working for Google or w/e to get that sweet cash, but I believe some help/bugfixes for ‘simple’ things isn’t all that hard. I have posted several times here and on official Expo forums that the project feels abandoned sometimes.

Please take this as feedback; burn it or keep it.

Imagine the number of such seemingly simple issues on this project: https://github.com/expo/expo/issues

Now imagine the number of things that aren’t in that list but it would be really great if you could do them: https://blog.expo.io/you-can-now-use-expo-apis-in-any-react-native-app-7c3a93041331 https://blog.expo.io/expo-cli-and-sdk-web-support-beta-d0c588221375

And think about the number of people who draw a paycheck to make it better: https://expo.io/about

Sorry we haven’t found time to get this resolved yet, thanks to everyone for letting us know, and special thanks to @tal2 for finding and sharing a workaround to keep everyone unblocked. If anyone would be interested in helping get this (or any other issues you run into) fixed, please let us know!

One ugly workaround is to overlay a normal Text element on top of your SVG using position: absolute and zIndex: 1/2/3/4/5. Would love to see this fixed though.

I’m having this issue as well. Seems that the font doesn’t get passed correctly to react-native-svg or something, since they claim that custom fonts work as of 6.0.0^.

Ah, so sorry @zschiller !! Thanks brent