Home > Enterprise >  How to display an animated Gif in React Native
How to display an animated Gif in React Native

Time:01-21

Before you link me to another question similar to this one, such as import com

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

CodePudding user response:

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>
  );
};
  •  Tags:  
  • Related