search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.75k stars 24.29k forks source link

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

Closed joepb closed 4 months ago

joepb commented 5 months ago

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: timing

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

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

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) Gif timing android

Timing on iOS: (incorrect) Gif timing ios

github-actions[bot] commented 5 months ago
:warning: Add or Reformat Version Info
:information_source: 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 commented 5 months ago

Amazing fast fix, @zhongwuzw ! Thank you!