Custom fonts are not rendered in RN-SVG <Text/>

Question

In my code I try:

import { useFonts } from 'expo-font'

useFonts({
  'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ),
} )

Now when I render RN's own or RN-Paper's Text element, the font family displays correctly:

import { Text } from 'react-native-paper'
const styles = StyleSheet.create({
  countdown:{
    fontFamily:'Robo Numbers',
    fontSize:34,
  },
})

 <Text style={[ styles.countdown, { color:10 > countdown ? 'orange' : '#f8f0c1' } ]}>{countdown}</Text>

But rendering the default font in RN-SVG's Text:

<Text stroke={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}< ;/Text>

Is this functionality missing from the library, or am I missing something?

Answer 1

So far, "react-native-svg": "~13.4.0" Custom fonts are not supported, or I can't find a documented way to use them.

So I found a very simple solution based on :

render() {
  const { countdown } = this.state

  return <>
    <ForeignObject x={85} y={94} height={14} key={countdown}>
      <Text style={{ fontFamily:'Robo Numbers' }}>{countdown}</Text>
    </ForeignObject>
  <>
}

The CRITICAL here is the ForeignObject@key attribute. It must be present to force the ForeignObject to re-render its children.

In my case I increment the countdown variable in setInterval() but the text never updates until I add the ForeignObject@key with the changing value !

Hope this helps someone...