How do I display an animated gif in React Native? - 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?

Answer 1

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 2

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 3

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

Answer 4

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.

Answer 5

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 6

if you want to use gif as background image than you can use
<ImageBackground
source={yourSourceFile}
>
-- your content ---
</ImageBackground>

Answer 7

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

Answer 8

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

Answer 9

For react-native": "0.68.2" this version is working for me
implementation 'com.facebook.fresco:animated-gif:2.6.0'

Answer 10

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 11

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

Answer 12

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'

Answer 13

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