Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Animated webP: An Expo Config Plugin for you #858

hirbod started this conversation in General
Discussion options

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.

You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /