From ff18553b71e457e6b439b5c00a93b29d8f8c009a Mon Sep 17 00:00:00 2001
From: Quang <quang.k.cao@gmail.com>
Date: Wed, 3 Jan 2024 07:48:28 -0800
Subject: [PATCH] fix(SvgCssUri): support rendering fallback instead of
 crashing the app when loading invalid content from remote svg file (#2196)

This crash issue still happening for SvgCssUri component
#1760

Apply similar fix #2071
specifically for SvgCSSUri component to prevent crashes due to invalid svg content

What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged
-> When loading invalid svg uri with SvgCSSUri, the app crashes crashes. For example the content returning html content instead of valid svg content.

How did you implement the solution?
-> Passing the fallback prop to SvgCss where will be render when error being captured

What areas of the library does it impact?
SvgCss and SvgUriCss
---
 TestsExample/App.js           |  1 +
 TestsExample/src/Test2196.tsx | 59 +++++++++++++++++++++++++++++++++++
 src/css/css.tsx               | 19 ++++++-----
 3 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 TestsExample/src/Test2196.tsx

diff --git a/TestsExample/App.js b/TestsExample/App.js
index 023cd38f..a17e69df 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -10,6 +10,7 @@ import Test2080 from './src/Test2080';
 import PointerEventsBoxNone from './src/PointerEventsBoxNone';
 import Test2071 from './src/Test2071';
 import Test2089 from './src/Test2089';
+import Test2196 from './src/Test2196';
 
 export default function App() {
   return <ColorTest />;
diff --git a/TestsExample/src/Test2196.tsx b/TestsExample/src/Test2196.tsx
new file mode 100644
index 00000000..d9ddecd2
--- /dev/null
+++ b/TestsExample/src/Test2196.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {View, Button, Text} from 'react-native';
+import Svg, {Circle} from 'react-native-svg';
+import {SvgCssUri} from 'react-native-svg/css';
+
+const URIs = {
+  invalid: 'https://en.wikipedia.org/wiki/File:Vector-based_example.svg',
+  valid:
+    'https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg',
+};
+
+export default function App() {
+  const [uri, setUri] = React.useState(URIs.invalid);
+
+  const handlePress = React.useCallback(() => {
+    const newUri = uri === URIs.valid ? URIs.invalid : URIs.valid;
+    setUri(newUri);
+  }, [uri]);
+
+  const title =
+    uri === URIs.invalid
+      ? 'Render fallback due to invalid SVG'
+      : 'Render Valid SVG';
+
+  const buttonTitle = `Switch to ${
+    uri === URIs.invalid ? 'valid' : 'invalid'
+  } SVG`;
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Text>{title}</Text>
+      <View style={{paddingVertical: 20}}>
+        <SvgCssUri
+          onError={() => {}}
+          uri={uri}
+          width={100}
+          height={100}
+          fallback={
+            <Svg
+              width={100}
+              height={100}
+              viewBox="0 0 100 100"
+              transform={[{scaleX: 1}, {scaleY: -1}]}>
+              <Circle
+                cx={50}
+                cy={50}
+                r={40}
+                stroke="black"
+                strokeWidth={3}
+                fill="red"
+              />
+            </Svg>
+          }
+        />
+      </View>
+      <Button onPress={handlePress} title={buttonTitle} />
+    </View>
+  );
+}
diff --git a/src/css/css.tsx b/src/css/css.tsx
index fea79c62..3e066fca 100644
--- a/src/css/css.tsx
+++ b/src/css/css.tsx
@@ -688,12 +688,17 @@ export const inlineStyles: Middleware = function inlineStyles(
 };
 
 export function SvgCss(props: XmlProps) {
-  const { xml, override } = props;
-  const ast = useMemo<JsxAST | null>(
-    () => (xml !== null ? parse(xml, inlineStyles) : null),
-    [xml]
-  );
-  return <SvgAst ast={ast} override={override || props} />;
+  const {xml, override, fallback, onError = err} = props;
+  try {
+    const ast = useMemo<JsxAST | null>(
+      () => (xml !== null ? parse(xml, inlineStyles) : null),
+      [xml]
+    );
+    return <SvgAst ast={ast} override={override || props} />;
+  } catch (error) {
+    onError(error);
+    return fallback ?? null;
+  }
 }
 
 export function SvgCssUri(props: UriProps) {
@@ -716,7 +721,7 @@ export function SvgCssUri(props: UriProps) {
   if (isError) {
     return fallback ?? null;
   }
-  return <SvgCss xml={xml} override={props} />;
+  return <SvgCss xml={xml} override={props} fallback={fallback}/>;
 }
 
 // Extending Component is required for Animated support.