React-native: [Image] GIF inside image tag keeps looping

[joshbedo]

Right now i have a gif that i exported to only loop once and stop. This looks fine even when i visit the image online but when i link the image using the Image component the gif keeps looping. Is their any way to stop the gif from looping? I was trying to achieve something similar to this walkthrough where the animation plays once and stops.

[facebook-github-bot]

Hey joshbedo, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[christopherdro]

Just took a quick look and it appears that the loop is controlled here.

[joshbedo]

Is their any prop available on the component itself? or do i have to modify the objective C

[christopherdro]

I don't see any exposed prop at the moment but I could be wrong.
Could you try adjusting the objective c code there and see if that actually changes the loop count?

[joshbedo]

Yep! that worked i changed the line to this

animation.repeatCount = loopCount == 0 ? 0 : loopCount;

[christopherdro]

@joshbedo
This causes the the gif image to disappear after the first loop. Is this happening to you as well?

[joshbedo]

ah yeah thats happening for me too, i thought it was maybe how i exported the gif. I just tried another one i found online and it disappears at the end.

[christopherdro]

I think it makes sense to expose the loop count as a prop for gif images, just not quite sure what's going on with the image disappearing.

cc @nicklockwood

[joshbedo]

Agreed, that would be awesome. Me neither, i'm not too savy with Objective-C unfortunately :(

[fabianeichinger]

Have you tried exporting your GIF as not looping? Does the animation only play once and is the last frame displayed after it is finished?

The animation extension for the GIF format already has fields where you can define if / how many times the animation should loop (see the Application Extension section in this article), which is apparently also used by RCTGIFImageDecoder.m.
I think you can set the number of loops when you export your GIF in most graphic editors.

I think it might make sense to introduce an optional loopCount field to the object we provide as source to the Image component, which overrides whatever loop count is set by the GIF.
More importantly I think Image should match browsers in how it handles GIF playback (number of repetitions, what happens after the last frame, etc) on Android and iOS.

[joshbedo]

Yeah i exported the animation with only one loop, you can see it here and the last frame is displayed after it's finished. Definitely agree, if we could surface loop count some how that would be perfect for scenarios like this.

[machard]

https://github.com/facebook/fresco/issues/401 ?

[sylvainbaronnet]

Any update on this issue ?

[TannerAtVenu]

I would love some resolution on this issue as well.

[machard]

as a workaround, I copy the last frame of the gif multiple times so it gives me time to switch to a static image and remove the gif.

[damusnet]

Is this still an issue?

[damusnet]

@facebook-github-bot label Needs Response from Author

[actonw]

@damusnet this is still an issue, I am experiencing it on RN @ 0.29

[nicolasbrugneaux]

Same here

[benvium]

I have found a solution to the issue of the single-loop GIFs files disappearing after the animation ends:

RCTGIFImageDecoder.m

line 89:

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
    animation.calculationMode = kCAAnimationDiscrete;
    animation.repeatCount = loopCount == 0 ? 0 : loopCount; // <-- fix for single play gif from joshbedo
    animation.keyTimes = keyTimes;
    animation.values = images;
    animation.duration = duration;
    animation.removedOnCompletion = NO;
    animation.fillMode = @"forwards"; // <-- insert this line to prevent the image disappearing after animation
    image.reactKeyframeAnimation = animation;

[benvium]

Android has the exact same issue of looping GIFs that play once in browsers like Chrome, at least in 0.32.0, which I'm currently using.

[tobycox]

I solved my issues by setting the loop count to 1 on the gif, rather than 0. That way it still only plays through once, but it means that the issue that @benvium described doesn't set the loop count to infinite.

I was still running in to the issue where the last frame disappears, but I solved that by having another Image component underlaid with my animating Image component and I just have the source of that image set to a still image of the last frame of the gif.

[benvium]

@tobycox Does that solution work on Android as well, having a loop count of 1?

[tobycox]

@benvium Haven't tried it sorry.

[kiki-le-singe]

Any news about this issue?

Thanks

[ericvicenti]

It sounds like there is a workaround for this right now. Additional functionality here isn't super high-priority, but if anybody knows how to fix it, a PR would be appreciated.

[kmcrawford]

It looks like @benvium fixed the issue on iOS. It would be great if this was part of master so my builds would work and not just on my local.

On Android it is fixed by updating to the latest fresco version.

compile 'com.facebook.fresco:animated-base-support:1.1.0'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-gif:1.1.0'
compile 'com.facebook.fresco:animated-webp:1.1.0'
compile 'com.facebook.fresco:webpsupport:1.1.0'

[deepaksasken]

Issue is still present on RN 0.51, any solid solution ?

[lefoy]

I'm also looking for a solution with RN0.51

[pehlert]

Still seems to happen on iOS, even with a properly exported gif (non-looping) and latest RN. Android appears to work fine for us. Can anyone confirm this? Also @ericvicenti , why has this issue been closed? Did it work for you?

[qamoonsite]

any solution for IOS? it works great on android, but keeps looping on IOS

[harshakocherla]

Any update on this I too have the same issue with IOS.

[benevbright]

Guys, what happens here?
Why this problem is still alive?

[Rojuinex]

It seems like the crux of the issue is that in order to know if you should loop forever or play once you need to know if the gif has the Netscape looping animation extension. From my brief searching it does not seem like this information can be obtained from the kCGImagePropertyGIFDictionary. If the extension is not provided it is set to 0. However a 0 value for the extension means "loop forever".

I'm not quite sure how to tell if the extension is provided without manually parsing over the image data and looking for the extension because it seems none of Apple's APIs provide this info. I don't know if this issue should be reopened or if I should create a new issue. Also note that a loop count of 1 should play twice as per the Netscape spec.