How to display GIF in react-native android app?

Question

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

if you're simply loading GIF image through the link then why not use WebView? — Amit Upadhyay, Jul 03 '16 at 20:18

score 44 · Accepted Answer · edited Sep 04 '18 at 21:06

44

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.

edited Sep 04 '18 at 21:06

Dave

897
8
8

answered Jul 04 '16 at 22:14

Orlando

1,576
2
15
20

when you say next release is that version 0.13.0? I just tried that release and the issue seems to be still present – Brien Crean Sep 23 '16 at 01:33
3

`compile 'com.facebook.fresco:animated-gif:0.+'` – Antoine Aug 17 '17 at 15:45
this compile line is not working in latest react native version. Any help can be appreciated. – Kartiikeya Mar 19 '18 at 05:17
Release build is getting failed for react native . – Kartiikeya Mar 19 '18 at 07:18
1

To find the right compatible version to use just replace `0.46` with the version of React Native you're using and see what the docs say: https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android – Joshua Pinter Mar 31 '18 at 15:06

score 17 · Answer 2 · answered Sep 04 '17 at 05:26

17

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'

answered Sep 04 '17 at 05:26

Tekeste Kidanu

1,950
2
14
22

@AdirZoari: React native support gif for ios by default. – bittu Mar 27 '18 at 06:25
1

To find the right compatible version to use just replace `0.46` with the version of React Native you're using and see what the docs say: https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android – Joshua Pinter Mar 31 '18 at 15:10
add 'multiDexEnabled true' if multidex error as per https://github.com/facebook/fresco/issues/516 – Nicoara Talpes Jul 04 '18 at 23:20
@TekesteKidanu Is there a way to play GIF only once into Android? – ChintaN -Maddy- Ramani Jul 16 '18 at 10:45

score 16 · Answer 3 · answered Jul 29 '19 at 03:26

16

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

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

Source

answered Jul 29 '19 at 03:26

zashishz

377
4
6

react-native docs: https://reactnative.dev/docs/image#gif-and-webp-support-on-android – Jakub Adamek Mar 22 '20 at 11:49

Himanshu Teotia · Answer 4 · 2018-04-04T07:51:31.410

13

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'

edited Apr 04 '18 at 07:51

answered May 23 '17 at 06:44

Himanshu Teotia

2,126
1
27
38

@KartiikeyaBaleneni try the answer above, it seems to work for earlier versions. – BradByte Mar 27 '18 at 20:00
1

To find the right compatible version to use just replace `0.46` with the version of React Native you're using and see what the docs say: https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android – Joshua Pinter Mar 31 '18 at 15:10

Mapsy · Answer 5 · 2018-09-28T20:10:14.327

11

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'

edited Sep 28 '18 at 20:10

answered Sep 28 '18 at 19:57

Mapsy

4,192
1
37
43

2

This should be the most accepted answer as of now. Thanks @Mapsy – Ahmed Imam Mar 01 '19 at 19:32
3

I faced gif issue in react native version 0.59.9 and it's solved by this answer. Thanks @Mapsy – Vishal Jadav Jun 24 '19 at 09:58

score 5 · Answer 6 · answered Nov 24 '19 at 12:38

5

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'

answered Nov 24 '19 at 12:38

Zeeshan Ahmad Khalil

793
1
12
29

@staminna I actually worked on it when I was trying to convert my FYP in react-native and the above method worked for me. I got the above solution from git-hub and I don't remember from which issue. There could be many possibilities for this problem that's why this question got many answers. You can push your work on Github and share the link. I will look at it when i will get time. – Zeeshan Ahmad Khalil Feb 24 '20 at 11:22
I can see the .gif using chrome on the emulator, therefore I believe it's not a network problem – staminna Feb 24 '20 at 11:45
– staminna Feb 24 '20 at 11:45
I think you have to save it in the react app locally. – Zeeshan Ahmad Khalil Feb 24 '20 at 11:49
1

Works for me on react-native version 0.61.4 too ;) – Blundering Philosopher Jul 13 '20 at 18:52

score 1 · Answer 7 · answered May 28 '20 at 08:50

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'
}

score 1 · Answer 8 · answered May 25 '21 at 09:12

1

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

answered May 25 '21 at 09:12

Fadi Abo Msalam

6,739
2
20
25

Gifs stopped animating when I updated to RN 0.66.3, your answer helped but I had to update from fresco 2.0.0 to 2.6.0, 2.4.0 would not work. Make sure to check the supplied link and get the most recent version! – b.stevens.photo Jan 28 '22 at 19:24

score 0 · Answer 9 · answered Jul 12 '18 at 13:30

0

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'

answered Jul 12 '18 at 13:30

Shaked Sayag

5,712
2
31
38

1

Is there a way to play GIF only once for Android? – ChintaN -Maddy- Ramani Jul 16 '18 at 10:45

score 0 · Answer 10 · answered Jun 24 '21 at 07:21

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'

How to display GIF in react-native android app?

10 Answers10

Linked

Related