Animated Images
React Native Skia supports animated images. Supported formats are GIF and animated WebP.
Using Reanimated
If you use Reanimated, we offer a useAnimatedImageValue
hook that does everything automatically. useAnimatedImageValue
returns a shared value that automatically updates on every frame.
In the example below, we display and animate a GIF using Reanimated. The shared value is first null, and once the image is loaded, it will update with an SkImage
object on every frame.
tsx
importReact from "react";import {Canvas ,Image ,useAnimatedImageValue ,} from "@shopify/react-native-skia";export constAnimatedImages = () => {// This can be an animated GIF or WebP fileconstbird =useAnimatedImageValue (require ("../../assets/birdFlying.gif"));return (<Canvas style ={{width : 320,height : 180,}}><Image image ={bird }x ={0}y ={0}width ={320}height ={180}fit ="contain"/></Canvas >);};
tsx
importReact from "react";import {Canvas ,Image ,useAnimatedImageValue ,} from "@shopify/react-native-skia";export constAnimatedImages = () => {// This can be an animated GIF or WebP fileconstbird =useAnimatedImageValue (require ("../../assets/birdFlying.gif"));return (<Canvas style ={{width : 320,height : 180,}}><Image image ={bird }x ={0}y ={0}width ={320}height ={180}fit ="contain"/></Canvas >);};
Manual API
To load an image as a SkAnimatedImage
object, we offer a useAnimatedImage
hook:
tsx
import {useAnimatedImage } from "@shopify/react-native-skia";// bird is an SkAnimatedImageconstbird =useAnimatedImage (require ("../../assets/birdFlying.gif"))!;// SkAnimatedImage offers 3 methods: decodeNextFrame(), getCurrentFrame(), and currentFrameDuration()// getCurrentFrame() returns a regular SkImageconstimage =bird .getCurrentFrame ();// decode the next framebird .decodeNextFrame ();// fetch the current frame numberconstcurrentFrame =bird .currentFrameDuration ();
tsx
import {useAnimatedImage } from "@shopify/react-native-skia";// bird is an SkAnimatedImageconstbird =useAnimatedImage (require ("../../assets/birdFlying.gif"))!;// SkAnimatedImage offers 3 methods: decodeNextFrame(), getCurrentFrame(), and currentFrameDuration()// getCurrentFrame() returns a regular SkImageconstimage =bird .getCurrentFrame ();// decode the next framebird .decodeNextFrame ();// fetch the current frame numberconstcurrentFrame =bird .currentFrameDuration ();