How to enable animated webp for the component in React Native with Expo EAS?

Question

Animated gifs work in Android when using Expo EAS builds but animated webp (awebp) do not.

Why?
How do you get awebp working?

Answer 1

Why doesn't it work when animated gif does?

• React Native has animated image support for many formats but it's optional and needs to be built in.
• By default Expo EAS builds them all in except animated webp because...

It's disabled by default because RN doesn't really support animated webp on iOS. You have to use an external library to use it, like fast image. Expo tries to unify APIs, and if the behavior is that much different on iOS vs Android, it picks the default behavior that works for both.

Cedric (Expo team member) via Discord

How to enable

• Create an EAS Config Plugin.
• Add the plugin file to your project.
• Add a reference to the file in the plugins key of your eas config file.

Here is the config plugin.

// withAnimatedWebp.js

const { createRunOncePlugin, withGradleProperties } = require('@expo/config-plugins');

const withAnimatedWebp = (config) => {
  const itemToModify = {
    type: 'property',
    key: 'expo.webp.animated',
    value: 'true',
  };

  return withGradleProperties(config, (config) => {
    config.modResults = config.modResults.filter(
      (item) => !(item.type === itemToModify.type && item.key === itemToModify.key)
    );

    config.modResults.push(itemToModify);

    return config;
  });
};

module.exports = createRunOncePlugin(withAnimatedWebp, 'animated-webp-support', '1.0.0');

# inside app.config.json
plugins: ['./eas_build_config_plugins/withAnimatedWebp'],

_{Credit to @wodin for pointing me in the right direction on the Expo forums.}

Answer 2

I've created some expo-config-plugins for Expo (one based on your work) which enable animated webP support for iOS and Android (works with <Image /> and <FastImage />.

Be careful, it is using dangerous mods by expo (patching native files), always check if everything is still running smooth afterwards. Remember to trigger expo prebuild --clean when you encounter issues.

Gist with further documentation

https://gist.github.com/Hirbod/07c6641970c9406ff35a7271dda1f01c