How to enable animated webp (awebp) in React Native Fast Image?

Question

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?

Answer 1

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'

Answer 2

There is now expo-image. Use it and forget all the headaches.
https://docs.expo.dev/versions/unversioned/sdk/image/