💃🏻 react-native-animated-webp

Display and control Animated WebP images in React Native the hacky way

📦 Installation

👋 PeerDependencies first

This module uses react-native-fast-image for rendering images, so you should install it first besides with react and react-native.

npm install react-native-fast-image
# Or using yarn
yarn add react-native-fast-image

🙌 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

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import AnimatedPlayer, { IAnimatedPlayerReference } from 'react-native-animated-webp';

import thumbnailImage from '../assets/thumbnail.png';
import animatedWebPImage from '../assets/animated.webp';

const App: React.FC = () => {
  const playerRef = useRef<IAnimatedPlayerReference>();

  const onPressButton = () => {
    if(!playerRef.current?.isPlaying) {
      playerRef.current?.play(() => console.log('callback after play ended'));
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <AnimatedPlayer
        ref={playerRef}
        thumbnailSource={thumbnailImage}
        animatedSource={animatedWebPImage}
        duration={500}
        autoplay={false}
        loop={false}
      />
      <Button
        title="Click Me"
        onPress={onPressButton}
      />
    </View>
  );
};