CODEWITHSUNDEEP
androidimagereact-nativegif
Orlando
Orlando

Reputation: 1586

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:

<Image
  style={styles.gif}
  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: https://github.com/facebook/react-native/commit/fcd7de5301655b39832d49908e5ca72ddaf91f7e

Upvotes: 27

Views: 31215

Answers (10)

Sid009
Sid009

Reputation: 501

GIF and WebP are not supported in default Android. So add bellowed dependencies in app level build.gradle file of android project and synch.

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

Upvotes: 0

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7197

In RN 64.1 you need to use the newer version of fresco to support gif in Android

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

frescolib ref

Upvotes: 1

sri
sri

Reputation: 871

From React Native Docs:

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

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

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.0.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

Upvotes: 1

Zeeshan Ahmad Khalil
Zeeshan Ahmad Khalil

Reputation: 861

For the latest version of react-native '0.61.5' you need '2.0.0' Fresco Version ;

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

Upvotes: 5

zashishz
zashishz

Reputation: 437

if using RN Version .60 try adding below inside app build.gradle file

dependencies {
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
}

Source

Upvotes: 16

Mapsy
Mapsy

Reputation: 4272

We upgraded to "react-native": "^0.57.1", which stopped our animated gifs from playing; they just rendered the first frame of the animation as static images.

To correct for this, we included the following libraries:

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

// (Only if supporting WebP.)
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'

Upvotes: 11

Orlando
Orlando

Reputation: 1586

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 both of the following lines to your android/app/build.gradle file under dependencies:

compile "com.facebook.fresco:animated-gif:1.3.0"
compile "com.facebook.fresco:animated-base-support:1.3.0"

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:1.3.0"
  compile "com.facebook.fresco:animated-base-support:1.3.0"

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.

Upvotes: 44

Shaked Sayag
Shaked Sayag

Reputation: 5792

For me adding the dependencies like below wasn't enough: 

compile 'com.facebook.fresco:animated-gif:1.9.0'

I also had to upgrade my gradle version in the file:

android/gradle/wrapper/gradle-wrapper.properties like this:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

and also my build tools version in the file:

android/build.gradle like this:

classpath 'com.android.tools.build:gradle:3.0.1'

Upvotes: 0

Himanshu Teotia
Himanshu Teotia

Reputation: 2185

You can add these dependencies. I am using this in version (v0.44.0):

compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'

In version v0.50 you only need to add

compile 'com.facebook.fresco:animated-gif:1.3.0'

Upvotes: 13

Tekeste Kidanu
Tekeste Kidanu

Reputation: 1990

All of the above did not work for me with the latest React Native(v0.48). I had to add the following dependencies in my android/app/build.gradle

compile 'com.facebook.fresco:fresco:1.5.0' compile 'com.facebook.fresco:animated-gif:1.5.0'

Upvotes: 17

Related Questions