SVG from XML: inlineSize in <tspan ...> is ignored because xml parser wraps TSpan in TSpan

[sschulz-t]

Bug

When creating a SVG from xml via:

let xml = `
    <?xml version="1.0" encoding="UTF-8"?>
    <svg viewBox="0 0 800 505">
      <text x="111" y="110" font-size="40">
        <tspan inline-size="50">hello world world world world</tspan>
      </text>
    </svg>`;

    let svg = <SVG.SvgXml xml={xml} />;

The tspan attribute inline-size is ignored.

When using JSX, the linebreak works :

let svg = 
<SVG.Svg viewBox="0 0 800 505">
  <SVG.Text x="110" y="110" fontSize="40">
    <SVG.TSpan inlineSize="50">hello world world world world</SVG.TSpan>
  </SVG.Text>
</SV.Svg>;

I traced it back to

react-native-svg/src/lib/extract/extractText.tsx

Lines 174 to 183 in ff18553

	const textChildren =
	typeof children === 'string' || typeof children === 'number' ? (
	container ? (
	<TSpan>{String(children)}</TSpan>
	) : null
	) : Children.count(children) > 1 || Array.isArray(children) ? (
	Children.map(children, getChild)
	) : (
	children
	);

...

react-native-svg/src/lib/extract/extractText.tsx

Lines 139 to 145 in ff18553

	function getChild(child: TextChild) {
	if (typeof child === 'string' || typeof child === 'number') {
	return <TSpan>{String(child)}</TSpan>;
	} else {
	return child;
	}
	}

which wraps text components in a new TSpan, which does not forward the inlineSize.

My workaround is the following diff:

diff --color -r node_modules/react-native-svg/src/lib/extract/extractText.tsx /tmp/react-native-svg/src/lib/extract/extractText.tsx
139c139
< function getChild(child: TextChild) {
---
> function getChild(child: TextChild, inlineSize: NumberProp) {
141c141
<     return <TSpan>{String(child)}</TSpan>;
---
>     return <TSpan inlineSize={inlineSize}>{String(child)}</TSpan>;
177c177
<         <TSpan>{String(children)}</TSpan>
---
>         getChild(children, inlineSize)
180c180
<       Children.map(children, getChild)
---
>       Children.map(children, (child) => getChild(child, inlineSize))

I would probably make sense to detect that the currently processed item is already a TSpan and not to wrap it in another TSpan.

[bohdanprog]

Hello @sschulz-t,
Do you still have that issue?
I couldn't reproduce that. If you still have that issue, please share the example to reproduce that.
Thank you.