react / react/react-native

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

オープン
#42,132 コメント 6 件 リアクション 2 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: Image Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされている Expo Snack と React Native Image コンポーネントのエントリポイントから始め、resizeMode を repeat に設定してから別の値に変更した場合の GIF の動作を、iOS と Android の両方で再現します。両プラットフォームで GIF が正しくアニメーションし、繰り返し再生され、復旧する一方、JPG と PNG の動作が変わらないことをもって完了とします。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。