<Image /> with GIF renders incorrectly when resizeMode is set to "repeat"
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
Description
<Image /> cannot render GIF correctly when (Android) or after (iOS) setting resizeMode to "repeat".
The issue on iOS and Android are different:
- on iOS,
1.1. the first issue is GIF cannot animate whenresizeModeis set to"repeat"
1.2. the second issue is<Image />cannot get out of"repeat"mode after settingresizeModeto it. - 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
- try JPG and PNG with various resizeMode value, including "repeat", and observe JPG and PNG are always rendered correctly
- try the same with GIF, and observe:
2.1. on iOS, GIF cannot animate whenresizeModeis set to "repeat"
2.2. on iOS, GIF cannot recover from "repeat" after settingresizeModeto "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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par le Expo Snack lié et le point d’entrée du composant React Native Image, en reproduisant le comportement des GIF sur iOS et Android avec resizeMode défini sur repeat, puis modifié pour prendre une autre valeur. C’est terminé lorsque les GIF s’animent, se répètent et récupèrent correctement, tandis que le comportement des JPG et PNG reste inchangé sur les deux plateformes.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100