From fc1c9a03476599a1bf1a64073a43edd8e31a989e Mon Sep 17 00:00:00 2001
From: Maxwell You <maxchhour@gmail.com>
Date: Wed, 15 Nov 2023 08:59:40 -0700
Subject: [PATCH] fix `SvgCssUri` fallback (#2171)

When using the `SvgCssUri` component, specifying `fallback` does not render the fallback component in the case of an error.

I looked through the source code and believe this is because `SvgCssUri` is rendering a `SvgCss`
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/css.tsx#L712
which renders a `SvgAst`
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/css.tsx#L696
which does not use the `fallback` prop
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/xml.tsx#L96

This fix copies over the error handling code from `SvgUri` so `SvgCssUri` can render a fallback on error. I tested the change in my project and this works like it does for `SvgUri`

Co-authored-by: Maxwell You <maxwell.you@mlb.com>
---
 src/css/css.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/css/css.tsx b/src/css/css.tsx
index 6ed5717b..fea79c62 100644
--- a/src/css/css.tsx
+++ b/src/css/css.tsx
@@ -697,8 +697,9 @@ export function SvgCss(props: XmlProps) {
 }
 
 export function SvgCssUri(props: UriProps) {
-  const { uri, onError = err, onLoad } = props;
+  const { uri, onError = err, onLoad, fallback } = props;
   const [xml, setXml] = useState<string | null>(null);
+  const [isError, setIsError] = useState(false);
   useEffect(() => {
     uri
       ? fetchText(uri)
@@ -706,9 +707,15 @@ export function SvgCssUri(props: UriProps) {
             setXml(data);
             onLoad?.();
           })
-          .catch(onError)
+          .catch((e) => {
+            onError(e);
+            setIsError(true);
+          })
       : setXml(null);
   }, [onError, uri, onLoad]);
+  if (isError) {
+    return fallback ?? null;
+  }
   return <SvgCss xml={xml} override={props} />;
 }