We have animated webp files working great in our React Native app using the default <Image> component.
We were hoping to benefit from some of the caching extras built into react-native-fast-image. However, it works great for everything except awebp files; which we have a lot of.
There are plenty of solutions in the github issues but we can't get any of them to work.
Is there a verified way to get awebp working?
I've created some config plugins for Expo (one based on your work) which might be helpful:
https://gist.github.com/Hirbod/07c6641970c9406ff35a7271dda1f01c
Adding support for animated webP using FastImage is super easy. The Config Plugins just add 3 lines of code inside of AppDelegate.m and a single implementation line inside of android/app/build.gradle
That's it for animated webp support with FastImage.
TL;DR:
Android: add following to your android/app/build.gradle
implementation "com.github.zjupure:webpdecoder:2.0.4.12.0
iOS: Open your AppDelegate.m and right after the first AppDelegate.h import, add following:
#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>
Scroll down a little bit (same file) until you find this launching identifier:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
And add following after the {:
[SDImageCodersManager.sharedManager addCoder: SDImageWebPCoder.sharedCoder];
That's it. Rebuild your projects (re-run gradlew) and you have FastImage animated webP support.
P.S: when you need APNG + animated webP Support on Android, add this implementation instead:
implementation 'com.github.penfeizhou.android.animation:glide-plugin:2.17.0'
There is now expo-image. Use it and forget all the headaches.
https://docs.expo.dev/versions/unversioned/sdk/image/
