fix(🏞️): add getFrameCount to animated images (#2568)

Shopify · Aug 7, 2024 · 682b32a · 682b32a
1 parent 30c1284
commit 682b32a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/docs/docs/animated-images.md b/docs/docs/animated-images.md
@@ -102,11 +102,13 @@ import {useAnimatedImage} from "@shopify/react-native-skia";
 const bird = useAnimatedImage(
   require("../../assets/birdFlying.gif")
 )!;
-// SkAnimatedImage offers 3 methods: decodeNextFrame(), getCurrentFrame(), and currentFrameDuration()
+// SkAnimatedImage offers 4 methods: decodeNextFrame(), getCurrentFrame(), currentFrameDuration(), and getFrameCount()
 // getCurrentFrame() returns a regular SkImage
 const image = bird.getCurrentFrame();
 // decode the next frame
 bird.decodeNextFrame();
 // fetch the current frame number
 const currentFrame = bird.currentFrameDuration();
+// fetch the total number of frames
+const frameCount = bird.getFrameCount();
 ```
diff --git a/package/cpp/api/JsiSkAnimatedImage.h b/package/cpp/api/JsiSkAnimatedImage.h
@@ -35,6 +35,10 @@ class JsiSkAnimatedImage
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }
 
+  JSI_HOST_FUNCTION(getFrameCount) {
+    return static_cast<int>(getObject()->getFrameCount());
+  }
+
   JSI_HOST_FUNCTION(currentFrameDuration) {
     return static_cast<int>(getObject()->currentFrameDuration());
   }
@@ -43,9 +47,10 @@ class JsiSkAnimatedImage
     return static_cast<int>(getObject()->decodeNextFrame());
   }
 
-  EXPORT_JSI_API_TYPENAME(JsiSkAnimatedImage, "AnimatedImage")
+  EXPORT_JSI_API_TYPENAME(JsiSkAnimatedImage, AnimatedImage)
 
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkAnimatedImage, dispose),
+                       JSI_EXPORT_FUNC(JsiSkAnimatedImage, getFrameCount),
                        JSI_EXPORT_FUNC(JsiSkAnimatedImage, getCurrentFrame),
                        JSI_EXPORT_FUNC(JsiSkAnimatedImage,
                                        currentFrameDuration),

diff --git a/package/src/renderer/__tests__/e2e/AnimatedImages.spec.tsx b/package/src/renderer/__tests__/e2e/AnimatedImages.spec.tsx
@@ -15,6 +15,11 @@ describe("Animated Images", () => {
       if (!animatedImage) {
         return false;
       }
+
+      if (animatedImage.getFrameCount() !== 1) {
+        return false;
+      }
+
       animatedImage.decodeNextFrame();
       animatedImage.getCurrentFrame();
       animatedImage.currentFrameDuration();

diff --git a/package/src/skia/types/AnimatedImage/AnimatedImage.ts b/package/src/skia/types/AnimatedImage/AnimatedImage.ts
@@ -25,5 +25,11 @@ export interface SkAnimatedImage extends SkJSIInstance<"AnimatedImage"> {
    */
   currentFrameDuration(): number;
 
+  /**
+   *  Returns the number of frames in the animation.
+   *
+   */
+  getFrameCount(): number;
+
   // TODO - add the rest of the methods from the Skia API (see SkAnimatedImage.h)
 }
diff --git a/package/src/skia/web/JsiSkAnimatedImage.ts b/package/src/skia/web/JsiSkAnimatedImage.ts
@@ -21,6 +21,10 @@ export class JsiSkAnimatedImage
     return this.ref.currentFrameDuration();
   }
 
+  getFrameCount() {
+    return this.ref.getFrameCount();
+  }
+
   getCurrentFrame() {
     const image = this.ref.makeImageAtCurrentFrame();
     if (image === null) {