From 24cfaabe3367e8cac19f760c0c37fac9f57cfba6 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 26 Jul 2022 17:47:12 +0200
Subject: [PATCH] Add onLoad method to SvgUri (#1817)

Co-authored-by: Harvey Connor <harvey@smartguide.com.au>
---
 USAGE.md          | 34 +++++++++++++++++++++++++---------
 src/index.js.flow |  2 ++
 src/xml.tsx       | 14 +++++++++++---
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/USAGE.md b/USAGE.md
index 6bb0e7e85..d61bea005 100644
--- a/USAGE.md
+++ b/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
diff --git a/src/index.js.flow b/src/index.js.flow
index f57710eaf..0550ba5b0 100644
--- a/src/index.js.flow
+++ b/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 = {
diff --git a/src/xml.tsx b/src/xml.tsx
index 9987b54c7..c6f1799ae 100644
--- a/src/xml.tsx
+++ b/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} />;
 }