Display Animated WebP Images in React Native

Display Animated WebP Images in React Native

Display Animated WebP images in React Native the hacky way, support for Android & iOS both

💃đŸģ react-native-animated-webp

example animated player

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>
  );
};

Download Details:

Author: junhoyeo Download Link: Download The Source Code Official Website: https://github.com/junhoyeo/react-native-animated-webp License: MIT

react-native webp images

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

How much does it cost to develop a React Native mobile app?

Save time & money when choosing AppClues for React Native Mobile app Development. We build React Native apps for Android & iOS using the same code & provide optimal output.

Hire Dedicated React Native Developers - WebClues Infotech

WebClues Infotech is a expert in building iOS, Android Apps, Web apps , Websites, Enterprise solutions. We have crafted many complex and innovative projects that meets our customer expectations.