💃🏻 react-native-animated-webp
Display and control Animated WebP images in React Native the hacky way
📦 Installation
🙌 The package
npm install react-native-animated-webp# Or using yarn yarn add react-native-animated-webp
🍭 For Android
Add dependencies for fresco, which adds native support for Animated WebP at android/app/build.gradle.
Since FastImage
is not working well for Animated WebP(maybe issue of Glide?), we internally use the native Image
component for android platforms.
dependencies {+ implementation 'com.facebook.fresco:fresco:2.0.0'+ implementation 'com.facebook.fresco:animated-webp:+'+ implementation 'com.facebook.fresco:webpsupport:+' implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor }}
For iOS
Add the following three lines inside your project's ios/{YourAppName}/AppDelegate.m file for Animated WebP support.
+ #import "SDImageCodersManager.h"+ #import <SDWebImageWebPCoder/SDImageWebPCoder.h> ﹣ (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ // . . . + [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder]; // . . .}
🥁 Usage
;;; ;;