GIF image not showing animation in react-native

Question

I am facing the problem with gif image in react-native.How to use gif image in react native. This is my code and I have placed the image in the images.js file.

Answer 1

Previously I fixed the issue of gif image displaying in ReactNative. You too fix this if you follow the following steps,

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.

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

I hope it is helpful to others,

Answer 2

Just like other assets image:

<Image
  source={require('./images/loading.gif')}
  style={{height: 200, width: 200}}
  resizeMode='contain'
/>

Note: You need to turn on GIF support for Android version