How to support WebP images in react native?

Question

I have to show .WebP image extension images in my react-native app. I'm running on iOS and it's not displaying any image. I googled and found some information saying that webP images won't support on iOS and need to use a library or have to write an extension to support that. I used this react-native library to support webP. Still, I'm not getting. Can someone please advice on this? How to do that?

Note: Please don't mark this as a duplicate. I already checked StackOverflow and didn't find the answer. The issue might similar to webp images problem-stackoverflow

Answer 1

Use https://github.com/DylanVann/react-native-fast-image this package . I too was having issue loading .webp images on IOS I used this which has added support for .webp images which solved my issue.

According to the repo you must be using React Native 0.60.0 or higher to use the most recent version of react-native-fast-image.

If the image still doesn't load try making this changes on you AppDelegate.m as suggested on this issue https://github.com/DylanVann/react-native-fast-image/issues/522:

#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // . . .

    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];

    // . . .
}