React Native WebP Format

Save tens of megabytes with this simple trick...

By utilizing WebP instead of png/jpg you can significantly reduce the size of your app without quality loss.

Works with both Image and ImageBackground React Native components.

iOS uses SDWebImage implementation and Android utilizes Fresco to boost the gained performance even more.

Here's a detailed article with extra details and information on what is the best way to convert your regular images to WebP.

Prerequisites:

• React Native version 0.61 or higher (last tested on 0.63.2). Older versions might work too, but that's not guaranteed.

Installation

yarn add react-native-webp-format

iOS

cd ios && pod install

Android

Add the following dependencies to android/app/build.gradle:

dependencies {
  ...
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
  // Optionally, to display animated WebP images, you have to add:
  implementation 'com.facebook.fresco:animated-webp:2.0.0'
  ...
}

Remember to restart your packager to see the changes. If you still have any issues, try resetting the cache.

Usage

Simply replace .png or .jpg with .webp after you've converted your files <Image source={require('../../assets/close.webp')} />

PRs are welcomed ❤️