How to display an animated Gif in React Native

Before you link me to another question similar to this one, such as this or that. I will say that I have done exactly what the answers said, but my gif won't animate as it should (It is displayed though).

Here is what I've done in a function, which is displayed through the main App function Stack.Screen within a NavigationContainer and Stack.Navigator. (I'm using React Navigation to move across screens, the context here is that a button is pressed and it displays the contents of the DetailsScreen function)

function DetailsScreen({ navigation }) {  
  return (
    <View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
      <Image source={require('./src/gif/moving.gif')} />
      <Text>Here is a gif</Text>
    </View>
  );
}

This displays the first still image of my gif, but doesn't animate it.

I also already went ahead and placed the implementations in the build.gradle dependencies, but it didn't do anything for me. I have a feeling the problem lies there.

implementation 'com.facebook.fresco:fresco:1.+'

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

// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.+'
implementation 'com.facebook.fresco:webpsupport:1.+'

(I already checked fresco's new implementation version 2, but it still didn't help. I also tried changing from a specific version, still doesn't work)

I am using React Native version 0.67. (I tried starting it again while downgrading react-native to 0.66 and it still doesn't work.)

Also, not sure if this has to do with anything in this screenshot here, this is what I had by default and gave me this error message as soon as I opened the file, but the program launches just fine even with that on

Doing it normally in the main App() function starting first displays the gif, but still remains as a still image.

What should I do? I mean... what else can I do?

Edit:

I found the solution to the problem... it was a simple case of just cold booting the emulator I was using from android studio.

However, Tadej's answer is valid, as the view style aligning messes up the gif a bit. If you are having a similar problem and the answer doesn't help, try cold booting your emulator, or even reinstall a newer one... or alternatively, use a real android phone to test these sorts of things.

Anyway, thanks a lot for the help Tadej ! I hope this question has helped others in my situation.

Tadej Slemenšek

This worked for me. Setting height and width on Image prop did not show the gif. So I flexed it and added maxWidth and maxHeight.

const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {

  const { width } = useWindowDimensions();

  return (
    <View style={{flex: 1}}>
      <Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
    </View>
  );
};