Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 543
Orlando Avatar asked Jul 03 '16 11:07

Orlando


People also ask

How do you display a gif in React native?

If you are using a lower react-native version, check react-native documentation for gif support for that particular version. After adding the dependency restart the server once using the following command. Step 4: Inside AddGif. js we will show GIf using Image component of the react-native library.

Can we use gif in React native?

GIF and WebP support on Android​ 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.

How do you add a gif to React app?

To render an animated gif in a React component: Import the gif as import myGif from './path-to-my-gif. gif' . Add an img element that shows the gif, e.g. <img src={myGif} alt="" /> .


2 Answers

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.

like image 151
Orlando Avatar answered Sep 18 '22 21:09

Orlando


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'

like image 31
Tekeste Kidanu Avatar answered Sep 18 '22 21:09

Tekeste Kidanu