fix(svg): src can be a function/promise/string

Author: farfromrefug

src/ui-svg/index.android.ts

@@ -319,9 +319,10 @@ class MySVGView extends android.view.View {
         if (!svg) {
             return;
         }
-        if (this._blendingMode !== undefined) {
-            const picture = svg.renderToPicture(this.renderOptions);
-        }
+        this.renderOptions.viewPort(0, 0, canvas.getWidth(), canvas.getHeight());
+        // if (this._blendingMode !== undefined) {
+        //     const picture = svg.renderToPicture(this.renderOptions);
+        // }
         svg.renderToCanvas(canvas, this.renderOptions);
     }
     _blendingMode: android.graphics.PorterDuff.Mode;
@@ -399,10 +400,24 @@ export class SVGView extends SVGViewBase {
         }
         return view;
     }
+    async handleSrc(src) {
+        if (src instanceof Promise) {
+            this.handleSrc(await src);
+            return;
+        } else if (typeof src === 'function') {
+            const newSrc = src();
+            if (newSrc instanceof Promise) {
+                await newSrc;
+            }
+            this.handleSrc(newSrc);
+            return;
+        }
+        this.nativeViewProtected.setSvg(getSVG(src));
+    }
 
     [srcProperty.setNative](value) {
+        this.handleSrc(value);
         // this.nativeViewProtected.image = getSVGKImage(value);
-        this.nativeViewProtected.setSvg(getSVG(value));
         // if (this._imageSourceAffectsLayout) {
         //     this._imageSourceAffectsLayout = false;
         //     this.requestLayout();

src/ui-svg/index.common.ts

@@ -61,7 +61,9 @@ export const stretchProperty = new Property<SVGView, Stretch>({ name: 'stretch'
 // export const blendingModeProperty = new Property<SVGView, string>({ name: 'blendingMode' });
 
 @CSSType('SVGView')
-export class SVGView extends View {}
+export class SVGView extends View {
+    src: string;
+}
 srcProperty.register(SVGView);
 stretchProperty.register(SVGView);
 // blendingModeProperty.register(SVGView);

src/ui-svg/index.ios.ts

@@ -55,7 +55,7 @@ function getSVGKImage(src: string | ImageAsset | File) {
     }
     if (Utils.isFileOrResourcePath(imagePath)) {
         if (imagePath.indexOf(Utils.RESOURCE_PREFIX) === 0) {
-            const resName = imagePath.substr(Utils.RESOURCE_PREFIX.length);
+            const resName = imagePath.slice(Utils.RESOURCE_PREFIX.length);
             return SVGKImage.imageNamed(resName);
         } else if (imagePath.indexOf('~/') === 0) {
             const strPath = path.join(knownFolders.currentApp().path, imagePath.replace('~/', ''));
@@ -320,14 +320,29 @@ export class SVGView extends SVGViewBase {
         }
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     }
-    [srcProperty.setNative](value) {
-        this.nativeViewProtected.image = getSVGKImage(value);
+    async handleSrc(src) {
+        if (src instanceof Promise) {
+            this.handleSrc(await src);
+            return;
+        } else if (typeof src === 'function') {
+            const newSrc = src();
+            if (newSrc instanceof Promise) {
+                await newSrc;
+            }
+            this.handleSrc(newSrc);
+            return;
+        }
+        this.nativeViewProtected.image = getSVGKImage(src);
         // this.nativeViewProtected.renderer = getRenderer(value);
         if (this._imageSourceAffectsLayout) {
             this._imageSourceAffectsLayout = false;
             this.requestLayout();
         }
     }
+
+    [srcProperty.setNative](value) {
+        this.handleSrc(value);
+    }
     [stretchProperty.setNative](value: 'none' | 'aspectFill' | 'aspectFit' | 'fill') {
         this.nativeViewProtected.contentMode = getUIImageScaleType(value);
         // switch (value) {