Animated webp expected to work with EAS builds?

Expo Application Services (EAS)
1

I’ve updated all packages and the CLI to the newest versions as of yesterday, November 13th, 2021.

Animated webp works great in managed app. When moving to EAS animated webp don’t render at all in the default <Image> component.

Anyone have this working? Is there some setting I’m missing?
Thanks.

2

Hi @gollyjer

It looks to me like animation is disabled by default:

I think you’ll need to write a Config Plugin to change this. See this for an example of how to do this:

3

I love Expo but it’s getting harder and harder to use. It makes no sense to have a feature like this disabled by default. If it’s packaged and enabled by default in Expo CLI why not in EAS CLI? We, as developers know iOS doesn’t support awebp so we send it gifs instead. Works great in managed Expo.
(sorry, venting… I’ve spent way too much time on this).

Also, not to be a jerk. :grinning:
Thanks for the idea @wodin. This looks like it might be the answer but I have no idea how to go about knowing how to troubleshoot the creation of a plugin. I’m certain I won’t get it correct the first time.

4

Here’s an example of how to write your own plugin and use it in your app:

The one you need will be much simpler and almost identical to the one I mentioned in my last comment.

You can use expo prebuild to test that the resulting android/gradle.properties looks right. But make sure you have everything committed to Git before running expo prebuild, so that you can revert all of the changes that expo prebuild makes.

5

OK! I got it. Couldn’t figure out how to make it work as a typescript file with es6 import/export but this is where I ended up.

  • Add config_plugins folder at the top level of the app.
  • Add a withAnimatedWebp.js file into the folder.
  • Add "plugins": ["./config_plugins/withAnimatedWebp"], to app.json.
// 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');

Now onto the real bug challenges. Thanks @wodin!

1 Like