React Native Show Live GIF Animated Image Inside Android iOS App

The .GIF image also known as Graphics Interchange Format Image supported multiple animations. So in this tutorial we would going to create a react native app that Show Live GIF Animated Image Inside Image component in both Android iOS Applications. But there is a hidden thing like iOS app react native iOS app directly not support the .GIF format. We need to install the facebook.fresco library in our react native project. So read the below tutorial and Happy Reading 🙂 .

Note : You need to only configure your android project so read the Step :1 from below because by default react native android app dose not support GIF images. But there is no need to to configure anything in iOS application.

Contents in this project Show Live GIF Animated Image Inside React Native Android iOS App :

1. Open YourReactNativeProjectFolder -> android -> app -> build.gradle file. Now add below dependencies inside the dependencies block. This is React Native’s official libraries and you can learn more about them here on its official page under GIF and Web support on Android topic.

2. Now you need to re-run the complete project using react-native run-android command. On running time you can see that all the above libraries would be downloaded in your project automatically from internet.

3. Import StyleSheet, Text, View and Image component in your project.

4. Create a Root View in render’s return block.

5. Create Image component in root view. Now we would call the GIF image from our online server using URL. If you want to Show GIF image from local resource then read my this tutorial.

6. Create Style for View component.

7. Complete source code for App.js File :

Screenshot in Android device:

Show Live GIF Animated ImageScreenshot in iOS device :

10 Comments

  1. Nice one! Please tell me how do we render svg images in react native

    • Rohit currently React Native dose not support the SVG image but you can add the SVG image in react native app using custom NPM library.

  2. Thanks, its helpful

  3. As I see the URL, It has some hearts which is not being shown in the app when we use this. May I know how to import?

  4. Not working if show gif from local resources – source={require(‘../assets/my_gif.gif’)}

    • Alex if you are calling image from local resource Assets folder then you have to call like this source={{uri: ‘asset:/my_gif.gif’}} .

Leave a Reply

Your email address will not be published. Required fields are marked *