Repository: software-mansion/react-native-svg (language: java)

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


Discussion / hints:
this is for get svg from remote server try this
[https://github.com/kristerkari/react-native-svg-transformer](url)
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.

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"
    }
/>
```
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]`.
I'm getting the same error here
The solution I found is make the Svg a React component instead of an image file
Sorry, I don't understand, how? Can you describe it?
> The solution I found is make the Svg a React component instead of an image file

Can you describe how to solve it, thanks
@collinprice, did you manage to fix this issue? I'm having the same exact problem.
getting this on iOS

I'm having the same issue as @collinprice, who manage to find a workaround?
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;
```


Hello, Please merge these commit as earlier as possible. Thanks
I'm currently having the same issue on iPhone 13, iOS 16.4:
Console Error:  Network request failed

```typescritp
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}
/>
```
hi
anyone have the workaround for this issue?
i am currently having the same issue with android simulator and IOS (tried 15 pro)
Hi!
I suggest you looking at the docs in the [USAGE.md](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#use-with-svg-files) 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.


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"
Hey @aztran, could you share the minimal reproducible repo? Or snack [snack.expo.dev](https://snack.expo.dev/)

Fix patch:
diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts
index addd927d7..4aca02df4 100644
--- a/src/ReactNativeSVG.ts
+++ b/src/ReactNativeSVG.ts
@@ -2,7 +2,6 @@ import Shape from './elements/Shape';
 import {
   AstProps,
   camelCase,
-  fetchText,
   JsxAST,
   Middleware,
   parse,
@@ -19,6 +18,8 @@ import {
   XmlState,
 } from './xml';
 
+import { fetchText } from './utils/fetchData';
+
 import {
   RNSVGCircle,
   RNSVGClipPath,
diff --git a/src/ReactNativeSVG.web.ts b/src/ReactNativeSVG.web.ts
index 5117b35fb..ee57bda8e 100644
--- a/src/ReactNativeSVG.web.ts
+++ b/src/ReactNativeSVG.web.ts
@@ -1,7 +1,6 @@
 import {
   AstProps,
   camelCase,
-  fetchText,
   JsxAST,
   Middleware,
   parse,
@@ -18,6 +17,8 @@ import {
   XmlState,
 } from './xml';
 
+import { fetchText } from './utils/fetchData';
+
 export {
   inlineStyles,
   loadLocalRawResource,
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
new file mode 100644
index 000000000..f08b16ed2
--- /dev/null
+++ b/src/utils/fetchData.ts
@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+
+export async function fetchText(uri?: string): Promise<string | null> {
+  if (!uri) {
+    return null;
+  }
+  if (uri.startsWith('data:image/svg+xml;utf8') && Platform.OS === 'android') {
+    return dataUriToXml(uri);
+  } else {
+    return fetchUriData(uri);
+  }
+}
+
+function dataUriToXml(uri: string): string | null {
+  try {
+    // decode and remove data:image/svg+xml;utf8, prefix
+    return decodeURIComponent(uri).split(',').slice(1).join(',');
+  } catch (error) {
+    throw new Error(`Decoding ${uri} failed with error: ${error}`);
+  }
+}
+
+async function fetchUriData(uri: string) {
+  const response = await fetch(uri);
+  if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
+    return await response.text();
+  }
+  throw new Error(`Fetching ${uri} failed with status ${response.status}`);
+}
diff --git a/src/xml.tsx b/src/xml.tsx
index cb72dd058..091d23330 100644
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -1,6 +1,7 @@
 import type { ComponentType, ComponentProps } from 'react';
 import * as React from 'react';
 import { Component, useEffect, useMemo, useState } from 'react';
+import { fetchText } from './utils/fetchData';
 import type { SvgProps } from './elements/Svg';
 import { tags } from './xmlTags';
 
@@ -78,17 +79,6 @@ export function SvgXml(props: XmlProps) {
   }
 }
 
-export async function fetchText(uri?: string) {
-  if (!uri) {
-    return null;
-  }
-  const response = await fetch(uri);
-  if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
-    return await response.text();
-  }
-  throw new Error(`Fetching ${uri} failed with status ${response.status}`);
-}
-
 export function SvgUri(props: UriProps) {
   const { onError = err, uri, onLoad, fallback } = props;
   const [xml, setXml] = useState<string | null>(null);


Test patch:
diff --git a/apps/test-examples/index.tsx b/apps/test-examples/index.tsx
index e8615269a..823ebbe5c 100644
--- a/apps/test-examples/index.tsx
+++ b/apps/test-examples/index.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import ColorTest from './src/ColorTest';
 import PointerEventsBoxNone from './src/PointerEventsBoxNone';
 import MountUnmount from './src/MountUnmount';
+import Test1318 from './src/Test1318';
 import Test1374 from './src/Test1374';
 import Test1442 from './src/Test1442';
 import Test1451 from './src/Test1451';
diff --git a/apps/test-examples/src/Test1318.tsx b/apps/test-examples/src/Test1318.tsx
new file mode 100644
index 000000000..a2a1331f9
--- /dev/null
+++ b/apps/test-examples/src/Test1318.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {SvgUri} from 'react-native-svg';
+import {SvgCssUri} from 'react-native-svg/css';
+
+export default function Test() {
+  return (
+    <>
+      <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'
+        }
+      />
+      <SvgCssUri
+        height={100}
+        width={100}
+        uri={
+          'data:image/svg+xml;utf8,%3Csvg%20width%3D%22300%22%20height%3D%22700%22%20viewBox%3D%2250%2050%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Crect%20x%3D%2250%22%20y%3D%2250%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22yellow%22%3E%3C%2Frect%3E%3C%2Fsvg%3E'
+        }
+      />
+      <SvgUri
+        height={100}
+        width={100}
+        uri={
+          'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250%2C15%2061%2C40%2088%2C40%2066%2C57%2075%2C84%2050%2C68%2025%2C84%2034%2C57%2012%2C40%2039%2C40%22%20fill%3D%22gold%22%2F%3E%3C%2Fsvg%3E'
+        }
+      />
+    </>
+  );
+}