How to load gif from url in React Native

Introduction :

Loading a gif from URL is easy in react native. React native provides one Image component that can load gifs from a URL. In this tutorial, I will show you how to load one gif from a remote URL. I will provide you the full working code at the end of this post.

Loading gif in iOS :

For this example, I am using one gif from giphy:  You can replace it with any other URL if you want.

For loading a gif, the Image component is used. import it from react-native :

import {Image} from 'react-native';

Store the URL in a constant and assign that value as a source to the Image :

const imageUrl = 'https://media.giphy.com/media/gZEBpuOkPuydi/giphy.gif';

<Image source={{uri: imageUrl}} style={styles.image} />

It looks as like below on iPhone :

Loading gif in Android :

Loading gif in android is different. Android can’t load gif automatically. For that you need to add one library. Open android/app/build.gradle file and add the below line inside dependencies block :

implementation 'com.facebook.fresco:animated-gif:2.0.0'

For android version before Ice cream sandwich(API 14), use it :

implementation 'com.facebook.fresco:animated-base-support:1.3.0'

Most app doesn’t support before API 14, so only the first line will work.

You can check the official guide to find out the latest version of this lib.

Rerun the app and here is the result :