react / react/react-native

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

Abierto
#42,132 6 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: Image Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el Expo Snack vinculado y el punto de entrada del componente React Native Image, reproduciendo el comportamiento de los GIF tanto en iOS como en Android con resizeMode establecido en repeat y después cambiado a otro valor. Se considera terminado cuando los GIF se animan, se repiten y se recuperan correctamente, mientras que el comportamiento de JPG y PNG permanece sin cambios en ambas plataformas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.