search

facebook / react-native

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

GIF images not working after upgrade from React-Native 0.74.3 -> 0.75.1 #46095

Closed coderBeat closed 2 months ago

coderBeat commented 2 months ago

Description

Running GIF image on android with React-Native 0.75.1 is not possible. I added the fresco:animated-gif library reference in android/app/build.gradle, but it isn't working, only static image is been displayed.

Steps to reproduce

  1. Upgrade from react-native 0.74.3 -> 0.75.1 using upgrade helper.
  2. Added implementation 'com.facebook.fresco:animated-gif:3.1.3' to android/app/build.gradle .
  3. Used a GIF image link in project: 
                              <Image
                            source={{uri: 'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemp5Y2UxNXB2aHF0bnhhbm5lMGFrOTNidGJpaXZjbG16anNhMmh0biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/9zn5QnaEZuDlXtGAPZ/giphy.gif'}}
                            style={{width: 500, height:700 }}
                          />
  4. Image not running GIF, only static.

React Native Version

0.75.1

Affected Platforms

Runtime - Android

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 13.5.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 744.81 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: ~/.nvm/versions/node/v20.9.0/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.1.0
    path: ~/.nvm/versions/node/v20.9.0/bin/npm
  Watchman:
    version: 2023.07.24.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "25"
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 30.0.3
      - 31.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-29 | Google Play Intel x86 Atom
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.1
    wanted: 0.75.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No crash

Reproducer

https://github.com/react-native-community/reproducer-react-native

Screenshots and Videos

Screenshot_1724063062

react-native-bot commented 2 months ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
react-native-bot commented 2 months ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
cortinico commented 2 months ago

react-native-community/reproducer-react-native

@coderBeat please provide a valid reproducer with the repo you linked: https://github.com/react-native-community/reproducer-react-native

We can look into it afterwards

coderBeat commented 2 months ago

I got it, the issue was occurring because I was using the old fresco library, which was not compatible with react-native 0.75.

I copied the fresco library link from the following link: https://reactnative.dev/docs/next/image

implementation 'com.facebook.fresco:animated-gif:3.1.0'

When I switched to the latest version, it worked: implementation 'com.facebook.fresco:animated-gif:3.2.0'

cortinico commented 2 months ago

I copied the fresco library link from the following link: reactnative.dev/docs/next/image

Awesome, are you up for updating the documentation?