react-native-skia
react-native-skia copied to clipboard
Animated GIF support
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
CanvasKit provides supports for GIF and we might align there. This is still under discussion, we will circle back to this issue soon.
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.
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?
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 React-native really lacks gif functionalities e.g. pausing and perfomance upgrades. Would be really cool to see this working using skia 🙂
it's shipped now https://shopify.github.io/react-native-skia/docs/animated-images 🥳 (built by @dcarubia)
That's cool, thanks! 🙌