fix(ios): fixed transforms not being applied. New animatedImageView property to be set when using animated images

Author: farfromrefug

plugin/platforms/ios/src/NImage.h

@@ -4,3 +4,4 @@
 
 #import "NSImageRoundCornerTransformer.h"
 #import "NSImageDecodeSizeTransformer.h"
+#import "NSImageRoundAsCircleTransformer.h"

plugin/platforms/ios/src/NSImageRoundAsCircleTransformer.h

@@ -0,0 +1,8 @@
+#import <SDWebImage/SDImageTransformer.h>
+
+@interface NSImageRoundAsCircleTransformer: NSObject <SDImageTransformer>
+
+- (nonnull instancetype)init NS_UNAVAILABLE;
++ (nonnull instancetype)transformer;
+
+@end

plugin/platforms/ios/src/NSImageRoundAsCircleTransformer.m

@@ -0,0 +1,40 @@
+#import "NSImageRoundAsCircleTransformer.h"
+#import <SDWebImage/SDGraphicsImageRenderer.h>
+
+@interface NSImageRoundAsCircleTransformer ()
+
+@end
+
+@implementation NSImageRoundAsCircleTransformer
++ (instancetype)transformer {
+
+    NSImageRoundAsCircleTransformer *transformer = [NSImageRoundAsCircleTransformer new];
+    return transformer;
+}
+
+- (NSString *)transformerKey {
+    return [NSString stringWithFormat:@"NSImageRoundAsCircleTransformer"];
+}
+
+- (UIImage *)transformedImageWithImage:(UIImage *)image forKey:(NSString *)key {
+    if (!image) {
+        return nil;
+    }
+
+    CGFloat width = (CGFloat)image.size.width;
+    CGFloat height = (CGFloat)image.size.height;
+    CGFloat minwidth = MIN(width, height);
+    CGFloat cornerRadius = minwidth / 2;
+
+    UIImage * resultImage = [image sd_resizedImageWithSize:CGSizeMake(minwidth, minwidth) scaleMode:SDImageScaleModeAspectFill];
+    resultImage = [resultImage sd_roundedCornerImageWithRadius:cornerRadius corners:UIRectCornerAllCorners borderWidth:0 borderColor:nil];
+    return resultImage;
+    //     const result = (image as any)
+    //         .sd_resizedImageWithSizeScaleMode(CGSizeMake(minwidth, minwidth), SDImageScaleMode.AspectFill)
+    //         .sd_roundedCornerImageWithRadiusCornersBorderWidthBorderColor(cornerRadius, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, 0, null)
+    //         .sd_resizedImageWithSizeScaleMode(CGSizeMake(width, height), SDImageScaleMode.AspectFit);
+    //     return result;
+    // return resultImage;
+}
+
+@end

src/image-common.ts

@@ -113,6 +113,7 @@ export class ImageBase extends View {
     public aspectRatio: number;
     public decodeWidth: number;
     public decodeHeight: number;
+    public animatedImageView: boolean;
     alwaysFade: boolean;
     noCache: boolean;
     // fade: boolean;
@@ -151,6 +152,7 @@ export class ImageBase extends View {
 
 
     public static clipToBoundsProperty = new Property<ImageBase, boolean>({ name: 'clipToBounds', defaultValue: true, valueConverter: booleanConverter});
+    public static animatedImageViewProperty = new Property<ImageBase, boolean>({ name: 'animatedImageView', defaultValue: false, valueConverter: booleanConverter});
     // public static blendingModeProperty = new Property<ImageBase, string>({ name: 'blendingMode' });
 
     protected handleImageProgress(value: number, totalSize?: number) {}
@@ -255,5 +257,6 @@ ImageBase.decodeHeightProperty.register(ImageBase);
 ImageBase.alwaysFadeProperty.register(ImageBase);
 ImageBase.noCacheProperty.register(ImageBase);
 ImageBase.clipToBoundsProperty.register(ImageBase);
+ImageBase.animatedImageViewProperty.register(ImageBase);
 
 // ImageBase.blendingModeProperty.register(ImageBase);

src/image.d.ts

@@ -194,6 +194,11 @@ export class Img extends View {
      * Number value used as the resized image height
      */
     decodeHeight: number;
+
+    /**
+     * IOS: if you want to show animated images you need to set this to true
+     */
+    animatedImageView: boolean;
 }
 
 /**

src/image.ios.ts

@@ -4,36 +4,6 @@ import { isString } from '@nativescript/core/utils/types';
 import { RESOURCE_PREFIX, isFileOrResourcePath, isFontIconURI, layout } from '@nativescript/core/utils/utils';
 import { CLog, CLogTypes, EventData, ImageBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting, ScaleType, Stretch } from './image-common';
 
-@NativeClass
-class SDImageRoundAsCircleTransformer extends NSObject implements SDImageTransformer {
-    public static ObjCProtocols = [SDImageTransformer];
-
-    static transformer() {
-        const transformer = SDImageRoundAsCircleTransformer.alloc().init();
-
-        return transformer;
-    }
-
-    get transformerKey() {
-        return 'SDImageRoundAsCircleTransformer';
-    }
-
-    transformedImageWithImageForKey(image: UIImage, key: string) {
-        if (!image) {
-            return null;
-        }
-        const width = image.size.width;
-        const height = image.size.height;
-        const minwidth = Math.min(width, height);
-        const cornerRadius = minwidth / 2;
-        const result = (image as any)
-            .sd_resizedImageWithSizeScaleMode(CGSizeMake(minwidth, minwidth), SDImageScaleMode.AspectFill)
-            .sd_roundedCornerImageWithRadiusCornersBorderWidthBorderColor(cornerRadius, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, 0, null)
-            .sd_resizedImageWithSizeScaleMode(CGSizeMake(width, height), SDImageScaleMode.AspectFit);
-        return result;
-    }
-}
-
 export class ImageInfo implements ImageInfoBase {
     constructor(private width: number, private height: number) {}
 
@@ -219,11 +189,11 @@ function getUri(src: string | ImageAsset) {
 }
 
 export class Img extends ImageBase {
-    nativeViewProtected: SDAnimatedImageView;
+    nativeViewProtected: SDAnimatedImageView | UIImageView;
     isLoading = false;
     private _imageSourceAffectsLayout: boolean = true;
     public createNativeView() {
-        const result = SDAnimatedImageView.new();
+        const result = this.animatedImageView? SDAnimatedImageView.new() :  UIImageView.new();
         result.contentMode = UIViewContentMode.ScaleAspectFit;
         result.clipsToBounds = true;
         result.userInteractionEnabled = true; // needed for gestures to work
@@ -420,6 +390,7 @@ export class Img extends ImageBase {
                 }
                 this.isLoading = true;
                 let options = SDWebImageOptions.ScaleDownLargeImages | SDWebImageOptions.AvoidAutoSetImage;
+
                 if (this.alwaysFade === true) {
                     options |= SDWebImageOptions.ForceTransition;
                 }
@@ -438,8 +409,10 @@ export class Img extends ImageBase {
                 if (this.blurRadius) {
                     transformers.push(SDImageBlurTransformer.transformerWithRadius(this.blurRadius));
                 }
+                console.log('roundAsCircle', this.roundAsCircle, this.style['roundAsCircle']);
                 if (this.roundAsCircle === true) {
-                    transformers.push(SDImageRoundAsCircleTransformer.new());
+                    //@ts-ignore
+                    transformers.push(NSImageRoundAsCircleTransformer.transformer());
                 }
                 if (this.roundBottomLeftRadius || this.roundBottomRightRadius || this.roundTopLeftRadius || this.roundTopRightRadius) {
                     //@ts-ignore
@@ -450,6 +423,10 @@ export class Img extends ImageBase {
                         layout.toDeviceIndependentPixels(this.roundBottomLeftRadius)));
                 }
                 if (transformers.length > 0) {
+                    if (this.animatedImageView) {
+                        // as we use SDAnimatedImageView  all images are loaded as SDAnimatedImage;
+                        options |= SDWebImageOptions.TransformAnimatedImage;
+                    }
                     context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
                 }
                 this.nativeViewProtected.sd_setImageWithURLPlaceholderImageOptionsContextProgressCompleted(