Text strings must be rendered within a <Text> component error when using svg in android device using react native expo app

Question

I am using react native expo to create web, ios and android app. I have an svg image url. I am using SVGR to convert svg image code into React native component and importing it as component in my app. It is working fine in web but on android it is giving mentioned error : 'Text strings must be rendered within a component'. When I checked generated svg component I found this line :

 ```import * as React from "react"
const SvgComponentFile = (props) => (
 <svg
 id="Layer_1"
 xmlns="http://www.w3.org/2000/svg"
 x={0}
 y={0}
 viewBox="0 0 385.11 279.06"
 style={{
 enableBackground: "new 0 0 385.11 279.06",
 }}
 xmlSpace="preserve"
 {...props}
 >
 **<style>{`.st0{fill:#fff}.st1{fill:#6fccdd}`}</style>**
 <path.....
 />```

I think tag line : {.st0{fill:#fff}.st1{fill:#6fccdd}} is cause of error but not sure. when I remove style tag, then it gives Path is not function or class component. Any idea where I am wrong.I have already invested 3 days in this issueenter code here

• Andrii Stropalov: Can you post a full code of the svg component?

Answer 1

Currently, there is no full code in the question. But, styles can be easily added to the svg inside react. Styles should be wrapped into a string.

You can look on the example here

const SvgComponentFile = (props) => (
 <svg
 id="Layer_1"
 xmlns="http://www.w3.org/2000/svg"
 x={0}
 y={0}
 viewBox="0 0 385.11 279.06"
 style={{
 enableBackground: "new 0 0 385.11 279.06"
 }}
 xmlSpace="preserve"
 {...props}
 >
 <style>{`circle{fill: red}`}</style>
 <circle cx="5" cy="5" r="4" />
 </svg>
);

• spjgoku: @Andrey...When I am using above code..then error is this: Invariant Violation: View config getter callback for component circle must be a function (received undefined). Make sure to start component names with a capital letter. This error is located at: in circle (created by SvgComponentFile) in svg (created by SvgComponentFile)
• spjgoku: ..It is working fine for web...My issue exist on android device. I am creating react native expo app.. It is happening when running svg code for android. In web everything is working fine but not on android
• spjgoku: @Andrey..I am using SVGR to convert svg images into React Native component..