Orlando Orlando - 1 year ago 268
Android Question

How to display GIF in react-native android app?

I want to display a simple gif via URL in my Image tag in my android react-native app but when I start it no image is shown.
The code as provided in the docs does work only for iOS but not for android:

source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}

There was a similar question here but as already said this only works for iOS:
How do I display an animated gif in React Native?

Regarding this commit it should work though:

Answer Source

We made the core library smaller by making things like GIF support optional.

Because of that we have to manually opt-in for gif support in Android. Add the following line to your android/app/build.gradle file under dependencies:

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

So your dependencies section might look like this:

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile 'com.facebook.fresco:animated-gif:0.10.0'  // For animated GIF support

This solves the problem for your debug build but if you want to solve it also in your release build at them moment you have to add the following line to your proguard-rules file:

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

More information on this here: https://github.com/facebook/fresco/issues/1177

This was fixed with this commit and will be included in the next release.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download