react-native-skia icon indicating copy to clipboard operation
react-native-skia copied to clipboard

Animated GIF support

Open laurens-lamberts opened this issue 2 years ago • 1 comments

I think it would be great to be able to render animated GIF's with react-native-skia. For our project, we'd like to draw an transparent animated GIF on top of another image, such as this; https://user-images.githubusercontent.com/48212886/177527038-d3409d60-fc41-46d1-9f2b-f4f986d27bf1.mov

The react native Image component does not support animated GIF on Android by default (source). It would be nice if react-native-skia would support this without any additional build.gradle changes (if possible).

Maybe this is helpful; Skia animated_gif.cpp

laurens-lamberts avatar Jul 06 '22 10:07 laurens-lamberts

CanvasKit provides supports for GIF and we might align there. This is still under discussion, we will circle back to this issue soon.

wcandillon avatar Jul 11 '22 13:07 wcandillon

Hey @wcandillon! I'm interested in this ticket as well. Has your team discussed the feasibility of introducing this to the project? Or do you have 3rd party library recommendations for an approach?

I'm imagining a component or utility that decodes each frame of a .gif, .apng, etc. into an array of SkBitmaps. Transformations could then be made to every SkBitmap declaratively.

jayeve avatar Mar 13 '23 21:03 jayeve

There is an API in Skia that would support gif: https://github.com/google/skia/blob/main/include/android/SkAnimatedImage.h And you can see how CanvasKit uses it: https://github.com/google/skia/blob/main/modules/canvaskit/canvaskit_bindings.cpp#L943

However this is not in our current roadmap, @jayeve is your use case similar to the one described by @laurens-lamberts? Or you have other use-cases in mind? Would you be interested to contribute the feature to Skia? Have you looked at JS libraries such as https://github.com/matt-way/gifuct-js for this?

wcandillon avatar Mar 14 '23 09:03 wcandillon

Thank you for the pointers @wcandillon. I will take a look at these primitives and the github project.

Yes, the use case is similar to @laurens-lamberts, and I'm leaning towards using react-native-skia as the guiding library to develop this feature. As for contributing, I'll attempt to develop in a way that could later be upstreamed to this project.

jayeve avatar Mar 14 '23 21:03 jayeve

@jayeve React-native really lacks gif functionalities e.g. pausing and perfomance upgrades. Would be really cool to see this working using skia 🙂

gmferraz avatar Jul 10 '23 15:07 gmferraz

it's shipped now https://shopify.github.io/react-native-skia/docs/animated-images 🥳 (built by @dcarubia)

wcandillon avatar Sep 28 '23 19:09 wcandillon

That's cool, thanks! 🙌

laurens-lamberts avatar Oct 02 '23 09:10 laurens-lamberts