Animated webP: An Expo Config Plugin for you

[hirbod]

If anybody needs animated webP support with Expo (Custom Dev Client):

Android

// create a file like plugins/withAnimatedWebPSupport.js

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

const withAnimatedWebPSupport = (config) => {

    const propertyToModify = {
        type: 'property',
        key: 'expo.webp.animated',
        value: true,
    };

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

        config.modResults.push(propertyToModify);

        return config;
    });
};

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

iOS

// create a plugins/withFastImageWebPSupportIOS.js
const {
    WarningAggregator,
    withAppDelegate,
    createRunOncePlugin
} = require('@expo/config-plugins');


const RNFI_EXPO_WEBP_IMPORT = `#import "AppDelegate.h"
// expo-config-plugin fast-image webp animated support
#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>
// end config plugin
`

const RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_IDENTIFIER = `- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{`

const RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_CODE = `
// start expo-config-plugin fast-image webp animated support
[SDImageCodersManager.sharedManager addCoder: SDImageWebPCoder.sharedCoder];
// end expo-config-plugin fast-image webp animated support
`

function modifyAppDelegate(appDelegate) {
    if (!appDelegate.includes(RNFI_EXPO_WEBP_IMPORT)) {
        appDelegate = appDelegate.replace(
            /#import "AppDelegate.h"/g,
            RNFI_EXPO_WEBP_IMPORT,
        );
    }
    if (appDelegate.includes(RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_IDENTIFIER)) {
        const block = RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_IDENTIFIER + RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_CODE
        appDelegate = appDelegate.replace(RNFI_EXPO_WEBP_DID_FINISH_LAUNCHING_IDENTIFIER, block)
    } else {
        throw new Error('Failed to detect didFinishLaunchingWithOptions in AppDelegate.m')
    }
    return appDelegate
}

const withFastImageWebPSupportIOS = (config) => {
    return withAppDelegate(config, (config) => {
        if (config.modResults.language === 'objc') {
            config.modResults.contents = modifyAppDelegate(config.modResults.contents)
        } else {
            WarningAggregator.addWarningIOS('withFastImageWebPSupportIOSAppDelegate', 'Swift AppDelegate files are not supported yet.')
        }
        return config
    })
}

module.exports = createRunOncePlugin(withFastImageWebPSupportIOS, 'rnfi-expo-animated-webp-support', '1.0.0');

Install plugin in your app.json / app.config.js (expo.plugins)

    ['./plugins/withAnimatedWebPSupport'],
    ['./plugins/withFastImageWebPSupportIOS.js'],

Credits:

Based on other config plugins by @wodin, @barthap, @EvanBacon and @nandorojo
Thanks guys!

Native <Image> component by RN

In case you only need native <Image /> support, just install this package:
https://github.com/Aleksefo/react-native-webp-format

and only use the withAnimatedWebPSupport Plugin for Android.