Animated WebP support.

[pewh]

[wodCZ]

Hi, as stated in README.md of this library, this is just wrapper around SDWebImage for iOS, which claims to support animated WebP, and Glide for Android, which seems to be problematic. You can give it a try and let others know.

[peteroid]

Just after some more tests, showing webp on android seems not supported but works fine on iOS.

[DylanVann]

Yeah I think the current answer is probably a no. If you want to make a case for adding support a new issue can be opened.

Animated gifs are supported, maybe you can use those.

[DylanVann]

I'm going to turn this issue into a feature request. Seems like it might be possible at some point.

[eGust]

@peteroid Hi there, could you please give more information about your tests? I can't display any webp image in my project.

I ejected my project to pure RN, generated Podfile with pod 'SDWebImage/WebP' and built it with Xcode. My test is very simple:

import React from 'react';
import FastImage from 'react-native-fast-image';

const source = {
  uri: 'https://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334',
};

export default () => (
  <FastImage source={source} />
);

It shows nothing. I also use FastImage in the same project for remote JPGs and local GIFs and it works well with them. So I am wondering did I miss something?

---

BTW, I tried the native code with SDWebImage it works fine:

Podfile

project './test-webp.xcodeproj/'

# Uncomment the next line to define a global platform for your project
platform :ios, '10.0'

target 'test-webp' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for test-webp
  pod 'SDWebImage'
  pod 'SDWebImage/WebP'

end

ViewController.swift

import UIKit
import SDWebImage

class ViewController: UIViewController {
    @IBOutlet weak var imgView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        imgView.sd_setImage(with: URL(string: "https://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334"));
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

[DylanVann]

Animated WebP works well in iOS currently. It does not work well on Android. We rely on Glide for support though so it doesn't seem possible to fix on our end.

[theFong]

#542 Adds android support for animated webp using Glide integration library https://github.com/zjupure/GlideWebpDecoder

[ksushiva]

Adding the following to the build.gradle adds WebP support:

def GLIDE_VERSION = "4.9.0" // Needs to match the one defined in Fast Image build.gradle
implementation "com.zlc.glide:webpdecoder:1.6.${GLIDE_VERSION}"

[acerbastimur]

are we be able to use animated WebP on Android now ?

[bigorangemachine]

@acerbastimur

I got it working based on this PR (#542) (React-Native 0.61.5)

I added the following to android/app/build.gradle

    implementation "com.zlc.glide:webpdecoder:1.5.4.9.0"

Note: If this library ups its version you'll have to match the 4.9.0 part. Any future googlers refer to this line in the build.grade (or refer to this file for the most recent version).

Specifically

def _glideVersion = safeExtGet("glideVersion", "4.9.0")

[gustavoggs]

Here is a list of glide webpdecoder versions: https://mvnrepository.com/artifact/com.zlc.glide/webpdecoder

[hirbod]

If any Expo user needs this, I've prepared some config-plugins for you: https://gist.github.com/Hirbod/07c6641970c9406ff35a7271dda1f01c

[MadCoderNS]

Just wanted to inform, the library has changed their group id, you now need to put this:

implementation "com.github.zjupure:webpdecoder:2.1.${GLIDE_VERSION}"

[KishorJena]

FastImage 8.6 uses glide version 4.12.0 -> https://github.com/DylanVann/react-native-fast-image/blob/9ab80fcd570b7f56da66ab20e52c9a35934067c9/android/build.gradle#L60 The webp decoder library suggest to use 2.3.(glide version). read at https://github.com/zjupure/GlideWebpDecoder

And the version compatibility list on https://mvnrepository.com/artifact/com.github.zjupure/webpdecoder : 2.3.x

4.13.2 4.14.2 4.15.1

and if we consider glide version used in FastImage then compatible versions are. if keep the 4.12.0 as used in FastImage 8.6.3 then the valid version numbers of com.github.zjupure:webpdecoder: are

2.0 : 2.0.4.12.0 2.1 : 2.1.4.12.0 2.2 : 2.2.4.12.0

I tried both type of versions nothing worked.

[mu-moo]

Maybe I'm wrong, but from the readme.md:

The version rule of GlideWebpDecoder is "{major_version}.{glide_version}". For example, if you use glide 4.15.0, the corresponding version of GlideWebpDecoder should be 2.0.4.15.0

Library will only follow the latest three version of Glide. If you use a lower version glide, please clone the project and modify it yourself.

So 2.3.4.12.x (or some later major version version with ...12.x) would need to be cloned and modified, unless Fastimage can use 4.15.1 (or 4.13.1 at least).

[KishorJena]

This solution works like a charm. 👍🏼 🍭 😃

Solution 1: zjupure:webpdecoder

def glideVersion = safeExtGet('glideVersion', '4.12.0')
implementation "com.github.zjupure:webpdecoder:2.2.${glideVersion}"

Solution 2: APNG4Android

(supports APNG, AWEBP, AVIF, GIF)

implementation 'com.github.penfeizhou.android.animation:glide-plugin:2.28.0'
// Check the official documentation for the specific decoder.

Solution 3: Upgrade Glide version (No 3rd party plugin)

Glide 4.14.0 : changelog

Enable animated WebP Decoding on P+ using framework APIs

Changing Glide version to 4.14.0 or 4.16.0(I have tried) in gradle of FastImage supports animated webp without any third party plugins

- For Android P+

def glideVersion = safeExtGet('glideVersion', '4.16.0')
...

- For older Android versions compatibility, use webpdecoder with Glide 2.16.0

implementation "com.github.zjupure:webpdecoder:2.6.${glideVersion}"

Troubleshooting In my app, the animation does not start even after adding plugins or using Glide version 4.16.0. I found that using cache:'web' starts the animation.

<FastImage source={{uri: uri, cache: 'web'}}/>