This plugin is extremely slow!

[kwameboateng]

Is it built to cope with Gif of a 500 frame size?

My gif is meant to run for 15 seconds but the plugin slows it down and it goes past even 20secs!

I know it's plugin related because i tried tns-ng-gif and it appears a much lighter plugin hence was greatly timed.

Please advise or improve. Thanks much

[bradmartin]

Not really sure on the 500 frame size related to gif. Not my specialty.

The other plugin uses different native android/ios implementations so that would explain the differences. I've used this one in many productions apps with no issues, so I would guess a combination of the native implementation in this plugin along with a gif like you mentioned is an issue. I'd suggest using the other plugin if it's working well for your needs though 😄

[kwameboateng]

Thanks for the response, I’m sticking with you guys due to the isPlaying function.

But I just called it on ios and it throws this error:

ERROR TypeError: this.nativeView.animatedImage.isAnimating is not a function. (In 'this.nativeView.animatedImage.isAnimating()', 'this.nativeView.animatedImage.isAnimating' is undefined) CONSOLE ERROR [native code]

This is the code in JS file, and I have attached the JS file

Gif.prototype.isPlaying = function () { var isPlaying = this.nativeView.animatedImage.isAnimating(); return isPlaying;

Could you help or advise on this at all? Can’t see any reason why it shouldn’t work

[kwameboateng]

here's the js file code

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var file_system_1 = require("tns-core-modules/file-system");
var gif_common_1 = require("./gif.common");
var style_properties_1 = require("tns-core-modules/ui/styling/style-properties");
var Gif = (function (_super) {
    __extends(Gif, _super);
    function Gif() {
        var _this = _super.call(this) || this;
        _this.nativeView = FLAnimatedImageView.alloc().initWithFrame(CGRectMake(0, 0, 100, 100));
        _this.nativeView.clipsToBounds = true;
        _this._headers = null;
        _this._src = null;
        return _this;
    }
    Gif.prototype[gif_common_1.headersProperty.setNative] = function (value) {
        this._setHeader(value ? value : null);
    };
    Gif.prototype[gif_common_1.srcProperty.setNative] = function (value) {
        this._setSrcProperty(value);
    };
    Gif.prototype._setSrcProperty = function (value) {
        if (value) {
            var isUrl = false;
            if (value.indexOf('://') !== -1) {
                if (value.indexOf('res://') === -1) {
                    isUrl = true;
                }
            }
            this._src = value;
            if (!isUrl) {
                var currentPath = file_system_1.knownFolders.currentApp().path;
                if (value[1] === '/' && (value[0] === '.' || value[0] === '~')) {
                    value = value.substr(2);
                }
                if (value[0] !== '/') {
                    value = currentPath + '/' + value;
                }
                this._animatedImage = FLAnimatedImage.animatedImageWithGIFData(NSData.dataWithContentsOfFile(NSString.stringWithString(value)));
                this._setImage();
            }
            else {
                if (this._headers) {
                    this._useAnimatedImageFromUrl(value, this._headers);
                }
                else {
                    this._useAnimatedImageFromUrl(value);
                }
            }
        }
        else {
            console.log('No src value detected.');
        }
    };
    Gif.prototype.stop = function () {
        this.nativeView.stopAnimating();
    };
    Gif.prototype.start = function () {
        this.nativeView.startAnimating();
    };
    Gif.prototype.isPlaying = function () {
        var isPlaying = this.nativeView.animatedImage.isAnimating();
        return isPlaying;
    };
    Gif.prototype.getFrameCount = function () {
        var frames = this.nativeView.animatedImage.frameCount;
        return frames;
    };
    Gif.prototype._useAnimatedImageFromUrl = function (url, headers) {
        var _this = this;
        var nsUrl = NSURL.URLWithString(url);
        if (headers) {
            var request = NSMutableURLRequest.requestWithURL(nsUrl);
            for (var property in headers) {
                if (headers.hasOwnProperty(property)) {
                    console.log('headers: ' + property + ', value: ' + headers[property]);
                    request.addValueForHTTPHeaderField(headers[property], property);
                }
            }
            request.HTTPMethod = 'GET';
            var session = NSURLSession.sharedSession;
            var task = session.dataTaskWithRequestCompletionHandler(request, function (data, response, err) {
                if (err) {
                    console.log('Error loading Gif: ' + err.localizedDescription);
                }
                else {
                    _this._animatedImage = FLAnimatedImage.animatedImageWithGIFData(data);
                    _this._setImage();
                }
            });
            task.resume();
        }
        else {
            var data = NSData.dataWithContentsOfURL(nsUrl);
            console.log('data', data);
            this._animatedImage = FLAnimatedImage.animatedImageWithGIFData(data);
            console.log('animatedImage', this._animatedImage);
            this._setImage();
        }
    };
    Gif.prototype._setImage = function () {
        try {
            this.nativeView.animatedImage = this._animatedImage;
            this.nativeView.frame = CGRectMake(0, 0, 100, 100);
        }
        catch (ex) {
            console.log(ex);
        }
        if (isNaN(style_properties_1.PercentLength.toDevicePixels(this.width)) || isNaN(style_properties_1.PercentLength.toDevicePixels(this.height))) {
            this.requestLayout();
        }
    };
    Gif.prototype._setHeader = function (headers) {
        if (headers) {
            this._headers = headers;
            if (this._src && this._src.length > 0) {
                this._setSrcProperty(this._src);
            }
        }
        else {
            this._headers = null;
        }
    };
    return Gif;
}(gif_common_1.GifCommon));
exports.Gif = Gif;
//# sourceMappingURL=gif.ios.js.map

[bradmartin]

That could be a timing related issue, are you accessing this early during your page/component life cycle?

[kwameboateng]

i access it when i call a the isPlaying function whe a button is clicked. So that's way past the earlier stages

[kwameboateng]

works perfect on android but not ios

[bachras]

@kwameboateng did you managed to solve the problem? As I am having exactly same issue, it is extremely slow on iOS and block UI, and on Android is works flawlessly. Thanks

[meysam-mahmoodi]

I have the same problem here, its so slow on iOS. @bradmartin any update? @bachras have you solved the problem yet?

[bradmartin]

Unfortunately I don't. I use it in a few apps and haven't seen any issue. Sorry. If someone can provide sample apps I could maybe help identify the issue. Anything on the native side is likely going to need to fork or check the library we are wrapping to see if iOS can be improved for the scenarios everyone is having trouble with.

[romandrahan]

Using this technique helped to resolve the issue with iOS for me:

pod 'Animated-Gif-iOS'

<Image
  src="~/path-to-gif-image.gif"
  @loaded="imageLoaded"
/>

import { knownFolders, path } from 'tns-core-modules/file-system'

imageLoaded (args) {
  const image = args.object
  const gifPath = path.join(knownFolders.currentApp().path, image.src.replace('~/', ''))
  const gifNsData = NSData.dataWithContentsOfFile(gifPath)
  const gif = AnimatedGif.getAnimationForGifWithData(gifNsData)

  image.ios.setAnimatedGifStartImmediately(gif, true)
}

Credits goes to https://github.com/bdauria/tns-ng-gif