How to animate the loading GIF in Android side?

Question

I have this GIF in my React Native project:

import React from "react";
import { View, StyleSheet, Image } from "react-native";
import PropTypes from "prop-types";

const Loading = () => (
  <View style={styles.container}>
    <Image source={require("./Loading.gif")} style={styles.containerLoader} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    color: "#00AD50"
  },
  containerLoader: {
    width: 150,
    height: 150
  }
});

export { Loading };

It is three pulsating dots that work just fine on the iOS side, but do nothing on the Android side. I have seen a couple of relevant posts:

So this one is obviously too old: Animated gif in android

But this one here talks about needed to break the image down into frames: How to animate .gif images in an android?

Does the above still apply today? If so, is there any documentation on how this is done?

If not, how then can I animate the above GIF file?

I attempted to implement what a colleague offered via this documentation: https://facebook.github.io/react-native/docs/image#gif-and-webp-support-on-android

So in my android/app/build.gradle:

   dependencies {
       implementation 'com.facebook.fresco:animated-gif:1.12.0'
       implementation project(':react-native-device-info')
       implementation project(':react-native-onesignal')
       implementation project(':react-native-immediate-phone-call')
       implementation fileTree(dir: "libs", include: ["*.jar"])
       implementation "com.facebook.react:react-native:+"  // From 
  node_modules

   if (enableHermes) {
     def hermesPath = "../../node_modules/hermesvm/android/";
     debugImplementation files(hermesPath + "hermes-debug.aar")
     releaseImplementation files(hermesPath + "hermes-release.aar")
   } else {
     implementation jscFlavor
   }
}

but the above did nothing to animate the GIF. So while it's referenced here as a solution, that did not work for me.

Not a solution,but a suggestion,You can try lottie for react-native.gif's are heavy for usage and larger in size.A lottie animation is smoother and consumes less space.Try it out if feasible! — Thakur Karthik, Sep 30 '19 at 14:35
Possible duplicate of [How to display GIF in react-native android app?](https://stackoverflow.com/questions/38169519/how-to-display-gif-in-react-native-android-app) — Zaytri, Sep 30 '19 at 16:14

score 1 · Accepted Answer · answered Sep 30 '19 at 18:39

Also check this post if you are using react-native 0.60+.

In short, it's important to reference the correct fresco version:

// For animated GIF support
implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

How to animate the loading GIF in Android side?

1 Answers1