React-native: The playback speed of gif images on Image component is too fast

[mk0116]

React Native version:

Steps To Reproduce

1. have gif url on Image component

Describe what you expected to happen:
Simply gif images are too fast on Image component with RN 0.61.2.
It was okay with 0.59.

Snack, code example, screenshot, or link to a repository:

[mk0116]

Just checked it works just fine on 0.60.6
So this must be an issue started from 0.61

[terrysahaidak]

@mk0116 Could you please add reproducing example, it will help a lot to debug and fix that bug.

[mk0116]

@terrysahaidak
It's really simple to reproduce.
Just put a gif http url on Image component and observe on iOS with RN 0.61.
I tested it both on debug and release.
I was not able to successfully launch the android app with 0.61 so I couldn't figure if it doesn't work on android as well.

[chelovekdrakon]

@mk0116 I have the same issue! straggling all day! Did you find any solutions?

@terrysahaidak here is the repro: https://github.com/chelovekdrakon/lottie-issue/tree/image-gif

I've started not from it , but from .
Their animations are also going crazy after the upgrade of react-native.
Here is the repro: https://github.com/chelovekdrakon/lottie-issue/tree/lottie-animation

Looking forward to updates!

[mk0116]

@chelovekdrakon
I figured that the code for animating gif images has changed since 0.61.0
I guess the bug was made in this commit.

https://github.com/facebook/react-native/commit/3b67bfab1ed8f2a4cede4e58b41a8b11c63ab484#diff-e57b12f931820d7e0949e5cbb2701dcf

[WdBly]

same problem

[dingdongping]

same problem,How to solve

[octodhruv]

GIFs used with the Image component are now playing at double speed after our RN upgrade from .59 to .61 -> it seems like the logic for playing GIFs was updated. Are there any temporary workarounds to fix this, or can we leverage any external libraries to solve this problem?

[ericlewis]

There is a good chance this is caused by the component not replicating behavior from browsers. Currently, it relies on the GIF providing proper frame length data, but if the GIF doesn’t have that then it will appear to run quite quickly. The solution for this is to typically hack in a 100ms wait to the animation code which is similar to what Firefox does, for instance.

[surajj2223]

Facing the same issue on RN 0.61.5. Any updates ?

[sumanthyedoti]

Gifs are not being played. Any setting I have to do in build.gradle. Please help.

[mk0116]

@y-sumanth You have to add these lines in build.gradle
implementation 'com.facebook.fresco:fresco:1.12.0'
implementation 'com.facebook.fresco:animated-gif:1.12.0'

[mk0116]

I found a workaround for ios.
The problem is that the prop named 'kCGImagePropertyGIFUnclampedDelayTime' of the gif images have an empty value so that the delay is set as 0.

workaround:

Open RCTAnimatedImage.m and change this line
(https://github.com/facebook/react-native/blob/f3d37325cbeb25db2aae2f5aa7b37de7b8a06f82/Libraries/Image/RCTAnimatedImage.m#L110)

to
if (delayTimeUnclampedProp != nil && [delayTimeUnclampedProp floatValue] != 0) {

I'll make a PR when I get a chance.

@chelovekdrakon hope this helps you fix your problem too

you have to upgrade com.facebook.fresco:animated-gif to 2.2.0 for android
implementation 'com.facebook.fresco:animated-gif:2.0.0'

[FrederickEngelhardt]

Has this been fixed on iOS? Still experiencing the bug as of 0.62 on iOS.

[ericlewis]

If I can find the time this weekend I will put in the proper fix.

[jpaulomotta]

I'm experiencing the same issue on iOS as of 0.61 with Expo v37.0.0

[mouhanad-alaskari]

Same problem on IOS , any updates ?

[mk0116]

Closing this issue since it's fixed on 0.62.2