react / react/react-native

<Image /> with GIF renders incorrectly when resizeMode is set to "repeat"

Offen
#42,132 6 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: Image Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

<Image /> cannot render GIF correctly when (Android) or after (iOS) setting resizeMode to "repeat".

The issue on iOS and Android are different:

  1. on iOS,
    1.1. the first issue is GIF cannot animate when resizeMode is set to "repeat"
    1.2. the second issue is <Image /> cannot get out of "repeat" mode after setting resizeMode to it.
  2. on Android, the issue is <Image /> cannot render "repeat" mode correctly -- there GIF will not "repeat", but shrink to top left corner instead

JPG and PNG files don't have any issue.

Steps to reproduce

Setup: create a vanilla React Native app, add a Image component in it. Or try the linked Expo Snack below

  1. try JPG and PNG with various resizeMode value, including "repeat", and observe JPG and PNG are always rendered correctly
  2. try the same with GIF, and observe:
    2.1. on iOS, GIF cannot animate when resizeMode is set to "repeat"
    2.2. on iOS, GIF cannot recover from "repeat" after setting resizeMode to "repeat" and then other value (e.g. "cover")
    2.2. on Android, GIF cannot "repeat", but shrinks to the top left corner instead
React Native Version

0.72.6

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info
N/A
Stacktrace or Logs
N/A
Reproducer

https://snack.expo.dev/@l1m2p3/image-gif-resizemode-bug

Screenshots and Videos

iOS:

https://github.com/facebook/react-native/assets/6405712/9d2795bd-79f1-444e-8815-228db3446855

Android:

https://github.com/facebook/react-native/assets/6405712/ca4e803e-56bc-4f58-9fb6-77bfa03279eb

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem verknüpften Expo Snack und dem Einstiegspunkt der React Native Image-Komponente und reproduziere das GIF-Verhalten sowohl auf iOS als auch auf Android mit auf repeat gesetztem resizeMode und anschließend geändert auf einen anderen Wert. Erledigt ist es, wenn GIFs auf beiden Plattformen korrekt animiert werden, wiederholt werden und sich erholen, während das Verhalten von JPG und PNG unverändert bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.