7

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.

Shivani Chauhan
  • 71
  • 1
  • 1
  • 3

5 Answers5

6

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,

Venkatesh Somu
  • 4,710
  • 4
  • 23
  • 22
4

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

pqkluan
  • 356
  • 2
  • 6
1

use this,

<Image
  style={styles.gif}
  source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>

make sure to add below dependency,

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

for more details refer this , StackOverFlow question.

Radhey
  • 2,139
  • 2
  • 24
  • 42
1
 <Image source={require('./img/ezgif.com-resize.gif')} />

//add that inside dependancy block in android/app/build.gradle

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

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

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

compile 'com.facebook.fresco:webpsupport:1.3.0'

Rishav Kumar
  • 4,979
  • 1
  • 17
  • 32
Asanka Sampath
  • 545
  • 4
  • 12
1

Add that inside dependancy block in android/app/build.gradle

*For me react-native version 0.57.8. It is working for me.

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile 'com.facebook.fresco:fresco:1.10.0' *

 <Image source={{ uri: 'https://media.giphy.com/media/NSI5d5LiHPxXCKDbob/giphy.gif' }}
style={{ height: 80, width: 60, }}
 />
kumar rakesh
  • 11
  • 3