React Native 0.57.0 Android For animated GIF support #21216

laznrbfe · 2018-09-20T09:26:25Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
- ~~react-native issues-20242~~
- ~~react-native issues-20251~~
- ~~react-native issues-20323~~
- ~~SoLoader issues-13~~
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 34.46 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
      Yarn: 1.9.4 - ~/.nvm/versions/node/v8.11.3/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 2.3 AI-162.4069837
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.0 => 0.57.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

java.lang.NoSuchMethodError: No static method loadLibrary(Ljava/lang/String;)V in class Lcom/facebook/soloader/SoLoader; or its super classes (declaration of 'com.facebook.soloader.SoLoader' appears in /data/app/com.ucacc.trade.test-2/base.apk)
        at com.facebook.animated.gif.GifImage.ensure(GifImage.java:42)
        at com.facebook.animated.gif.GifImage.create(GifImage.java:64)
        at com.facebook.animated.gif.GifImage.decode(GifImage.java:71)
        at com.facebook.imagepipeline.animated.factory.AnimatedImageFactoryImpl.decodeGif(AnimatedImageFactoryImpl.java:83)
        at com.facebook.fresco.animation.factory.AnimatedFactoryV2Impl$1.decode(AnimatedFactoryV2Impl.java:86)
        at com.facebook.imagepipeline.decoder.DefaultImageDecoder.decodeGif(DefaultImageDecoder.java:134)
        at com.facebook.imagepipeline.decoder.DefaultImageDecoder$1.decode(DefaultImageDecoder.java:58)
        at com.facebook.imagepipeline.decoder.DefaultImageDecoder.decode(DefaultImageDecoder.java:119)
        at com.facebook.imagepipeline.producers.DecodeProducer$ProgressiveDecoder.doDecode(DecodeProducer.java:248)
        at com.facebook.imagepipeline.producers.DecodeProducer$ProgressiveDecoder.access$200(DecodeProducer.java:109)
        at com.facebook.imagepipeline.producers.DecodeProducer$ProgressiveDecoder$1.run(DecodeProducer.java:146)
        at com.facebook.imagepipeline.producers.JobScheduler.doJob(JobScheduler.java:202)
        at com.facebook.imagepipeline.producers.JobScheduler.access$000(JobScheduler.java:22)
        at com.facebook.imagepipeline.producers.JobScheduler$1.run(JobScheduler.java:73)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
        at com.facebook.imagepipeline.core.PriorityThreadFactory$1.run(PriorityThreadFactory.java:51)
        at java.lang.Thread.run(Thread.java:818)

Reproducible Demo

gif-and-webp-support-on-android

    // For animated GIF support
    implementation 'com.facebook.fresco:animated-gif:1.9.0'
    // For WebP support, including animated WebP
    implementation 'com.facebook.fresco:animated-webp:1.9.0'
    implementation 'com.facebook.fresco:webpsupport:1.9.0'

My React Native Project Demo

The text was updated successfully, but these errors were encountered:

punksta · 2018-09-20T10:13:52Z

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

helped me.

laznrbfe · 2018-09-20T11:08:02Z

@punksta Thanks. It works.

charpeni · 2018-09-25T19:37:11Z

You don't have to add fresco dependency as React Native already provide it.

The issue was a desync between bundled fresco (bumped to 1.10.0) and the documentation.

The proper solution for RN 0.57 would be to add these optional modules depending on the needs of your app:

  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.10.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.10.0'
  compile 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.10.0'

As reflected in the updated documentation: https://facebook.github.io/react-native/docs/image#gif-and-webp-support-on-android

a6051529 · 2018-11-30T03:04:36Z

问题的根源在于React-Native源码的build.gradle，如果你RN源码里面fresco的版本刚好是com.facebook.fresco:fresco:1.10.0，那么 @charpeni 的方法是适用的。

但是比如我：我的版本是com.facebook.fresco:fresco:1.3.0，那么你需要在你项目中的build.gradle的版本号改成1.3.0，像下面这样：

// If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.3.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'

但是这一部分在官方文档中貌似并未说明？

jasperkuperus · 2018-12-18T11:03:49Z

@charpeni The package com.facebook.fresco:animated-base-support:1.10.0 seems to be still at version 1.3.0 if you check the repositories:

https://mvnrepository.com/artifact/com.facebook.fresco/animated-base-support

Keeping this version on 1.3.0 and animated-gif@1.10.0 seems to work for me on 0.57.7. So the following line in the documentation might need to be adjusted:

  compile 'com.facebook.fresco:animated-base-support:1.10.0'

AngelVenchev · 2019-02-01T14:54:05Z

For anyone interested I had to update to com.facebook.fresco:animated-gif:1.11.0 for this to work with react-native 0.58.3

badpenguin · 2019-02-04T15:45:49Z

In 0.58.3 i solved by getting rid of animated-base-support and for PNG+GIF i used:

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

otherwise i was getting blank images.
Perhaps the official doc is out of date?

edgargrs · 2019-02-10T21:18:36Z

In 0.58.3 i solved this line:
implementation 'com.facebook.fresco:animated-base-support:1.10.0
for this:
implementation 'com.facebook.fresco:animated-base-support:1.3.0

thanks ! @jasperkuperus

lchenfox · 2019-03-19T03:22:04Z

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

helped me.

It works for me. Thank you so much

kazartsevalex · 2019-04-10T12:57:15Z

In 0.58.3 i solved this line:
implementation 'com.facebook.fresco:animated-base-support:1.10.0
for this:
implementation 'com.facebook.fresco:animated-base-support:1.3.0

thanks ! @jasperkuperus

Well this helped to make a build for Android 7, but gif is still showing only 1st frame :(

UPD:
Fixed this with
implementation 'com.facebook.fresco:animated-base-support:1.3.0'
implementation 'com.facebook.fresco:animated-gif:1.10.0'

nppull · 2019-06-17T09:06:03Z

RN 0.59.9 works for me

implementation 'com.facebook.fresco:animated-base-support:1.3.0'
implementation 'com.facebook.fresco:animated-gif:1.10.0'

aibrahim3546 · 2019-07-09T01:47:26Z

RN 0.59.9 works for me

implementation 'com.facebook.fresco:animated-base-support:1.3.0'
implementation 'com.facebook.fresco:animated-gif:1.10.0'

Where do i place this in my folder? @nppull

paingha · 2019-07-09T22:24:20Z

@aibrahim3546 In the android/app/build.gradle file in the
dependencies { implementation 'com.facebook.fresco:animated-base-support:1.3.0' implementation 'com.facebook.fresco:animated-gif:1.10.0' implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" implementation "com.facebook.react:react-native:+" // From node_modules }

praveens96 · 2019-07-12T09:06:26Z

not working in rn v0.60.3

oregano1201 · 2019-07-13T19:35:52Z

Hi you can try the following on RN v0.60.0. This works for me.

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

mayupat13 · 2019-07-18T07:11:24Z

Thanks Its works for RN v0.60.0 & v0.60.X

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

shabeer3508 · 2019-08-01T13:23:30Z

Hi you can try the following on RN v0.60.0. This works for me.
implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

worked for react native 0.60.4, thanks

laznrbfe changed the title ~~About Android <Image/> support gif~~ React Native 0.57.0 Android For animated GIF support Sep 20, 2018

react-native-bot added Platform: Android Android applications. API: Animated labels Sep 20, 2018

laznrbfe closed this as completed Sep 20, 2018

bryant-wang mentioned this issue Jan 15, 2019

显示加载层时，IOS端图片是动图，到了安卓端loading图片就成静态了 openUmbrella/react-native-root-tips#9

Open

charpeni mentioned this issue Feb 11, 2019

GIF and WebP support on Android is outdated facebook/react-native-website#785

Closed

facebook locked as resolved and limited conversation to collaborators Sep 20, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native 0.57.0 Android For animated GIF support #21216

React Native 0.57.0 Android For animated GIF support #21216

laznrbfe commented Sep 20, 2018 •

edited

punksta commented Sep 20, 2018

laznrbfe commented Sep 20, 2018

charpeni commented Sep 25, 2018

a6051529 commented Nov 30, 2018

jasperkuperus commented Dec 18, 2018

AngelVenchev commented Feb 1, 2019 •

edited

badpenguin commented Feb 4, 2019

edgargrs commented Feb 10, 2019

lchenfox commented Mar 19, 2019

kazartsevalex commented Apr 10, 2019 •

edited

nppull commented Jun 17, 2019 •

edited

aibrahim3546 commented Jul 9, 2019

paingha commented Jul 9, 2019

praveens96 commented Jul 12, 2019

oregano1201 commented Jul 13, 2019

mayupat13 commented Jul 18, 2019

shabeer3508 commented Aug 1, 2019

React Native 0.57.0 Android For animated GIF support #21216

React Native 0.57.0 Android For animated GIF support #21216

Comments

laznrbfe commented Sep 20, 2018 • edited

Environment

Description

Reproducible Demo

punksta commented Sep 20, 2018

laznrbfe commented Sep 20, 2018

charpeni commented Sep 25, 2018

a6051529 commented Nov 30, 2018

jasperkuperus commented Dec 18, 2018

AngelVenchev commented Feb 1, 2019 • edited

badpenguin commented Feb 4, 2019

edgargrs commented Feb 10, 2019

lchenfox commented Mar 19, 2019

kazartsevalex commented Apr 10, 2019 • edited

nppull commented Jun 17, 2019 • edited

aibrahim3546 commented Jul 9, 2019

paingha commented Jul 9, 2019

praveens96 commented Jul 12, 2019

oregano1201 commented Jul 13, 2019

mayupat13 commented Jul 18, 2019

shabeer3508 commented Aug 1, 2019

laznrbfe commented Sep 20, 2018 •

edited

AngelVenchev commented Feb 1, 2019 •

edited

kazartsevalex commented Apr 10, 2019 •

edited

nppull commented Jun 17, 2019 •

edited