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 122 · Accepted Answer · edited Jul 20 '21 at 05:57

122

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

13,853
11
101
132

answered Nov 21 '16 at 10:15

Venkatesh Somu

4,256
4
20
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

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

38

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

13,853
11
101
132

answered Feb 24 '16 at 08:20

G. Hamaide

6,928
2
35
54

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
1

here https://facebook.github.io/react-native/docs/image.html#content look at the source attribute – Train Feb 24 '16 at 19:04
G.Hamaide and @AKADER. Thanks guys. I still don't see where the docs say that RN doesn't support xcassets anymore. I would be surprised if they dropped support since it's Apple's preferred way to handle images. Also, my app has hundreds of images and xcassets is so much cleaner. Are you guys sure RN dropped xcassets or maybe they are supporting more than one way to reference an image? – Dev01 Feb 24 '16 at 23:48
Sorry I misunderstood, it still supports it. – Train Feb 25 '16 at 14:58
29

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
I have done the same, Image is displaying but animation not working. – Ananta Prasad Jun 13 '18 at 04:08
Using this solution, I am getting an animation on Android and iOS using Expo. Thanks! – gwalshington Oct 12 '18 at 13:13
@gwalshington help me how? – Ahsan Azwar Oct 12 '18 at 17:47

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

28

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

13,853
11
101
132

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
@Bashirpour I suggest that you update as DavideMartina suggests – Yossi Aug 12 '20 at 10:54
3

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

score 16 · Answer 4 · answered Sep 16 '21 at 12:32

16

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.

answered Sep 16 '21 at 12:32

Kash

1,371
2
20
30

2

good catch on the version , android studio quick actions updated it only up to 2.0.0 and still didn't work. I had to manually update it to 2.5.0 – heathkev Sep 18 '21 at 03:42
1

Amazing was almost looking for 2 days. – ChandraKumar Oct 12 '21 at 12:30
1

You deserve all the upvotes. – Kyriakos Xatzisavvas Nov 15 '21 at 19:50
Thanks. worked! – CrackerKSR Dec 26 '21 at 19:23
this works for the recent react-native version `0.67.1`. thank you – Mahdieh Shavandi Jan 29 '22 at 21:54

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

41,803
23
230
232

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
1

lifesaver with that specific version compatibility – Dale_Plante Dec 31 '19 at 18:47

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

498
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 2 · 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}
    />
)

aweosme, was already using FastImage and didn't need to add freco — eckc, Jun 06 '21 at 07:20

score 1 · Answer 9 · 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 0 · Answer 10 · 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,276
17
25
33

answered Jan 20 '22 at 07:39

Dhruv Parmar

25
6

Ido · Answer 11 · 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>
    );
}

How do I display an animated gif in React Native?

11 Answers11

For React Native 0.60 and higher

For Android You Need to Add Facebook's Fresco Library

Linked