React-native: Animated gif loops stops after playing once on ios hardware only

Created on 14 Jan 2019  路  7Comments  路  Source: facebook/react-native

Environment

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 10.25 GB / 32.00 GB
Shell: 3.0.0 - /usr/local/bin/fish
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 26.0.0, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.2, 28.0.3
System Images: android-16 | Google APIs Intel x86 Atom, android-17 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8

Description

This is a regression. There are several auto closed issues related to this (https://github.com/facebook/react-native/issues/22959, https://github.com/facebook/react-native/issues/22788)
On a real device animated gifs will play once and stop. Previously they used to loop forever correctly. Strangely they loop forever in the simulator.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

Just load an image and source an animated gif.

Animated Bug iOS Locked

Most helpful comment

All 7 comments

This fix is in the latest release, right?
Still happening here @chrisnojima

Code snippet:

<Image source={{ uri: 'https://media.giphy.com/media/xHMIDAy1qkzNS/giphy.gif'}} style={{width: 100, height: 100 }} resizeMode='cover' />

It should be in 58.4 but I'm still running a fork

Nevermind, working here.
Thanks for this contribution.

It acutally keep looping but I only need it to play once, how to achieve this, since nothing mention it on the documentation ?

I solved this problem by using react-native-fast-image. I uploaded my gif to server, and saved the url address, then passed it as a uri to a FastImage Component in my project, it worked!

I set my GIF file to play in a loop (set loop count to infinity here). it worked for me ~

Was this page helpful?
0 / 5 - 0 ratings