How do I display an animated gif in React Native?

Question

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

It works fine with a .

Answer 1

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

Answer 2

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

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

Answer 3

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,

Answer 4

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

Answer 5

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 ;

Answer 6

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