feat(image): add progress indicator for ios

Author: Logikgate

demo-snippets/vue/Simple.vue

@@ -6,7 +6,7 @@
 
         <GridLayout rows="300, auto, auto, auto, auto, auto">
             <StackLayout orientation="horizontal">
-                <NSImg  backgroundColor="yellow" height="500" ref="opacityImg" borderRadius="10" width="50%" src="~/assets/images/dessert.jpg" stretch="aspectFit" />
+                <NSImg :showProgressBar="true" progressBarColor="green" backgroundColor="yellow" height="500" ref="opacityImg" borderRadius="10" width="50%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/500px-2ChocolateChipCookies.jpg" stretch="aspectFit" />
                 <NSImg backgroundColor="red" width="50%" height="100" verticalAlignment="center" borderRadius="100" :src="imgSource"> </NSImg>
             </StackLayout>
             <WrapLayout row="1">

packages/image/README.md

@@ -448,15 +448,15 @@ Boolean value used for enabling or disabling the streaming of progressive JPEG i
 <@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
 ```
 
-- **showProgressBar**  (Android only)
+- **showProgressBar**
 
 Boolean value used for showing or hiding the progress bar.
 
 ```xml
 <@nativescript-community/ui-image:Img showProgressBar="true"/>
 ```
 
-- **progressBarColor**  (Android only)
+- **progressBarColor**
 
 String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
 

packages/image/blueprint.md

@@ -381,15 +381,15 @@ Boolean value used for enabling or disabling the streaming of progressive JPEG i
 <@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
 ```
 
-- **showProgressBar**  (Android only)
+- **showProgressBar**
 
 Boolean value used for showing or hiding the progress bar.
 
 ```xml
 <@nativescript-community/ui-image:Img showProgressBar="true"/>
 ```
 
-- **progressBarColor**  (Android only)
+- **progressBarColor**
 
 String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
 

src/image/index.ios.ts

@@ -1,5 +1,5 @@
 export * from './index-common';
-import { ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { Color, ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
 import { layout } from '@nativescript/core/utils/layout-helper';
 import { isString } from '@nativescript/core/utils/types';
 import {
@@ -15,6 +15,8 @@ import {
     failureImageUriProperty,
     imageRotationProperty,
     placeholderImageUriProperty,
+    progressBarColorProperty,
+    showProgressBarProperty,
     srcProperty,
     stretchProperty,
     wrapNativeException
@@ -521,6 +523,21 @@ export class Img extends ImageBase {
                     });
                 }
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
+                if (this.showProgressBar) {
+                    try{
+                        if (this.progressBarColor && Color.isValid(this.progressBarColor)) {
+                            const indicator = new SDWebImageActivityIndicator();
+                            indicator.indicatorView.color = new Color(this.progressBarColor).ios;
+                            this.nativeImageViewProtected.sd_imageIndicator = indicator;
+                        } else {
+                            this.nativeImageViewProtected.sd_imageIndicator = SDWebImageActivityIndicator.grayIndicator;
+                        }
+                    }
+                    catch(ex) {
+                        console.error(ex)
+                    }
+                }
+
                 this.nativeImageViewProtected.sd_setImageWithURLPlaceholderImageOptionsContextProgressCompleted(
                     uri,
                     this.placeholderImage,
@@ -551,6 +568,22 @@ export class Img extends ImageBase {
         // this.initImage();
     }
 
+    [showProgressBarProperty.getDefault](): boolean {
+        return false;
+    }
+
+    [showProgressBarProperty.setNative](value) {
+        this.showProgressBar = value;
+    }
+
+    [progressBarColorProperty.getDefault](): string {
+        return "";
+    }
+
+    [progressBarColorProperty.setNative](value) {
+        this.progressBarColor = value;
+    }
+
     [failureImageUriProperty.setNative]() {
         // this.updateHierarchy();
     }

src/image/typings/ios.d.ts

@@ -6,6 +6,8 @@ declare namespace NSURL {
     export function sd_URLWithAssetLocalIdentifier(identifier: string): NSURL;
 }
 declare interface UIImageView {
+    sd_imageIndicator: SDWebImageIndicator;
+
     sd_setHighlightedImageWithURL(url: NSURL): void;
 
     sd_setHighlightedImageWithURLCompleted(url: NSURL, completedBlock: (p1: UIImage, p2: NSError, p3: SDImageCacheType, p4: NSURL) => void): void;