feat: support dataUri for android platform

apps/test-examples/App.js

@@ -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';

apps/test-examples/src/Test1318.tsx

@@ -0,0 +1,52 @@
+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%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'
+        }
+      />
+      <SvgUri
+        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%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'
+        }
+      />
+    </>
+  );
+}

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,

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,

src/utils/fetchData.ts

@@ -0,0 +1,53 @@
+import { Buffer } from 'buffer';
+
+export function fetchText(uri?: string): Promise<string | null> {
+  if (uri && uri.startsWith('data:')) {
+    return new Promise((resolve) => {
+      resolve(dataUriToXml(uri));
+    });
+  } else {
+    return localFetch(uri);
+  }
+}
+
+// copy from https://www.npmjs.com/package/data-uri-to-buffer
+function dataUriToXml(uri: string) {
+  if (!/^data:/i.test(uri)) {
+    throw new TypeError(
+      '`uri` does not appear to be a Data URI (must begin with "data:")'
+    );
+  }
+  // strip newlines
+  uri = uri.replace(/\r?\n/g, '');
+  // split the URI up into the "metadata" and the "data" portions
+  const firstComma = uri.indexOf(',');
+  if (firstComma === -1 || firstComma <= 4) {
+    throw new TypeError('malformed data: URI');
+  }
+  // remove the "data:" scheme and parse the metadata
+  const meta = uri.substring(5, firstComma).split(';');
+  let base64 = false;
+  for (let i = 1; i < meta.length; i++) {
+    if (meta[i] === 'base64') {
+      base64 = true;
+    }
+  }
+
+  // get the encoded data portion and decode URI-encoded chars
+  const data = unescape(uri.substring(firstComma + 1));
+  if (!base64) {
+    return data;
+  }
+  return Buffer.from(data).toString('base64');
+}
+
+async function localFetch(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}`);
+}

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);