<Text> does not work in <G> #568
Comments
|
Are you importing Text from react-native and react-native-svg perhaps? Normal React Text does not show up in Svg, only Svg.Text |
|
This is probably just using the Text component from react-native instead of react-native-svg, and isn't supported for now. I'll go ahead and close this. |
|
Hi, i am facing the same issue. |
|
Adding the stack trace |
|
Same issue. Any Update ? @Neha3011 @msand @ammichael |
|
Are you using expo? It comes with a pre bundled version of react-native-svg and can't be combined with others. |
|
@msand Nop,i am not using expo |
|
Can you post a replication? I don't know how to make this issue appear |
|
Please check below code <Svg style={{ width: 360, height: 360,alignItems: 'center', justifyContent: 'center', alignContent: 'center' }}>
|
|
Same,
Weird and painful! Good luck on resolving the bug Computer OS: Windows |
|
As updates on this? I'm running into this issue as well. My whole app crashes when I insert the code into my svg
|
|
Are you importing Text from react-native or from react-native-svg? Please provide a full replication. |
|
I'm importing it from react-native-svg. If I remove the Text part, the rest of the code runs no problem so I assume it's the Text component that causing the error. import React from "react";
import Svg, { G, Path, Text, TSpan } from "react-native-svg";
const SvgSketchSelectedSvg = props => (
<Svg width={30} height={32} {...props}>
<G fill="none" fillRule="evenodd">
<Path
d="M2243-14277.5c0 7.456 6.044 13.5 13.5 13.5s13.5-6.044 13.5-13.5c0-3.216-1.125-6.17-3.002-8.489a13.474 13.474 0 0 0-10.498-5.011h-12.077"
stroke="#FF1D4F"
strokeWidth={2}
/>
<Path stroke="#FF1F50" fill="#FF1D4F" d="M2241-14289.5l5-4.5v9z" />
<Text
fontFamily="Raleway-Bold, Raleway"
fontSize={12}
fontWeight="bold"
letterSpacing={1}
fill="#FF1E4F"
transform="translate(2240 -14295)"
>
<TSpan x={10} y={20}>
{`15`}
</TSpan>
</Text>
</G>
</Svg>
);
export default SvgSketchSelectedSvg;Computer OS: Mac |
|
It seems you're missing a viewBox attribute, and apparently there's a bug with handling of letterSpacing as a number, giving it as a string works fine. Also, I would recommend to move the content to the origin, instead of having it offset to x=2240, and y=-14295, something like this: import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { G, Path, Text, TSpan } from 'react-native-svg';
const SvgSketchSelectedSvg = props => (
<Svg width={300} height={320} viewBox="0 0 32 32" {...props}>
<G fill="none" fillRule="evenodd">
<Path
d="M3,17.5c0 7.456 6.044 13.5 13.5 13.5s13.5-6.044 13.5-13.5c0-3.216-1.125-6.17-3.002-8.489a13.474 13.474 0 0 0-10.498-5.011h-12.077"
stroke="#FF1D4F"
strokeWidth={2}
/>
<Path stroke="#FF1F50" fill="#FF1D4F" d="M1,5.5l5-4.5v9z" />
<Text
fontFamily="Raleway-Bold, Raleway"
fontSize={12}
fontWeight="bold"
letterSpacing="1"
fill="#FF1E4F"
>
<TSpan x={10} y={20}>
{`15`}
</TSpan>
</Text>
</G>
</Svg>
);
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<SvgSketchSelectedSvg />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#ecf0f1',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
|
|
@mikeyyyzhao I've fixed the crash with letterSpacing as numbers in c343229, can you test it? const SvgSketchSelectedSvg = props => (
<Svg width={300} height={320} viewBox="0 0 32 32" {...props}>
<G fill="none" fillRule="evenodd">
<Path
d="M3,17.5c0 7.456 6.044 13.5 13.5 13.5s13.5-6.044 13.5-13.5c0-3.216-1.125-6.17-3.002-8.489a13.474 13.474 0 0 0-10.498-5.011h-12.077"
stroke="#FF1D4F"
strokeWidth={2}
/>
<Path stroke="#FF1F50" fill="#FF1D4F" d="M1,5.5l5-4.5v9z" />
<Text
fontFamily="Raleway-Bold, Raleway"
fontSize={12}
fontWeight="bold"
letterSpacing={1}
fill="#FF1E4F"
>
<TSpan x={10} y={20}>
{`15`}
</TSpan>
</Text>
</G>
</Svg>
); |
|
Hi @msand I tried the code and it still crashed. Here's the exact code that I ran: ` import { StyleSheet, View } from 'react-native'; import Svg, { G, Path, Text, TSpan } from 'react-native-svg'; const ForwardButton = props => ( <Svg width={300} height={320} viewBox="0 0 32 32" {...props}> ); export default ForwardButton; ` |
|
Try changing letterSpacing={1} to letterSpacing="1" |
|
It worked and didn't crash this time! Thanks for your help @msand! |
I just run this test, the first (Line) and the second(Rect) can work well, but the thrid（Text） don't show !
The text was updated successfully, but these errors were encountered: