Custom fonts are not rendered in RN-SVG <Text/>
P粉743288436
2023-09-06 09:01:24
<p>In my code I try: </p>
<pre class="brush:php;toolbar:false;">import { useFonts } from 'expo-font'
useFonts({
'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ),
} )</pre>
<p>Now when I render RN's own or RN-Paper's <code>Text</code> element, the font family displays correctly: </p>
<pre class="brush:php;toolbar:false;">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></pre>
<p>But rendering the default font in RN-SVG's <code>Text</code>: </p>
<pre class="brush:php;toolbar:false;"><Text stroke={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}< ;/Text></pre>
<p>Is this functionality missing from the library, or am I missing something? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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@keyattribute. 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 theForeignObject@keywith the changing value ! p>Hope this helps someone...