How to add GIFs in react-native ?

React-native is a cross-platform mobile application development tool. It is one of the frameworks built on top of Javascript. Now let’s come to the point.  We usually use .jpeg or .png  images because we are more friendly to them. But what if you want to add GIF support to your react native project. This article will show how to add GIFs in react-native. Now, react-native has that flexibility to support GIFs. 

Below is the step-by-step implementation.

Step 1: Create a react-native project using the following command 

  npx react-native init DemoProject

Step 2: Now, inside your Project, create a components folder. Inside that components folder, create a file AddGif.js  

Project Structure: It will look like the following.

Step 3: Go to your Project and navigate to android>app>build.gradle and add the following to your dependencies inside build.gradle file.

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

We are adding gif:2.5.0 version as it is needed for react-native latest version(0.67). If you are using a lower react-native version, check react-native documentation for gif support for that particular version. After adding the dependency restart the server once using the following command.

npx react-native run-android

Step 4: Inside AddGif.js we will show GIf using Image component of the react-native library.

AddGif.js

import React from "react";
import {Text ,View , Image , StyleSheet} from 'react-native' ;

const AddGifImage = () => {
    return (
        <View style={Styles.container}>
          <Image
            style ={{width: "100%", height:"80%"}}
            source={{ uri : "
https://media.geeksforgeeks.org/wp-content/uploads/20220221170632/ezgifcomgifmaker1.gif"}}
          />
        </View>
      );
}

const Styles = StyleSheet.create({
    container :{
        alignContent:'center',
        margin:25
    }
})

export default AddGifImage;

Step 5: Now, import AddGif.js to your App.js file

App.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import AddGifImage  from './components/AddGif';

const App: () => Node = () => {
   return (
      <View>
       <AddGifImage/>
      </View>
      );
};

export default App;

Step to run the application: Open the terminal and type the following command. 

  npx react-native run-android

Note: After adding implementation line in build.gradle don’t forget to restart the metro server.

Output: