1

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

spjgoku
  • 71
  • 1
  • 6

1 Answers1

0

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>
);
Andrew
  • 630
  • 1
  • 5
  • 14
  • @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 Feb 24 '23 at 00:00
  • ..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 Feb 24 '23 at 00:02
  • @Andrey..I am using SVGR to convert svg images into React Native component.. – spjgoku Feb 24 '23 at 00:08