Image .gif frame timing off-by-one error in iOS

[joepb]

Description

When using the Image component to render a .gif file with non-uniform frame timings, the frame durations are shifted one frame on iOS.

On web and Android, the timings are correct, but iOS is incorrect.

A snack with this gif is provided:

The content of the image is pretty self explanatory. It consists of 6 frames with different duration, as shown in the image:

• 2000ms
• 1000ms
• 500ms
• 100ms
• 100ms
• 100ms

On web and Android, the gif is shown as expected, however on iOS, this is perceived:

• "2000ms" shows for 1000ms
• "1000ms" shows for 500ms
• "500ms" shows for 100ms
• "100ms" shows for 100ms
• "100ms" shows for 100ms
• "100ms" shows for 2000ms

The issue shows both in the snack as on physical devices.

Steps to reproduce

Use an Image with a non-uniformly timed .gif. See snack for repro.

React Native Version

0.74.0

Affected Platforms

Runtime - iOS

Output of npx react-native info

(Repro works in snack so irrelevant.)

> npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Memory: 7.03 GB / 31.65 GB
Binaries:
  Node:
    version: 20.9.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.5.1
    path: ~\AppData\Roaming\npm\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "32"
      - "33"
    Build Tools:
      - 29.0.2
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-30 | Wear OS 3 - Preview Intel x86 Atom
      - android-33 | Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
IDEs:
  Android Studio: AI-212.5712.43.2112.8609683
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.10
    path: /c/Program Files/Eclipse Adoptium/jdk-17.0.10.7-hotspot/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.10
    wanted: 0.72.10
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@joepb/gif-timing-error

Screenshots and Videos

Timing on Android: (correct)

Timing on iOS: (incorrect)

[github-actions]

⚠️	Add or Reformat Version Info
ℹ️	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[joepb]

Amazing fast fix, @zhongwuzw ! Thank you!