Text strings must be rendered within a <Text> component

[petkovv]

Hey guys. I have an issue for which I couldn't find any information. Most likely it is not a bug with the library but something I am doing wrong, I just couldn't figure out what can cause the problem. So The problem itself is that I receive a very strange error for which I will attach an image of my simulator.

That happens using SvgUri from the react-native-svg like this

<SvgUri
  uri={silkUrl}
  height={svgSilkHeight}
  width={svgSilkWidth}                              
/>

Versions:

"react-native": "0.63.4",
"react": "16.13.1",
"react-native-svg": "12.1.1",

If some more info is needed I will add it. Thanks in advance :)

[selibrah]

could u share with us an example of the values of these variables:
slikUrl
svgSilkHeight
svgSilkWidth
usually, this error appears when you tape some word or letter without putting it inside a components, I assume u just miss-click some button so u wrote a letter outside Text componenets and u didn't notice it.
Try to comment on the SvgUri and check if the problem still there.

[petkovv]

Hey @selibrah, when I comment or remove the SvgUri the error disappears too.

[petkovv]

The problem is not reproducible on version 11.0.1 of the library. At least for me downgrading to 11.0.1 worked. :)

[TomasSestak]

Getting the same issue on 12.1.1 Expo, downgrading to 11.0.1 didn't help me,
here is the uri: https://demo.nsure.cz/assets/img/insurance-items/8.svg

[TomasSestak]

@selibrah could you have a look at it?

[petkovv]

Hey guys, I was wrong actually it is reproducible on every version of the library I try. Well, the issue is that from the external SVG I use some of them are quite broken. What I mean is that they have some texts in random places in them. I tried to make a separate call for each via the fetch API, but unfortunately even those which are broken returns status 200 and ok: true. It is a big problem because the app crashes and we can not afford this to happen on production. IF someone has any solution I will be very happy if he/she shares it with us here. Thanks in advance.

[SikoraKam]

Same happens to me

[NilsBaumgartner1994]

getting the same error for this svg:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="300" height="300"><metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>Bottts</dc:title><dc:creator><cc:Agent><dc:title>Pablo Stanley</dc:title></cc:Agent></dc:creator><dc:source>https://bottts.com/</dc:source><cc:license rdf:resource="https://bottts.com/"/><dc:contributor><cc:Agent><dc:title>Florian Körner</dc:title></cc:Agent></dc:contributor></cc:Work></rdf:RDF></metadata><mask id="avatarsRadiusMask"><rect width="180" height="180" rx="0" ry="0" x="0" y="0" fill="#fff"/></mask><g mask="url(#avatarsRadiusMask)"><g transform="translate(0, 66)"><g opacity="0.9"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.5 41C41.6127 41 49 32.9411 49 23C49 13.0589 41.6127 5 32.5 5C23.3873 5 16 13.0589 16 23C16 32.9411 23.3873 41 32.5 41Z" stroke="#2A3544" stroke-width="6"/><path d="M29.5152 36.7649C22.1017 41.0451 12.5101 38.3112 8.0918 30.6585" stroke="#2A3544" stroke-width="4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M28 67C37.3888 67 45 60.5081 45 52.5C45 44.4919 37.3888 38 28 38C18.6112 38 12 44.4919 12 52.5C12 60.5081 18.6112 67 28 67Z" stroke="#2A3544" stroke-width="4"/><path d="M168.606 60.4234C164.326 53.0099 154.653 50.5817 147 55" stroke="#2A3544" stroke-width="4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M148 38C157.389 38 165 31.0604 165 22.5C165 13.9396 157.389 7 148 7C138.611 7 132 13.9396 132 22.5C132 31.0604 138.611 38 148 38Z" stroke="#2A3544" stroke-width="6"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M145 0C143.895 0 143 0.89543 143 2V20C143 21.1046 143.895 22 145 22H157C158.105 22 159 21.1046 159 20V2C159 0.895431 158.105 0 157 0H145ZM23 27C21.8954 27 21 27.8954 21 29V47C21 48.1046 21.8954 49 23 49H35C36.1046 49 37 48.1046 37 47V29C37 27.8954 36.1046 27 35 27H23ZM24 60C22.8954 60 22 60.8954 22 62V70C22 71.1046 22.8954 72 24 72H36C37.1046 72 38 71.1046 38 70V62C38 60.8954 37.1046 60 36 60H24ZM143 44C143 42.8954 143.895 42 145 42H157C158.105 42 159 42.8954 159 44V62C159 63.1046 158.105 64 157 64H145C143.895 64 143 63.1046 143 62V44Z" fill="#273951"/><mask id="sidesCables01Mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="21" y="0" width="138" height="72"><path fill-rule="evenodd" clip-rule="evenodd" d="M145 0C143.895 0 143 0.89543 143 2V20C143 21.1046 143.895 22 145 22H157C158.105 22 159 21.1046 159 20V2C159 0.895431 158.105 0 157 0H145ZM23 27C21.8954 27 21 27.8954 21 29V47C21 48.1046 21.8954 49 23 49H35C36.1046 49 37 48.1046 37 47V29C37 27.8954 36.1046 27 35 27H23ZM24 60C22.8954 60 22 60.8954 22 62V70C22 71.1046 22.8954 72 24 72H36C37.1046 72 38 71.1046 38 70V62C38 60.8954 37.1046 60 36 60H24ZM143 44C143 42.8954 143.895 42 145 42H157C158.105 42 159 42.8954 159 44V62C159 63.1046 158.105 64 157 64H145C143.895 64 143 63.1046 143 62V44Z" fill="white"/></mask><g mask="url(#sidesCables01Mask0)"><rect width="180" height="76" fill="#FFA726"/></g></g><g transform="translate(41, 0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 22C20.2386 22 18 24.2386 18 27V40H12C10.8954 40 10 40.8954 10 42V52H18H34H42H58H66H82H90V42C90 40.8954 89.1046 40 88 40H82V27C82 24.2386 79.7614 22 77 22H71C68.2386 22 66 24.2386 66 27V40H58V27C58 24.2386 55.7614 22 53 22H47C44.2386 22 42 24.2386 42 27V40H34V27C34 24.2386 31.7614 22 29 22H23Z" fill="#E1E6E8"/><mask id="topLightsMask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="22" width="80" height="30"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 22C20.2386 22 18 24.2386 18 27V40H12C10.8954 40 10 40.8954 10 42V52H18H34H42H58H66H82H90V42C90 40.8954 89.1046 40 88 40H82V27C82 24.2386 79.7614 22 77 22H71C68.2386 22 66 24.2386 66 27V40H58V27C58 24.2386 55.7614 22 53 22H47C44.2386 22 42 24.2386 42 27V40H34V27C34 24.2386 31.7614 22 29 22H23Z" fill="white"/></mask><g mask="url(#topLightsMask0)"><rect width="100" height="52" fill="#FFA726"/><rect width="100" height="40" fill="white" fill-opacity="0.6"/><rect x="24" y="28" width="4" height="8" rx="2" fill="white" fill-opacity="0.6"/><rect x="48" y="28" width="4" height="8" rx="2" fill="white" fill-opacity="0.6"/><rect x="72" y="28" width="4" height="8" rx="2" fill="white" fill-opacity="0.6"/></g></g><g transform="translate(25, 44)"><rect width="130" height="120" rx="18" fill="#0076DE"/><mask id="faceSquare01Mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="130" height="120"><rect width="130" height="120" rx="18" fill="white"/></mask><g mask="url(#faceSquare01Mask0)"><rect x="-2" y="-2" width="134" height="124" fill="#FB8C00"/> undefined </g></g><g transform="translate(52, 124)"><path d="M27.0493 8.44151C26.8055 7.36419 27.4811 6.29318 28.5584 6.04935C29.6358 5.80551 30.7068 6.48119 30.9506 7.55851C31.72 10.9578 34.4016 13 37.9999 13C41.5983 13 44.2799 10.9578 45.0493 7.55851C45.2931 6.48119 46.3641 5.80551 47.4414 6.04935C48.5188 6.29318 49.1944 7.36419 48.9506 8.44151C47.7599 13.7024 43.4298 17 37.9999 17C32.5701 17 28.24 13.7024 27.0493 8.44151Z" fill="black" fill-opacity="0.6"/></g><g transform="translate(38, 76)"><rect x="8" y="10" width="88" height="36" rx="4" fill="black" fill-opacity="0.8"/><rect x="28" y="21" width="10" height="17" rx="2" fill="#5EF2B8"/><rect x="66" y="21" width="10" height="17" rx="2" fill="#5EF2B8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M83 10H88L76 46H71L83 10Z" fill="white" fill-opacity="0.4"/></g></g></svg>

[WoLewicki]

@NilsBaumgartner1994 you have undefined string inside the svg, if you remove it, it renders correctly on my device. Since this svg renders correctly in the browser, it seems like a bug in the parser implementation, so I would start with looking there for why it adds undefined as a string. You can check it here by passing your svg e.g. here: https://www.svgviewer.dev/svg-to-react-native-jsx

[yume-chan]

This works:

import { Text, View, StyleSheet } from 'react-native';
import { Svg, Text as SvgText } from 'react-native-svg';

function MyFancyText() {
  return 'Hello World';
}

export default function App() {
  return (
    <Text>
      Here is my fancy text:
      <MyFancyText />
    </Text>
  );
}

But this not:

<Svg>
  <SvgText y={20} fill="black">
    Here is my fancy text in SVG:
    <MyFancyText />
  </SvgText>
</Svg>

[ZeroToNine09]

In my case it was due to invalid svg file.
Specifically, one tag may not have an opening (<)

[bohdanprog]

Hello,
I believe the issue has already been resolved. If you are still experiencing problems, please feel free to open a new one.
Thank you