SvgUri Error. UnexpectedData 
		

[dimaportenko]

Bug

I'm using SvgUri like

<SvgUri
	width="60"
	height="60"
	uri="https://mydomain.com/images/logo.svg"
/>

and I'm getting following error

there is element in SVG file

<polygon fill="#FF4422" points="37.16667,56.13386 47.16667,56.13386 47.16667,81.13386 62.16665,81.13386 62.16665,56.13386 &#10;&#9;&#9;72.16666,56.13386 72.16666,41.13386 37.16667,41.13386 &#9;"/>

and issue causes following escape format sequences 
, 	

I've tried to put this string directly to Polygon elements and it unescaped those sequences automatically and render just fine. Also, my SVG renders in a browser without any issue.

<Polygon
  points="37.16667,56.13386 47.16667,56.13386 47.16667,81.13386 62.16665,81.13386 62.16665,56.13386 &#10;&#9;&#9;72.16666,56.13386 72.16666,41.13386 37.16667,41.13386 &#9;"
  fill="#FF4422"
/>

I see solution as add

.replace(/&#.+?;/g, '')

to unescape fetched string. I think best place is

// src/xml.tsx

function getAttributes(props: {
  [x: string]: Styles | string | number | boolean | undefined;
  style?: string | Styles | undefined;
}) {
  while (i < length) {
    
    // ...
    
    // ----- fix starts
    if (typeof value === "string") {
      value = String(value).replace(/&#.+?;/g, '');
    }
    // ----- fix ends

    props[camelCase(name)] = value;
  }
}

I can make PR. Please let me know what do you think.

[dimaportenko]

For those who are looking for a workaround, you can use the following

import React, { useEffect, useState } from 'react';
import { SvgXml, UriProps } from 'react-native-svg';

async function fetchText(uri: string) {
  const response = await fetch(uri);
  const result = await response.text();
  return result.replace(/&#.+?;/g, '');
}

export function SvgUri(props: UriProps) {
  const { uri } = props;
  const [xml, setXml] = useState(null);
  useEffect(() => {
    uri
      ? fetchText(uri)
        .then(setXml)
        .catch(err => console.log(err))
      : setXml(null);
  }, [setXml, uri]);
  return <SvgXml xml={xml} override={props} />;
}

[stale]

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.

[stale]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.

[mschmid]

Still have this issue in production. Thanks for the workaround, @dimaportenko. Unfortunately only found it after having crashes and searching for several weeks.
I think kobilhos PR should be merged.