-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<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: