How to display a GIF or webp image in React Native? Code Example

In order to display a Gif or webp image in React Native we need to implement Facebook Fresco image library in our Android gradle file.

This is required because gif and webp are not supported natively by Android.

Enable gif and webp support

Step 1: Open android/app/build.gradle file

Step 2: Add the webp and gif libraries of Fresco –

dependencies {
  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.6.0'

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

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.6.0'
}

To get the latest version of libraries check this link.

Now both gif and webp will be supported.

Code Example

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  image: {
    height: 200,
    width: 200,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{uri: 'https://www.thisiscolossal.com/wp-content/uploads/2014/03/120430.gif'}}
      />
    </View>
  );
}

export default DisplayAnImage;

The output will look like this –

This screenshot is still image but on app this image is animating.

Live Demo

Conclusion

To enable support of gif and webp images in React Native, we need to include Fresco library of Facebook in Android buid.gradle file.