React Native WebP Format

Save tens of megabytes with this simple trick...

WebP image integration for React Native apps.

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 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.84.1). Older versions might work too, but that's not guaranteed.

Installation

bun i react-native-webp-format
yarn add react-native-webp-format
npm i 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:3.6.0'
  // Optionally, to display animated WebP images, you have to add:
  implementation 'com.facebook.fresco:animated-webp:3.6.0'
  ...
}

Check the example app if you have any issues. 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')} />

Expo

Add the plugin to your app.json / app.config.js:

{
  "expo": {
    "plugins": ["react-native-webp-format"]
  }
}

Then run npx expo prebuild (or eas build). The plugin automatically adds the required Android Fresco dependencies; iOS is handled by the podspec.

Known issues

1. .getSize() doesn't work on WebP images. Use instead:

const {width, height} = Image.resolveAssetSource(require('./assets/1.sm.webp'));

3. Multiple animated images of too large size (~5MB) may crash iOS app due to running out of memory. Possible solution

PRs are welcomed ❤️