From 7ccd8c5a79f05d5f00010bd4f28f564e56a5f327 Mon Sep 17 00:00:00 2001
From: Patrick Wehbe <patrick.wehbe.applications@gmail.com>
Date: Sat, 20 Jun 2026 14:18:34 +0300
Subject: [PATCH] feat: allow passing HTTP headers to SvgUri

Thread an optional `headers` prop through the URI components so requests
can carry custom HTTP headers, modelled on React Native's
`ImageURISource.headers`. The prop is optional and defaults to the
previous behaviour, so existing usage is unaffected.

`fetchText`/`fetchUriData` now accept an optional headers map and forward
it to `fetch(uri, { headers })`. `headers` is added to `UriProps` and
passed from `SvgUri`, `SvgFromUri`, `SvgCssUri` and `SvgWithCssUri`,
including in the effect/`componentDidUpdate` paths so changing the
headers re-fetches.

Closes #2320
---
 apps/common/test/Test2320.tsx | 52 +++++++++++++++++++++++++++++++++++
 apps/common/test/index.tsx    |  1 +
 src/css/css.tsx               | 23 +++++++++-------
 src/utils/fetchData.ts        | 11 +++++---
 src/xml.tsx                   | 33 ++++++++++++++--------
 5 files changed, 95 insertions(+), 25 deletions(-)
 create mode 100644 apps/common/test/Test2320.tsx

diff --git a/apps/common/test/Test2320.tsx b/apps/common/test/Test2320.tsx
new file mode 100644
index 000000000..a160cc762
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/common/test/index.tsx b/apps/common/test/index.tsx
index 6a7568af0..cb73cc9c8 100644
--- a/apps/common/test/index.tsx
+++ b/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';
diff --git a/src/css/css.tsx b/src/css/css.tsx
index 60257e3f9..13675e7ae 100644
--- a/src/css/css.tsx
+++ b/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);
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
index afbe59fd8..64df776a7 100644
--- a/src/utils/fetchData.ts
+++ b/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();
   }
diff --git a/src/xml.tsx b/src/xml.tsx
index 0fbe0ec88..313f78f21 100644
--- a/src/xml.tsx
+++ b/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);
     }