React-native: React Native 0.57.0 Android For animated GIF support

[laznrbfe]

• [X] Review the documentation: https://facebook.github.io/react-native
• [X] Search for existing issues: https://github.com/facebook/react-native/issues
  
  
  
  • [X] react-native issues-20242
  
  
  • [X] react-native issues-20251
  
  
  • [X] react-native issues-20323
  
  
  • [X] SoLoader issues-13
  
  
• [X] 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

[punksta]

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

helped me.

[laznrbfe]

@punksta Thanks. It works.

[charpeni]

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]

问题的根源在于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]

@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 [email protected] 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]

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]

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]

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]

  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]

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]

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]

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]

@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]

not working in rn v0.60.3

[oregano1201]

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]

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]

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