How do I display an animated gif in React Native?

React Native

React Native Problem Overview

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?

React Native Solutions

Solution 1 - React Native

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,

Solution 2 - React Native

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

Solution 3 - React Native

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

Solution 4 - React Native

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.

Solution 5 - React Native

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

Solution 6 - React Native

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

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

Solution 7 - React Native

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

Solution 8 - React Native

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

Solution 9 - React Native

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

Loading.. ) }

**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 ;

Solution 10 - React Native

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'

Solution 11 - React Native

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>
	);
}
Categories
Recommended React Native Solutions

Previous Solution:

Fix bottom bar in CoordinatorLayout

AndroidAndroid LayoutAndroid ToolbarAndroid Coordinatorlayout

Next Solution:

Gcloud command line get default project_id

Google Cloud-PlatformGcloudGcloud Cli

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDev01View Question on Stackoverflow
Solution 1 - React NativeVenkatesh SomuView Answer on Stackoverflow
Solution 2 - React NativeG. HamaideView Answer on Stackoverflow
Solution 3 - React NativeMahdi BashirpourView Answer on Stackoverflow
Solution 4 - React NativeKashView Answer on Stackoverflow
Solution 5 - React NativeJoshua PinterView Answer on Stackoverflow
Solution 6 - React NativeChotala PareshView Answer on Stackoverflow
Solution 7 - React NativeImranView Answer on Stackoverflow
Solution 8 - React NativeLeoView Answer on Stackoverflow
Solution 9 - React NativeOmar bakhshView Answer on Stackoverflow
Solution 10 - React NativeDhruv ParmarView Answer on Stackoverflow
Solution 11 - React NativeIdoView Answer on Stackoverflow