react / react/react-native

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

Open
#42,132 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Image Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Expo Snack and the React Native Image component entry point, reproducing the GIF behavior on both iOS and Android with resizeMode set to repeat and then changed to another value. Done means GIFs animate, repeat, and recover correctly while JPG and PNG behavior remains unchanged on both platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.