"TypeError": "Network request failed"

[tiavina-mika]

trafficstars

I got this error when importing local svg file using svgUri <SvgUri width="100%" height="100%" uri={require('../../assets/icons/logo.svg')} />`

`

[ziaadini]

this is for get svg from remote server try this https://github.com/kristerkari/react-native-svg-transformer

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[collinprice]

I'm getting "Network request failed" when I attempt to load a svg using a data uri on android. This works on iOS.

<SvgCssUri
    height={100}
    width={100}
    uri={
"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22%2354b847%22%20d%3D%22M0%200h100v100H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M61.6%2069.1h-17V38.3h8.6v25.4h8.2c5.7%200%208.1-3.9%208.1-14.1S66.8%2036.4%2061%2036.4H42.2v32.7h-8.4V36.3H21.4v-5.4h42.3c10.2%200%2015%205.3%2015%2018.6-.1%2017.4-7.3%2019.6-17.1%2019.6%22%2F%3E%3C%2Fsvg%3E"
    }
/>

[collinprice]

I narrowed it down to the fetch api not working as expected on Android.

https://github.com/react-native-community/react-native-svg/blob/e66e87a5b5c090509d5e2127237963f83e60f1e9/src/xml.tsx#L113

Calling fetch with a data uri throws the exception [TypeError: Network request failed].

[IgorMing]

I'm getting the same error here

[tiavina-mika]

The solution I found is make the Svg a React component instead of an image file

[doganserekin]

Sorry, I don't understand, how? Can you describe it?

[sanguineman91]

The solution I found is make the Svg a React component instead of an image file

Can you describe how to solve it, thanks

[trymbill]

@collinprice, did you manage to fix this issue? I'm having the same exact problem.

[TomasSestak]

getting this on iOS

[DaniloPootaren]

I'm having the same issue as @collinprice, who manage to find a workaround?

[DaniloPootaren]

Alright not sure why this library is not working on Android, I found a dirty and "quick" workaround to render your svg via data uri.

Since I'm already using react webview. I decided to make my own SvgUri component which works on both Android and IOS.

import React from 'react';
import {WebView} from 'react-native-webview';

type SvgUriProps = {
  uri: string;
  height: number;
  width: number;
};

const SvgUri = (props: SvgUriProps) => {
  const {uri, height, width} = props;
  const html = `
  <div>
   <img width="100%" height="100%"src="${uri}"/>
  </div>
  `;
  return (
    <WebView
      source={{html: html}}
      javaScriptEnabled={true}
      style={{height, width}}
    />
  );
};

export default SvgUri;

[ankitk-nimblechapps]

Hello, Please merge these commit as earlier as possible. Thanks

[anaarezo]

I'm currently having the same issue on iPhone 13, iOS 16.4: Console Error: Network request failed

[AaronConlon]

import {View, Image} from 'react-native';
import {SvgUri} from 'react-native-svg';

const {uri, width, height} = Image.resolveAssetSource(require('../../assets/example.svg'));

<SvgUri
  width={width}
  height={height}
  uri={uri}
/>

[aztran]

hi anyone have the workaround for this issue? i am currently having the same issue with android simulator and IOS (tried 15 pro)

[jakex7]

Hi! I suggest you looking at the docs in the USAGE.md file, specifically the Use with svg files section. This section describes how to use a local *.svg file, as SvgUri should only be used for external resources.

[aztran]

hi @jakex7 any suggestion how to render svg from URL ? currently I use SvgUri and it works using URL in real device, but in emulator always return "Network Request Failed"

[jakex7]

Hey @aztran, could you share the minimal reproducible repo? Or snack snack.expo.dev

[AhmadBadah]

I faced the same problem with @collinprice. Finally, I solved this issue by decode base64 svg image by this package react-native-base64 then

const imageData = base64.decode(imageBase64Svg)
<SvgXml xml={decodedImage} width={50} height={50} />

this works with me on the Android platform