How to support WebP images in react native?

user_4679109 0
Viewed 10419

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

webp react-native ios
3 Answers

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

user_23012610

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

    // . . .
}
user_80825590

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

user_86976750
Related