Add support for setting an onError prop on SvgCssUri (#1718)

In PR #1266, support was added for setting an onError property on SvgUri. This PR adds the same to SvgCssUri.

README.md

@@ -349,6 +349,29 @@ export default () => (
 );
 ```
 
+#### Error handling
+
+Both `SvgUri` and `SvgCssUri` log errors to the console, but otherwise ignore them.
+You can set property `onError` if you want to handle errors such as resource not
+existing in a different way.
+
+```jsx
+import * as React from 'react';
+import { SvgUri } from 'react-native-svg';
+
+export default () => {
+  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
+  return (
+    <SvgUri
+      onError={() => setUri('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg')}
+      width="100%"
+      height="100%"
+      uri={uri}
+    />
+  );
+}
+```
+
 ### Use with svg files
 
 Try [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) to get compile time conversion and cached transformations.

TestsExample/src/SampleTest.tsx

@@ -5,7 +5,8 @@ import {
   Circle,
   Rect,
   Text,
-  TSpan
+  TSpan,
+  SvgUri
 } from 'react-native-svg';
 
 const color = PlatformColor(Platform.select({
@@ -16,6 +17,7 @@ const color = PlatformColor(Platform.select({
 
 export default () => {
   const [test, setTest] = React.useState(50);
+  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
 
   return (
     <>
@@ -44,6 +46,12 @@ export default () => {
         </Text>
       </Svg>
       <Button title="Click me" onPress={()=> setTest(test + 1)}/>
+      <SvgUri
+        onError={() => setUri('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg')}
+        width="100"
+        height="100"
+        uri={uri}
+      />
     </>
   );
-}
+}

src/css.tsx

@@ -692,15 +692,15 @@ export function SvgCss(props: XmlProps) {
 }
 
 export function SvgCssUri(props: UriProps) {
-  const { uri } = props;
+  const { uri, onError = err } = props;
   const [xml, setXml] = useState<string | null>(null);
   useEffect(() => {
     uri
       ? fetchText(uri)
           .then(setXml)
-          .catch(err)
+          .catch(onError)
       : setXml(null);
-  }, [uri]);
+  }, [onError, uri]);
   return <SvgCss xml={xml} override={props} />;
 }
 

src/index.d.ts

@@ -544,12 +544,14 @@ export interface JsxAST extends AST {
 
 export interface UriProps extends SvgProps {
   uri: string | null;
+  onError?: (error: Error) => void;
   override?: SvgProps;
 }
 export type UriState = { xml: string | null };
 
 export interface XmlProps extends SvgProps {
   xml: string | null;
+  onError?: (error: Error) => void;
   override?: SvgProps;
 }
 export type XmlState = { ast: JsxAST | null };

src/index.js.flow

@@ -501,6 +501,7 @@ export type JsxAST = {
 } & AST;
 export type UriProps = {
   uri: string | null,
+  onError?: (error: Error) => void,
   override?: SvgProps,
   ...
 } & SvgProps;
@@ -510,6 +511,7 @@ export type UriState = {
 };
 export type XmlProps = {
   xml: string | null,
+  onError?: (error: Error) => void,
   override?: SvgProps,
   ...
 } & SvgProps;