How to Display Gif in React-Native Android App

How do I display an animated gif in React Native?

For RN < 0.60

By default the Gif images are not supported in android react native app.
You need to set use Fresco to display the gif images.
The code:

Edit your android/app/build.gradle file and add the following code:

dependencies: { 

    ...

    compile 'com.facebook.fresco:fresco:1.+'

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

    // For WebP support, including animated WebP
    compile 'com.facebook.fresco:animated-webp:1.+'
    compile 'com.facebook.fresco:webpsupport:1.+' 
}

then you need to bundle the app again, You can display the gif images in two ways like this.

1-> <Image 
        source={require('./../images/load.gif')}  
        style={{width: 100, height: 100 }}
    />

2-> <Image 
        source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  
        style={{width: 100, height:100 }} 
    />

For RN >= 0.60

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

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

I hope it is helpful to others,

How to display an animated Gif in React Native

This worked for me. Setting height and width on Image prop did not show the gif. So I flexed it and added maxWidth and maxHeight.

const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {

  const { width } = useWindowDimensions();

  return (
    <View style={{flex: 1}}>
      <Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
    </View>
  );
};

How to display GIF in react-native android app?

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.

GIFs not animating in the Android version of my React Native app

A easier fix would be using FastImage library which have Gif support build in with added benefits of caching and more

React Native: GIF is not animated

I fixed

Just use implementation 'com.facebook.fresco:animated-gif:2.5.0'

How do I display a gif in my React Native app?

You should try this for showing .gif

It is best in it.

https://github.com/airbnb/lottie-react-native

React Native How To Set Gif Image at Splash Screen?

you can also use FastImage for that functionality. It also gives support for gif files

you can also try below code

import FastImage from 'react-native-fast-image'

   <FastImage
            style={{ width: "100%", height: "100%" }}
            source={{
              uri: "your URL", //give your url here
              priority: FastImage.priority.normal
            }}
            resizeMode={FastImage.resizeMode.contain}
            onLoad={() => {
              setTimeout(
                () => {
                //navigate to another screen after some times
                },
                15000
              );
            }}
          />

Gif image is not working in android in react native

please follow the details in the FB docs it will specify the required things that you need.

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

Also, if you use GIF with ProGuard, you will need to add this rule in proguard-rules.pro :

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