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.

<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?

score 135 · Accepted Answer · edited Jul 20 '21 at 05:57

135

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,

edited Jul 20 '21 at 05:57

Mahdi Bashirpour

17,147
12
117
144

answered Nov 21 '16 at 10:15

Venkatesh Somu

4,710
4
23
22

4

For animated GIFs, `animated-base-support` doesn't work for me (RN 0.41.0), however `animated-gif` (the first one under WebP) works. This is what I ended up adding to my `build.gradle` file: `compile "com.facebook.fresco:animated-gif:1.1.0"` – Ryan H. Mar 16 '17 at 20:53
1

@RyanH. Do you have both `animated-base-support` *and* `animated-gif`? I wonder if `animated-base-support` is a basic requirement and `animated-gif` is just incorrectly grouped with webp. – cedmans Mar 19 '17 at 09:09
@cedmans I only needed `animated-gif`. See http://stackoverflow.com/q/38169519/305383 – Ryan H. Mar 19 '17 at 12:40
2

now **compile** has been replaced with **implementation** – Bipul Roy Jul 11 '20 at 19:01
fresco 3.0.0 was released two weeks ago and is now the suggested version, i.e. use com.facebook.fresco:animated-gif:3.0.0' – Shep Sims Mar 30 '23 at 22:01

score 39 · Answer 2 · edited Jul 20 '21 at 05:18

39

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

edited Jul 20 '21 at 05:18

Mahdi Bashirpour

17,147
12
117
144

answered Feb 24 '16 at 08:20

G. Hamaide

7,078
2
36
57

How do I link to a gif in my Images.xcassets? – Dev01 Feb 24 '16 at 10:54
1

RN does not use Images.xcassets anymore. You need to put them in a folder in your project and use a relative path to that file. – G. Hamaide Feb 24 '16 at 10:55
Major change from 0.13 to 0.14 : static images. You should use require with a relative path for local images. – G. Hamaide Feb 24 '16 at 11:39
32

Doens't work for Android as far as I know and tested. – Orlando Jul 03 '16 at 11:25
@Orlando Doesn't work on Android 6.0 from my testing. Just see a static image (i.e. the first frame of the gif). – Joshua Pinter Mar 31 '18 at 14:32

score 34 · Answer 3 · edited Jun 20 '20 at 09:12

34

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 07 '19 at 13:34

Mahdi Bashirpour

17,147
12
117
144

1

i Just used implementation 'com.facebook.fresco:animated-gif:2.0.0' and after gradlew clean – Davide Martina Jan 03 '20 at 08:56
7

I had to use `./gradlew clean` – Nathan Aug 17 '20 at 15:59

score 29 · Answer 4 · edited Aug 25 '22 at 08:06

29

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.

edited Aug 25 '22 at 08:06

cglacet

8,873
4
45
60

answered Sep 16 '21 at 12:32

Kash

1,663
3
24
33

score 12 · Answer 5 · answered Mar 31 '18 at 15:17

12

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

answered Mar 31 '18 at 15:17

Joshua Pinter

45,245
23
243
245

1

the second part (using a static version) is vital actually, without using the right version I got a crash, switching the the stated version in docs fixed it – Blue Bot Jan 06 '19 at 16:05
1

@BlueBot I'm all about Static Versioning. The less magic in dependency versions, the better. Ensures the least amount of surprises. – Joshua Pinter Jan 06 '19 at 20:05
So, if React Native does not come with GIF support out of the box, why is it working for Apple/IOS? – kojow7 Apr 18 '19 at 02:36
https://stackoverflow.com/questions/44493378/whats-the-difference-between-implementation-and-compile-in-gradle – oliversisson Apr 18 '19 at 09:17

score 3 · Answer 6 · answered Mar 23 '18 at 09:45

3

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

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

answered Mar 23 '18 at 09:45

Chotala Paresh

566
4
12

score 3 · Answer 7 · answered Jul 14 '19 at 10:52

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

@webmaster you can read this https://forums.expo.io/t/display-animated-gif/4940/6 — Imran, Nov 17 '19 at 08:56
Actually converted the .gif to a video file (mp4) solved my problem like this ;) no need to import things.. :) — webmaster, Nov 17 '19 at 22:32

score 3 · Answer 8 · answered Apr 14 '20 at 14:26

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

score 2 · Answer 9 · answered Aug 18 '22 at 07:36

2

For react-native": "0.68.2" this version is working for me

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

answered Aug 18 '22 at 07:36

Syed Amir Ali

873
12
22

Refer to the `FRESCO_VERSION` in this file ( https://github.com/facebook/react-native/blob/latest/ReactAndroid/gradle.properties ) to know which version to use with the latest React Native (Documentation: https://reactnative.dev/docs/image ) – velkoon Nov 04 '22 at 18:29

score 1 · Answer 10 · answered Feb 15 '20 at 12:28

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 ;

score 1 · Answer 11 · answered Dec 29 '22 at 06:28

Open project/android/app then build.gradle file and find dependencies and add this line(dependency for .gif)

dependencies {
    ...
    // For GIF image support
    implementation 'com.facebook.fresco:animated-gif:2.5.0'
    //or implementation 'com.facebook.fresco:animated-gif:2.6.0'
}

then in your react component you can pass any .gif or any gif url like so

const gifUrl = 'https://ipfs.io/ipfs/bafybeic75wkaqvblmte523qkzdoe437onrwl3xgvy5argmh6uhmrn7g2wi'
...
return (
   <View>
      <Image source={{uri: gifUrl}} style={{width: 200, height: 200}} />
   </View>
)

score 0 · Answer 12 · edited Jan 26 '22 at 07:08

0

For RN >= 0.66

Edit your android/app/build.gradle file and add the following code:

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

edited Jan 26 '22 at 07:08

Procrastinator

2,526
30
27
36

answered Jan 20 '22 at 07:39

Dhruv Parmar

35
1
6

Ido · Answer 13 · 2022-04-13T21:21:30.850

In any case you need something else you could use also WebView for it

render(props) {
    const width = 220;
    const height = 135;
    const borderRadius = 15;
    const uri = 'https://c.tenor.com/0wj4ApfUlWUAAAAM/whatever-bank-stare.gif';
    // const uri = 'https://c.tenor.com/YwsCGem_MmQAAAAC/parks-and-rec-amy-poehler.gif',;
    // const uri = 'https://media.tenor.com/images/1c39f2d94b02d8c9366de265d0fba8a0/tenor.gif';

    return (
        <View
            style={{
                width,
                height,
                borderRadius: 15,
                overflow: 'hidden',
            }}>
            <WebView
                source={{
                    uri
                }}
                style={{
                    flex: 1,
                    width,
                    height,
                    borderRadius,
                }}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                injectedJavaScript={`
                        document.body.style.width = "${width}px";
                        document.body.style.height = "${height}px";
                        document.body.style.backgroundColor = "${'#fff'}";
                        document.body.style.overflow = "hidden";
                        const img = document.querySelector("img");
                        img.style.position = "absolute";
                        img.style.top = 0;
                        img.style.left = 0;
                        img.style.margin = "auto";
                        img.style[img.offsetWidth > img.offsetHeight ? 'width' : 'height'] = "100%";
                        img.style.borderRadius = "${borderRadius}px";
                   `}
            />
        </View>
    );
}

It will preserves the gif aspect ratio

Also, I did the same with the <Image />. For anyone need it:

function ChatImageGIF(props) {
    const maxWidth = 220;
    const maxHeight = 135;
    const [width, setWidth] = useState(maxWidth);
    const [height, setHeight] = useState(maxHeight);
    const borderRadius = 15;

    Image.getSize(props.currentMessage.video, (w, h) => {
        const minWidth = Math.min(maxWidth, w);
        const minHeight = Math.min(maxHeight, h);
        const aspectRatio = (w < h ? w : h) / (w < h ? h : w);
        setWidth(w < h ? minHeight * aspectRatio : minWidth);
        setHeight(w > h ? minWidth * aspectRatio : minHeight);
    });

    return (
        <View
            style={{
                width,
                height,
                borderRadius: 15,
                overflow: 'hidden',
            }}>
            <Image
                source={{
                    uri: props.currentMessage.video,
                }}
                style={{
                    width,
                    height,
                    borderRadius,
                    resizeMode: 'contain',
                }}
            />
        </View>
    );
}

Mo Hassan · Answer 14 · 2023-06-24T13:22:43.307

0

I solve it by add source to FastImage

add to your app

yarn add react-native-fast-image

import FastImage from 'react-native-fast-image';


 
  <FastImage
          resizeMode="contain"
          style={{width: 70, height:70}}
       //===>   source={require('../images/<imageName>.gif')}
          //OR
       //===>   source={{uri: 'https://<YOUR_LINK>.gif'}}
        />
       )};

edited Jun 24 '23 at 13:22

answered Jun 22 '23 at 11:34

Mo Hassan

11
3

score 0 · Answer 15 · answered Aug 10 '23 at 06:06

To add a .gif file in react native there are some factors that have to be verified first, if your project is made with expo currently in SDK 48 use react native version '0.71.8' and in this case if you use the module from of expo or react native you would only have to look for the normal image.gif as if you were using any other image like this:

import { Image } from "expo-image";

or

import { Image } from "react-native";

// USING EXPO
<Image source={require('../../../assets/Img/your-image.png')} contentFit="contain" style={{width: w, height: h}}/>


// USING REACT NATIVE
<Image source={require('../../../assets/Img/your-image.png')} style={{width: w, height: h, resizeMode: 'contain'}}/>

Greetings and I hope I have helped those who see this :)

How do I display an animated gif in React Native?

15 Answers15

For React Native 0.60 and higher

For Android You Need to Add Facebook's Fresco Library

Linked