12

Display Animated WebP images in React Native

 3 years ago
source link: https://reactnativeexample.com/display-animated-webp-images-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

react-native-animated-webp

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

react-native-animated-webp

📦 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>
  );
};
React TSX

GitHub

https://github.com/junhoyeo/react-native-animated-webp


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK