How do I display an animated gif in React Native?

58
votes

How can I display an animated gif in react native. This is what I've tried.

<Image source={{uri: "loading"}} />

It works fine with a .png file but when I use a .gif file it's blank. I read somewhere to try renaming the .gif to a .png but that just displays one frame of the animated gif with no animation. Any ideas?

9
react-native

9 Answers

112
votes

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,

36
votes

You need to add the extension and require it this way :

<Image source={require('./path/to/image/loading.gif')} />

or

<Image source={{uri: 'http://www.urltogif/image.gif'}} />
23
votes

For React Native 0.60 and higher

Open your android/app/build.gradle file and add following lines to first of dependencies section

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

And then

cd android
gradlew clean
react-native run-android
12
votes

For Android You Need to Add Facebook's Fresco Library

React Native does not come with Gif support out of the box but you can add Facebook's Fresco library to add this support.

You should be able to simply add the following to your build.gradle file: 

compile 'com.facebook.fresco:animated-gif:0.+'

Specific Version Compatibility

If you are having troubles or you want to use a static version (highly recommended), you can simply go to the following React Native documentation page and replace the 0.46 in the URL with the version of React Native you're running:

https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android

3
votes

if you want to use gif as background image than you can use

<ImageBackground
 source={yourSourceFile}
> 
 -- your content ---
</ImageBackground>
3
votes

To add gif and WebP in your project you need some optional modules. If the RN version is <=0.59 then add the following lines in your android/app/build.gradle file.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.10.0'

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

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

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.10.0'
}

If the RN version is 0.60 and greater then add the following lines in android/app/build.gradle file

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.12.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
1
votes

import React,{useState} from 'react';

**step1 import from react narive  You Can Use (Image) Or (ImageBackground)  **


import { StyleSheet, Text, View ,ImageBackground} from 'react-native';





function LoadingUsers() {
    return(<View style={styles.LoadingView}>



**Step 2 require inside source ImageBackground **



<ImageBackground source={require('../assets/stickman.gif')} style={styles.Gif}><Text>Loading..</Text></ImageBackground>
</View>)
}
 


**Step 3 Set Width ANd height **


const styles = StyleSheet.create({
    LoadingView:{
        flex:1,
    },
    Gif:{
        flex:1,
        width:"100%",
        height:"100%",
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:'#000',
    }
  
    });
    export default LoadingUsers ;
1
votes

DylanVann / react-native-fast-image is a nice alternative that supports GIFs for both Android (based on glide rather than fresco) and iOS (SDWebImage) with additional features that looks like:

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)
0
votes

For me on React native 0.65.1 The solution in react-native docs did not work I had to use the latest version of Fresco:

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

Now GIF works on Android for me.

You can check Fresco latest from their website.