search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.24k stars 24.22k forks source link

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

Open l1m2p3 opened 8 months ago

l1m2p3 commented 8 months ago

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

github-actions[bot] commented 8 months ago
:warning: Newer Version of React Native is Available!
:information_source: You are on a supported minor version, but it looks like there's a newer patch available - 0.72.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.
cortinico commented 8 months ago

Can we try if this still happens on 0.73?

l1m2p3 commented 8 months ago

Can we try if this still happens on 0.73?

Yeah. I updated RN and Expo to use RN v0.73.1, but both iOS and Android can still repro the issue.

gyhyfj commented 6 months ago

on android, .gif cannot play in 0.73.6 no matter how resizeMode is.

l1m2p3 commented 3 months ago

on android, .gif cannot play in 0.73.6 no matter how resizeMode is.

That could be a different issue. See if you missed this in your Android project's .gradle file? https://reactnative.dev/docs/0.73/image#gif-and-webp-support-on-android

neeraj500 commented 3 months ago

on android, .gif cannot play in 0.73.6 no matter how resizeMode is.

yes, gif is not working on 0.73.6