How to display an animated Gif in React Native

Question

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

Feel free to leave a comment asking a question about what I've done, or where something is; I can provide additional information for better clarity — VoodooJazz_, Jan 20 '22 at 17:41

score 0 · Accepted Answer · answered Jan 20 '22 at 17:54

0

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>
  );
};

answered Jan 20 '22 at 17:54

Tadej Slemenšek

94
5

Strange, I did the equivalent as you in my function, I also used your link and did a uri just in case it wasn't a problem with my local gif, and then I tried doing exactly the same thing as you, with the "const App = () => {". But I still don't see the gif move, but its still displayed, its still a non-moving image. Can I see the contents of your package.js? Maybe I'm missing some modules.. – VoodooJazz_ Jan 20 '22 at 18:23
I created a fresh project. Are you using Android or iOS? Beacuse on Android you have to do some extra things. Checkout image component documentation on React Native page. Its all listed there. – Tadej Slemenšek Jan 20 '22 at 18:48
I've edited my post regarding your response, is my build.gradle dependencies set correctly for supporting animated images? – VoodooJazz_ Jan 20 '22 at 19:09
1

Nevermind, I just found the solution. After waking up from bed, I had the idea of maybe cold booting my android emulator... then when I started the react-native app, the gif just started moving. Nice. – VoodooJazz_ Jan 21 '22 at 08:49
Oh ok. Try a real device next time :D – Tadej Slemenšek Jan 21 '22 at 09:03
Haha.. Yeah. That is a better idea, I should just go ahead and buy a phone for this sort of thing x) Thanks a lot for your help though! What I was doing with the style in View actually was making the gif not show up at all, so your answer should help those who are going through similar problems – VoodooJazz_ Jan 21 '22 at 09:11

How to display an animated Gif in React Native

1 Answers1