Add onLoad method to SvgUri (#1817)

Co-authored-by: Harvey Connor <[email protected]>

USAGE.md

@@ -91,15 +91,31 @@ If remote SVG file contains CSS in `<style>` element, use `SvgCssUri`:
 
 ```jsx
 import * as React from 'react';
-import { SvgCssUri } from 'react-native-svg';
-
-export default () => (
-  <SvgCssUri
-    width="100%"
-    height="100%"
-    uri="http://thenewcode.com/assets/svg/accessibility.svg"
-  />
-);
+import { ActivityIndicator, View, StyleSheet } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+export default function TestComponent() {
+  const [loading, setLoading] = React.useState(true);
+  const onError = (e: Error) => {
+    console.log(e.message);
+    setLoading(false);
+  };
+  const onLoad = () => {
+    console.log('Svg loaded!');
+    setLoading(false);
+  };
+  return (
+    <>
+    <SvgUri
+      width="100"
+      height="100"
+      uri="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg"
+      onError={onError}
+      onLoad={onLoad}
+    />
+    {loading && <ActivityIndicator size="large" color="#0000ff"/>}
+    </>
+  );
+}
 ```
 
 ## Error handling

src/index.js.flow

@@ -492,6 +492,8 @@ export type UriProps = {
   uri: string | null,
   onError?: (error: Error) => void,
   override?: SvgProps,
+  onError?: (error: Error) => void,
+  onLoad?: () => void,
   ...
 } & SvgProps;
 export type UriState = {

src/xml.tsx

@@ -84,6 +84,7 @@ export interface JsxAST extends AST {
 export type AdditionalProps = {
   onError?: (error: Error) => void;
   override?: Object;
+  onLoad?: () => void;
 };
 
 export type UriProps = SvgProps & { uri: string | null } & AdditionalProps;
@@ -132,11 +133,18 @@ export async function fetchText(uri: string) {
 }
 
 export function SvgUri(props: UriProps) {
-  const { onError = err, uri } = props;
+  const { onError = err, uri, onLoad } = props;
   const [xml, setXml] = useState<string | null>(null);
   useEffect(() => {
-    uri ? fetchText(uri).then(setXml).catch(onError) : setXml(null);
-  }, [onError, uri]);
+    uri
+      ? fetchText(uri)
+          .then((data) => {
+            setXml(data);
+            onLoad?.();
+          })
+          .catch(onError)
+      : setXml(null);
+  }, [onError, uri, onLoad]);
   return <SvgXml xml={xml} override={props} />;
 }