[feature] add onLoad to SvgUri and fix typings for LocalSvg

README.md

@@ -12,47 +12,47 @@
 1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
 2. Easy to [convert SVG code](https://svgr.now.sh/) to react-native-svg.
 
-- [Installation](#installation)
-  - [Automatically](#automatically)
-  - [Manually](#manually)
-    - [Android](#android-pre-rn-060)
-    - [iOS](#ios-pre-rn-060)
-- [Troubleshooting](#troubleshooting)
+- [NOTICE:](#notice) - [Manually](#manually) - [Android pre RN 0.60](#android-pre-rn-060) - [iOS pre RN 0.60](#ios-pre-rn-060) - [CocoaPods](#cocoapods)
+  - [Troubleshooting](#troubleshooting)
+    - [Problems with Proguard](#problems-with-proguard)
+    - [Unexpected behavior](#unexpected-behavior)
 - [Opening issues](#opening-issues)
-- [Usage](#usage)
+  - [Usage](#usage)
   - [Use with content loaded from uri](#use-with-content-loaded-from-uri)
+    - [CSS Support](#css-support)
   - [Use with svg files](#use-with-svg-files)
   - [Use with xml strings](#use-with-xml-strings)
-- [Common props](#common-props)
-- [Supported elements](#supported-elements)
-  - [Svg](#svg)
-  - [Rect](#rect)
-  - [Circle](#circle)
-  - [Ellipse](#ellipse)
-  - [Line](#line)
-  - [Polygon](#polygon)
-  - [Polyline](#polyline)
-  - [Path](#path)
-  - [Text](#text)
-  - [TSpan](#tspan)
-  - [TextPath](#textpath)
-  - [G](#g)
-  - [Use](#use)
-  - [Symbol](#symbol)
-  - [Defs](#defs)
-  - [Image](#image)
-  - [ClipPath](#clippath)
-  - [LinearGradient](#lineargradient)
-  - [RadialGradient](#radialgradient)
-  - [Mask](#mask)
-  - [Pattern](#pattern)
-  - [Marker](#marker)
-  - [ForeignObject](#foreignobject)
-- [Touch Events](#touch-events)
-- [Serialize](#serialize)
-- [Run example](#run-example)
-- [TODO](#todo)
-- [Known issues](#known-issues)
+    - [CSS support](#css-support-1)
+  - [Common props:](#common-props)
+  - [Supported elements:](#supported-elements)
+    - [Svg](#svg)
+    - [Rect](#rect)
+    - [Circle](#circle)
+    - [Ellipse](#ellipse)
+    - [Line](#line)
+    - [Polygon](#polygon)
+    - [Polyline](#polyline)
+    - [Path](#path)
+    - [Text](#text)
+    - [TSpan](#tspan)
+    - [TextPath](#textpath)
+    - [G](#g)
+    - [Use](#use)
+    - [Symbol](#symbol)
+    - [Defs](#defs)
+    - [Image](#image)
+    - [ClipPath](#clippath)
+    - [LinearGradient](#lineargradient)
+    - [RadialGradient](#radialgradient)
+    - [Mask](#mask)
+    - [Pattern](#pattern)
+    - [Marker](#marker)
+    - [ForeignObject](#foreignobject)
+    - [Touch Events](#touch-events)
+  - [Serialize](#serialize)
+  - [Run example:](#run-example)
+  - [TODO:](#todo)
+  - [Known issues:](#known-issues)
 
 ### Installation
 
@@ -64,9 +64,9 @@
 
 Install the JavaScript with:
 
-  ```bash
-  expo install react-native-svg
-  ```
+```bash
+expo install react-native-svg
+```
 
 📚 See the [**Expo docs**](https://docs.expo.io/versions/latest/sdk/svg/) for more info or jump ahead to [Usage](#Usage).
 
@@ -317,15 +317,33 @@ export default class SvgExample extends React.Component {
 
 ```jsx
 import * as React from 'react';
+import { ActivityIndicator } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-export default () => (
-  <SvgUri
-    width="100%"
-    height="100%"
-    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
-  />
-);
+export default function TestComponent() {
+  const [loading, setLoading] = useState(true);
+  const onError = (e: Error) => {
+    console.log(e.message);
+    setLoading(false);
+  };
+
+  const onLoad = () => {
+    console.log('Svg loaded!');
+    setLoading(false);
+  };
+
+  if (loading) return <ActivityIndicator />;
+
+  return (
+    <SvgUri
+      width="100%"
+      height="100%"
+      uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
+      onError={onError}
+      onLoad={onLoad}
+    />
+  );
+}
 ```
 
 #### CSS Support

src/index.d.ts

@@ -537,6 +537,8 @@ export interface JsxAST extends AST {
 export interface UriProps extends SvgProps {
   uri: string | null;
   override?: SvgProps;
+  onError?: (error: Error) => void;
+  onLoad?: () => void;
 }
 export type UriState = { xml: string | null };
 
@@ -570,3 +572,11 @@ export const SvgCssUri: React.FunctionComponent<UriProps>;
 export const SvgWithCssUri: React.ComponentClass<UriProps, UriState>;
 
 export const inlineStyles: Middleware;
+
+export type LocalProps = { asset?: string | number; override?: Object };
+export type LocalState = { xml: string | null };
+export function LocalSvg(props: LocalProps): JSX.Element;
+export const WithLocalSvg: React.ComponentClass<LocalProps, LocalState>;
+export const loadLocalRawResource: (
+  source?: string | number | undefined,
+) => Promise<string>;

src/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.10.0
+ * Flowgen v1.11.0
  */
 
 import * as React from "react";
@@ -424,7 +424,7 @@ declare export var Use: React.ComponentClass<UseProps>;
 export type Use = React.ComponentClass<UseProps>;
 declare export var EMaskUnits: {|
   +USER_SPACE_ON_USE: "userSpaceOnUse", // "userSpaceOnUse"
-  +OBJECT_BOUNDING_BOX: "objectBoundingBox" // "objectBoundingBox"
+  +OBJECT_BOUNDING_BOX: "objectBoundingBox", // "objectBoundingBox"
 |};
 export type TMaskUnits =
   | typeof EMaskUnits.USER_SPACE_ON_USE
@@ -444,12 +444,12 @@ declare export var Mask: React.ComponentClass<MaskProps>;
 export type Mask = React.ComponentClass<MaskProps>;
 declare export var MarkerUnits: {|
   +STROKE_WIDTH: "strokeWidth", // "strokeWidth"
-  +USER_SPACE_ON_USE: "userSpaceOnUse" // "userSpaceOnUse"
+  +USER_SPACE_ON_USE: "userSpaceOnUse", // "userSpaceOnUse"
 |};
 
 declare export var Orient: {|
   +AUTO: "auto", // "auto"
-  +AUTO_START_REVERSE: "auto-start-reverse" // "auto-start-reverse"
+  +AUTO_START_REVERSE: "auto-start-reverse", // "auto-start-reverse"
 |};
 export interface MarkerProps {
   id?: string;
@@ -493,6 +493,8 @@ export type JsxAST = {
 export type UriProps = {
   uri: string | null,
   override?: SvgProps,
+  onError?: (error: Error) => void,
+  onLoad?: () => void,
   ...
 } & SvgProps;
 export type UriState = {
@@ -528,3 +530,17 @@ declare export var SvgWithCss: React.ComponentClass<XmlProps, XmlState>;
 declare export var SvgCssUri: React.FunctionComponent<UriProps>;
 declare export var SvgWithCssUri: React.ComponentClass<UriProps, UriState>;
 declare export var inlineStyles: Middleware;
+export type LocalProps = {
+  asset?: string | number,
+  override?: Object,
+  ...
+};
+export type LocalState = {
+  xml: string | null,
+  ...
+};
+declare export function LocalSvg(props: LocalProps): React$Node;
+declare export var WithLocalSvg: React.ComponentClass<LocalProps, LocalState>;
+declare export var loadLocalRawResource: (
+  source?: string | number | void
+) => Promise<string>;

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 = { uri: string | null } & AdditionalProps;
@@ -128,15 +129,20 @@ 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)
+          .then(data => {
+            setXml(data);
+            if (onLoad) {
+              onLoad();
+            }
+          })
           .catch(onError)
       : setXml(null);
-  }, [onError, uri]);
+  }, [onError, uri, onLoad]);
   return <SvgXml xml={xml} override={props} />;
 }