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

Angrist

WebP support is very poor: caniuse.com/#feat=webp – Waterhouse

This link compares only for desktops, I guess this issue remains unsolved – Acquittance

hi @Sivajee Battina have you got any solution that how to convert the Images into WebP format in react-native – Sogdiana

No @VenkateshVaddadi, nothing worked. As a solution, we went on using a different format. – Angrist

@DenysSéguret he asked for React Native support. caniuse.com won't apply there because that's browser. Reac Native is mobile development. – Chesterchesterfield

Answer 1

I was able to add webp support to my react native app using the linked medium article and repo

1. yarn add TGPSKI/react-native-webp-support
2. Open your project in Xcode
3. Add WebP.framework and WebPDemux.framework from node_modules/react-native- webp-support/ to your project files (Right click your project and select "Add Files to ...")
4. Add WebP.framework and WebPDemux.framework to your Linked Frameworks and Libraries in the General tab of your main project target
5. Add “$(SRCROOT)/../node_modules/react-native-webp-support” to your Framework Search Paths, located in the Build Settings tab of your main project target
6. Add $(SRCROOT)/../node_modules/react-native-webp-support to your Header Search Paths, located in the Build Settings tab of your main project target
7. Add ReactNativeWebp.xcodeproj from node_modules/react-native-webp-support/ to your project files (Right click your project and select "Add Files to ...")
8. Add libReactNatveWebp.a to your Link Binary with Libraries step, located in the Build Phases tab of your main project target
9. Build a new binary, and use .webp formatted images

https://medium.com/@tgpski/react-native-webp-reducing-bundle-binary-sizes-increase-speed-with-webp-image-format-aa9b1aa11405

https://github.com/TGPSKI/react-native-webp-support

Giddens

I am using RN 0.60.5 and this is not working. I cannot even build. – Bistre

@aung-myint-thein You may want to ask a question with the specific error message you are getting. – Giddens

Answer 2

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];

    // . . .
}

Coordination

Answer 3

I've published a new WebP integration library that should help your issue.

It supports the latest React Native version, Cacaopods and auto-linking and has better native libraries for a performance boost.

Please check it out https://github.com/Aleksefo/react-native-webp-format

Disgraceful

I just used this with RN v0.72.2. It didn't work. Note that I'm using it with remote images via uri – Mackenzie