feat: allow passing HTTP headers to SvgUri

apps/common/test/Test2320.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Button, View} from 'react-native';
+import {Circle, Svg, SvgUri} from 'react-native-svg';
+
+// https://github.com/software-mansion/react-native-svg/issues/2320
+// SvgUri (and the other URI components) accept an optional `headers` prop
+// that is forwarded to the underlying fetch call, mirroring
+// ImageURISource.headers.
+export default () => {
+  const [uri, setUri] = React.useState<string | null>(null);
+
+  // Keep the headers object referentially stable so the effect does not
+  // re-run and re-fetch on every render.
+  const headers = React.useMemo(
+    () => ({
+      Authorization: 'Bearer example-token',
+      'X-Custom-Header': 'react-native-svg',
+    }),
+    [],
+  );
+
+  return (
+    <View style={{flex: 1, paddingTop: 100}}>
+      <Svg width={200} height={200}>
+        <Circle
+          cx={60}
+          cy={60}
+          r={50}
+          stroke="black"
+          strokeWidth={5}
+          fill="none"
+        />
+        {uri && (
+          <SvgUri uri={uri} headers={headers} width={80} height={80} />
+        )}
+      </Svg>
+      <Button
+        color={'#000000'}
+        title="Toggle image"
+        onPress={() => {
+          if (!uri) {
+            setUri(
+              'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg',
+            );
+          } else {
+            setUri(null);
+          }
+        }}
+      />
+    </View>
+  );
+};

apps/common/test/index.tsx

@@ -23,6 +23,7 @@ import Test2196 from './Test2196';
 import Test2248 from './Test2248';
 import Test2266 from './Test2266';
 import Test2276 from './Test2276';
+import Test2320 from './Test2320';
 import Test2327 from './Test2327';
 import Test2233 from './Test2233';
 import Test2363 from './Test2363';

src/css/css.tsx

@@ -780,12 +780,12 @@ export function SvgCss(props: XmlProps) {
 }
 
 export function SvgCssUri(props: UriProps) {
-  const { uri, onError = err, onLoad, fallback } = props;
+  const { uri, onError = err, onLoad, fallback, headers } = props;
   const [xml, setXml] = useState<string | null>(null);
   const [isError, setIsError] = useState(false);
   useEffect(() => {
     uri
-      ? fetchText(uri)
+      ? fetchText(uri, headers)
           .then((data) => {
             setXml(data);
             onLoad?.();
@@ -795,7 +795,7 @@ export function SvgCssUri(props: UriProps) {
             setIsError(true);
           })
       : setXml(null);
-  }, [onError, uri, onLoad]);
+  }, [onError, uri, onLoad, headers]);
   if (isError) {
     return fallback ?? null;
   }
@@ -837,19 +837,22 @@ export class SvgWithCss extends Component<XmlProps, XmlState> {
 export class SvgWithCssUri extends Component<UriProps, UriState> {
   state = { xml: null };
   componentDidMount() {
-    this.fetch(this.props.uri);
+    this.fetch(this.props.uri, this.props.headers);
   }
 
-  componentDidUpdate(prevProps: { uri: string | null }) {
-    const { uri } = this.props;
-    if (uri !== prevProps.uri) {
-      this.fetch(uri);
+  componentDidUpdate(prevProps: {
+    uri: string | null;
+    headers?: Record<string, string>;
+  }) {
+    const { uri, headers } = this.props;
+    if (uri !== prevProps.uri || headers !== prevProps.headers) {
+      this.fetch(uri, headers);
     }
   }
 
-  async fetch(uri: string | null) {
+  async fetch(uri: string | null, headers?: Record<string, string>) {
     try {
-      this.setState({ xml: uri ? await fetchText(uri) : null });
+      this.setState({ xml: uri ? await fetchText(uri, headers) : null });
       this.props.onLoad?.();
     } catch (e) {
       this.props.onError ? this.props.onError(e as Error) : console.error(e);

src/utils/fetchData.ts

@@ -1,6 +1,9 @@
 import { Platform } from 'react-native';
 
-export async function fetchText(uri?: string): Promise<string | null> {
+export async function fetchText(
+  uri?: string,
+  headers?: Record<string, string>
+): Promise<string | null> {
   if (!uri) {
     return null;
   }
@@ -9,7 +12,7 @@ export async function fetchText(uri?: string): Promise<string | null> {
   } else if (uri.startsWith('data:image/svg+xml;base64')) {
     return decodeBase64Image(uri);
   } else {
-    return fetchUriData(uri);
+    return fetchUriData(uri, headers);
   }
 }
 
@@ -30,8 +33,8 @@ function dataUriToXml(uri: string): string | null {
   }
 }
 
-async function fetchUriData(uri: string) {
-  const response = await fetch(uri);
+async function fetchUriData(uri: string, headers?: Record<string, string>) {
+  const response = await fetch(uri, { headers });
   if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
     return await response.text();
   }

src/xml.tsx

@@ -39,7 +39,15 @@ export type AdditionalProps = {
   fallback?: JSX.Element;
 };
 
-export type UriProps = SvgProps & { uri: string | null } & AdditionalProps;
+export type UriProps = SvgProps & {
+  uri: string | null;
+  /**
+   * Additional HTTP headers to send with the request, modelled on
+   * `ImageURISource.headers`. Keep this object referentially stable
+   * (e.g. memoized) to avoid unnecessary re-fetches.
+   */
+  headers?: Record<string, string>;
+} & AdditionalProps;
 export type UriState = { xml: string | null };
 
 export type XmlProps = SvgProps & { xml: string | null } & AdditionalProps;
@@ -80,12 +88,12 @@ export function SvgXml(props: XmlProps) {
 }
 
 export function SvgUri(props: UriProps) {
-  const { onError = err, uri, onLoad, fallback } = props;
+  const { onError = err, uri, onLoad, fallback, headers } = props;
   const [xml, setXml] = useState<string | null>(null);
   const [isError, setIsError] = useState(false);
   useEffect(() => {
     uri
-      ? fetchText(uri)
+      ? fetchText(uri, headers)
           .then((data) => {
             setXml(data);
             isError && setIsError(false);
@@ -97,7 +105,7 @@ export function SvgUri(props: UriProps) {
           })
       : setXml(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onError, uri, onLoad]);
+  }, [onError, uri, onLoad, headers]);
   if (isError) {
     return fallback ?? null;
   }
@@ -144,19 +152,22 @@ export class SvgFromXml extends Component<XmlProps, XmlState> {
 export class SvgFromUri extends Component<UriProps, UriState> {
   state = { xml: null };
   componentDidMount() {
-    this.fetch(this.props.uri);
+    this.fetch(this.props.uri, this.props.headers);
   }
 
-  componentDidUpdate(prevProps: { uri: string | null }) {
-    const { uri } = this.props;
-    if (uri !== prevProps.uri) {
-      this.fetch(uri);
+  componentDidUpdate(prevProps: {
+    uri: string | null;
+    headers?: Record<string, string>;
+  }) {
+    const { uri, headers } = this.props;
+    if (uri !== prevProps.uri || headers !== prevProps.headers) {
+      this.fetch(uri, headers);
     }
   }
 
-  async fetch(uri: string | null) {
+  async fetch(uri: string | null, headers?: Record<string, string>) {
     try {
-      this.setState({ xml: uri ? await fetchText(uri) : null });
+      this.setState({ xml: uri ? await fetchText(uri, headers) : null });
     } catch (e) {
       console.error(e);
     }