SVG not rendering when using react-native-svg-uri

Question

Environment info

React native info output:

"react": "16.8.6",
"react-native": "0.60.4"

Library version: 1.2.3

Steps To Reproduce

Create a fresh project using react-native-cli.
Bring in an SVG file into the src folder of the project (I downloaded and used the homer simpson image mentioned in the documentation of react-native-svg-uri for the test ).
Import the svg as import MySVG from './mysvg.svg';
Pass MySVG into svgXmlData property of SvgUri component

Expected behaviour

The image should render on screen

Reproducible sample code

import React from 'react';
import SvgUri from 'react-native-svg-uri';

import MySVG from './mysvg.svg';

const MyComponent = () => {
  return (
     <>
      <SvgUri
        svgXmlData={MySVG}
        width="25"
        height="25"
      />
    </>
  );
};

export default MyComponent;

Error Message

I have no idea how but after repeating the same thing over and over again it finally works. — Muljayan, Aug 09 '19 at 10:47

score 1 · Answer 1 · answered Aug 08 '19 at 15:14

1

You can try this Direct Path Declaration

<SvgUri
        width="25"
        height="25"
        source={require('./mysvg.svg')} />

answered Aug 08 '19 at 15:14

hong developer

13,291
4
38
68

score 0 · Answer 2 · answered Aug 08 '19 at 11:32

If you have a svg file declared and not using an uri, I would recommend to use the react-native-svg project from the react-native-community (https://github.com/react-native-community/react-native-svg)

With this, you turn your svg file to a React Stateless Component (the translation is quite straightforward) and you can use it as a standard React component.