Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gif image is not working in android in react native

Animation is not working in gif image in android

Android gif image without animation

like image 795
pallav test Avatar asked May 25 '18 06:05

pallav test


People also ask

Why GIF is not working in Android react native?

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.

Does react native image support GIF?

Now, react-native has that flexibility to support GIFs.

How do I show GIFs in react?

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="" /> .

How do I run a GIF in JavaScript?

The JavaScriptvar gif = getGif(); We run the function and save the output in a variable gif , as above. The gif variable now contains the path of the GIF from the images in the page.


2 Answers

For react native version>=0.60 :

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.

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

For latest react native version 0.66 :

implementation 'com.facebook.fresco:animated-gif:2.6.0'
like image 112
Kishan Bharda Avatar answered Oct 20 '22 02:10

Kishan Bharda


For React Native version : 0.66.4

Add these below lines in android/app/build.gradle file,

  implementation 'com.facebook.fresco:fresco:2.0.0'
    // For animated GIF support

 implementation 'com.facebook.fresco:animated-gif:2.6.0'
    // For WebP support, including animated WebP

 implementation 'com.facebook.fresco:animated-webp:2.0.0'

 implementation 'com.facebook.fresco:webpsupport:2.0.0'

And Use it like:

<Image
   source={require('../assets/splah.gif')}
   style={{ width: '100%',height:'100%' }}
/> 
like image 27
Mohit thakur Avatar answered Oct 20 '22 00:10

Mohit thakur