Display GIF Image from url in React native

The .GIF image also known as Graphics Interchange Format Image supported multiple animations. So in this article i am going to create a react native app that Show Live GIF Animated Image from url Inside Image component in both Android iOS Applications. But there is a hidden thing likeAndroid app react native android app directly not support the .GIF in image tag. We need to install the facebook.fresco library in our react native project. So read the below article

For android u have to install below libraries in build.gradle file. so add below lines in projectName=>android=>app=>build.gradle

dependencies {

// If your app supports Android versions before Ice Cream Sandwich (API level 14)

implementation ‘com.facebook.fresco:animated-base-support:1.3.0’

// For animated GIF support

implementation ‘com.facebook.fresco:animated-gif:2.0.0’

// For WebP support, including animated WebP

implementation ‘com.facebook.fresco:animated-webp:2.1.0’

implementation ‘com.facebook.fresco:webpsupport:2.0.0’

// For WebP support, without animations

implementation ‘com.facebook.fresco:webpsupport:2.0.0’

}

Update App.js file with below code

import React, { Component } from ‘react’;

import { StyleSheet, Text, View, Image } from ‘react-native’;

export default class App extends Component<{}> {

render() {

return (

<View style={styles.container}>

<Image source={{uri : ‘https://media.idownloadblog.com/wp-content/uploads/2016/02/Twitter-GIF.gif'}} style = {{width: 200, height: 200}} />

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’

}});