console.error: "ERROR SVG", TypeError: Network request failed

[ZaidAbo]

I'm facing a really weird issue

this error appear when i enable the live debug on Ios device and when i stop debug the svg image showed up perfectly

 <SvgUri
          width="200"
          height="200"
          source={{ uri: "http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg" }}
        />

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-svg": "^9.13.3",
"react-native-svg-uri": "^1.2.3",

[rafaelbpa]

Same here when using local file.... Any solution?

[glucianog]

It's not the solution at all, but after doing some researches, based on this, I tried a "thing" and it's working for now.

It seems that "Http" protocol are no longer supported by this library. So, I just replaced "http" protocol with "Https" and as I said it's working. If you're using a local .svg file, it's perfect due to the 'w3.org' link that allows you to change it easly. However whether it's not the case, you may need look for another solution, for instance, convert the SVG file to a PNG or wait until some fixes show up.

[josuenm]

This is the correct code below, you don't need to use source.
<SvgUri uri={{ uri: "http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg" }} />

If you're using local file,

• Install react-native-svg as production dependency
• Install react-native-svg-transformer as dev dependency
• Create metro.config.js file.
  Use this config in metro.config.js:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Now you can use your local file:

import SVGImg from './image.svg';

<SVGImg width={200} height={200} />

[francis-vila]

@josuenm
did you mean " npm install react-native-svg-transformer "?

( npm install react-native-transformer gives me an error)

[josuenm]

@francis-vila

Install react-native-svg and then install react-native-svg-transformer as development dependency

[francis-vila]

Thanks @josuenm, installation worked this time. I used expo install. Also I had to do expo install -d react-native-svg-transformer twice, as it didn't work first time. It seems you can't say an npm install doesn't work until you have failed at least 3 times.