-
Notifications
You must be signed in to change notification settings - Fork 1.5k
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 3
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment