Add HTTP headers to <SvgUri>

[pke]

Feature Request

It would be nice to be able to specify HTTP headers for SvgUri.

Why it is needed

Sometimes the server could serve a different variant of the SVG file depending on client features like dark contrast or inverted colours.

Possible implementation

It would just need on addition property headers which is modelled after the default ImageURISource prop.

Code sample

export type UriProps = { 
  uri: string | null;
  headers?: { [name:string]: string };
} & AdditionalProps;

export async function fetchText(uri: string, headers?: {[name:string]: string}) {
  const response = await fetch(uri, { headers });
  return await response.text();
}

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

Worth a PR?

The caller would need to ensure that headers is stable, or it would cause unnecessary re-rerenders.

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps to reproduce, Snack or a link to a repository, SVG version, React Native version and Platforms sections.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[pke]

Hey bot, its a feature request not a bug. The template looks totally different and I filled out everything.