@shopify/react-native-skia 0.1.210 → 0.1.212

package/lib/typescript/src/skia/web/JsiSkAnimatedImageFactory.d.ts

@@ -0,0 +1,9 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { SkData } from "../types";
+import type { AnimatedImageFactory } from "../types/AnimatedImage/AnimatedImageFactory";
+import { Host } from "./Host";
+import { JsiSkAnimatedImage } from "./JsiSkAnimatedImage";
+export declare class JsiSkAnimatedImageFactory extends Host implements AnimatedImageFactory {
+    constructor(CanvasKit: CanvasKit);
+    MakeAnimatedImageFromEncoded(encoded: SkData): JsiSkAnimatedImage | null;
+}

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.210",
+  "version": "0.1.212",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/external/reanimated/moduleWrapper.ts

@@ -1,12 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useMemo } from "react";
 
 import type { SharedValueType } from "../../renderer/processors/Animations";
 
 // This one is needed for the deprecated useSharedValue function
 // We can remove it once we remove the deprecation
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 let Reanimated2: any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 let Reanimated3: any;
 let reanimatedVersion: string;
 
@@ -26,7 +27,7 @@ try {
 export const HAS_REANIMATED2 = !!Reanimated2;
 export const HAS_REANIMATED3 = !!Reanimated3;
 
-function throwOnMissingReanimated2() {
+export function throwOnMissingReanimated() {
   if (!HAS_REANIMATED2) {
     throw new Error(
       "Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \
@@ -41,17 +42,17 @@ function throwOnMissingReanimated3() {
       `Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`
     );
   }
-  throwOnMissingReanimated2();
 }
 
 export const useSharedValue =
   Reanimated2?.useSharedValue ||
   ((value: number) => useMemo(() => ({ value }), [value]));
+export const useFrameCallback: (...args: any[]) => any =
+  Reanimated2?.useFrameCallback || throwOnMissingReanimated;
 
-export const startMapper =
-  Reanimated2?.startMapper || throwOnMissingReanimated2;
-export const stopMapper = Reanimated2?.stopMapper || throwOnMissingReanimated2;
-export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated2;
+export const startMapper = Reanimated2?.startMapper || throwOnMissingReanimated;
+export const stopMapper = Reanimated2?.stopMapper || throwOnMissingReanimated;
+export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;
 export const isSharedValue = <T>(
   value: unknown
 ): value is SharedValueType<T> => {

package/src/skia/core/AnimatedImage.ts

@@ -0,0 +1,63 @@
+import {
+  throwOnMissingReanimated,
+  useFrameCallback,
+  useSharedValue,
+} from "../../external/reanimated/moduleWrapper";
+import { Skia } from "../Skia";
+import type { DataSourceParam } from "../types";
+
+import { useRawData } from "./Data";
+
+const animatedImgFactory = Skia.AnimatedImage.MakeAnimatedImageFromEncoded.bind(
+  Skia.AnimatedImage
+);
+
+/**
+ * Returns a Skia Animated Image object
+ * */
+export const useAnimatedImage = (
+  source: DataSourceParam,
+  onError?: (err: Error) => void
+) => useRawData(source, animatedImgFactory, onError);
+
+const DEFAULT_FRAME_DURATION = 60;
+
+export const useAnimatedImageValue = (source: DataSourceParam) => {
+  throwOnMissingReanimated();
+  const currentFrame = useSharedValue(null);
+  const lastTimestamp = useSharedValue(0);
+  const animatedImage = useAnimatedImage(source, (err) => {
+    console.error(err);
+    throw new Error(`Could not load animated image - got '${err.message}'`);
+  });
+  const frameDuration =
+    animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useFrameCallback((frameInfo: any) => {
+    if (!animatedImage) {
+      currentFrame.value = null;
+      return;
+    }
+
+    const { timestamp } = frameInfo;
+    const elapsed = timestamp - lastTimestamp.value;
+
+    // Check if it's time to switch frames based on GIF frame duration
+    if (elapsed < frameDuration) {
+      return;
+    }
+
+    // Update the current frame
+    animatedImage.decodeNextFrame();
+    if (currentFrame.value) {
+      currentFrame.value.dispose();
+    }
+    currentFrame.value = animatedImage.getCurrentFrame();
+
+    // Update the last timestamp
+    lastTimestamp.value = timestamp;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, true);
+  return currentFrame;
+};

package/src/skia/core/Font.ts

@@ -9,20 +9,20 @@ import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProv
 
 import { useTypeface } from "./Typeface";
 
+const defaultFontSize = 14;
+
 /**
  * Returns a Skia Font object
  * */
 export const useFont = (
   font: DataSourceParam,
-  size?: number,
+  size = defaultFontSize,
   onError?: (err: Error) => void
 ) => {
   const typeface = useTypeface(font, onError);
   return useMemo(() => {
-    if (typeface && size) {
+    if (typeface) {
       return Skia.Font(typeface, size);
-    } else if (typeface && !size) {
-      return Skia.Font(typeface);
     } else {
       return null;
     }
@@ -52,7 +52,7 @@ interface RNFontStyle {
 
 const defaultFontStyle: RNFontStyle = {
   fontFamily: "System",
-  fontSize: 14,
+  fontSize: defaultFontSize,
   fontStyle: "normal",
   fontWeight: "normal",
 };

package/src/skia/core/index.ts

@@ -2,6 +2,7 @@ export * from "./Data";
 export * from "./Font";
 export * from "./Typeface";
 export * from "./Image";
+export * from "./AnimatedImage";
 export * from "./Picture";
 export * from "./SVG";
 export * from "./Vector";

package/src/skia/types/AnimatedImage/AnimatedImage.ts

@@ -0,0 +1,29 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkImage } from "../Image";
+
+export interface SkAnimatedImage extends SkJSIInstance<"AnimatedImage"> {
+  /**
+   *  Decode the next frame.
+   *
+   *  If the animation is on the last frame or has hit an error, returns
+   *  kFinished (-1).
+   */
+  decodeNextFrame(): number;
+
+  /**
+   *  Returns the current frame as an SkImage. The SkImage will not change
+   *  after it has been returned.
+   *  If there is no current frame, null will be returned.
+   */
+  getCurrentFrame(): SkImage | null;
+
+  /**
+   *  How long to display the current frame.
+   *
+   *  Useful for the first frame, for which decodeNextFrame is called
+   *  internally.
+   */
+  currentFrameDuration(): number;
+
+  // TODO - add the rest of the methods from the Skia API (see SkAnimatedImage.h)
+}

package/src/skia/types/AnimatedImage/AnimatedImageFactory.ts

@@ -0,0 +1,15 @@
+import type { SkData } from "../Data";
+
+import type { SkAnimatedImage } from "./AnimatedImage";
+
+export interface AnimatedImageFactory {
+  /**
+   * Decodes the given bytes into an animated image. Returns null if the bytes were invalid.
+   * The passed in bytes will be copied into the WASM heap, so the caller can dispose of them.
+   *
+   * The returned AnimatedImage will be "pointing to" the first frame, i.e. currentFrameDuration
+   * and makeImageAtCurrentFrame will be referring to the first frame.
+   * @param encoded
+   */
+  MakeAnimatedImageFromEncoded: (encoded: SkData) => SkAnimatedImage | null;
+}

package/src/skia/types/AnimatedImage/index.ts

@@ -0,0 +1,2 @@
+export * from "./AnimatedImage";
+export * from "./AnimatedImageFactory";

package/src/skia/types/Skia.ts

@@ -28,6 +28,8 @@ import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
 import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
+import type { AnimatedImageFactory } from "./AnimatedImage";
+
 /**
  * Declares the interface for the native Skia API
  */
@@ -78,6 +80,7 @@ export interface Skia {
   ): SkVertices;
   Data: DataFactory;
   Image: ImageFactory;
+  AnimatedImage: AnimatedImageFactory;
   SVG: SVGFactory;
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;

package/src/skia/types/index.ts

@@ -6,6 +6,7 @@ export * from "./Vertices";
 export * from "./RuntimeEffect";
 export * from "./Shader";
 export * from "./Image";
+export * from "./AnimatedImage";
 export * from "./ColorFilter";
 export * from "./ImageFilter";
 export * from "./Font";

package/src/skia/web/JsiSkAnimatedImage.ts

@@ -0,0 +1,35 @@
+import type { AnimatedImage, CanvasKit } from "canvaskit-wasm";
+
+import type { SkAnimatedImage } from "../types/AnimatedImage";
+
+import { HostObject } from "./Host";
+import { JsiSkImage } from "./JsiSkImage";
+
+export class JsiSkAnimatedImage
+  extends HostObject<AnimatedImage, "AnimatedImage">
+  implements SkAnimatedImage
+{
+  constructor(CanvasKit: CanvasKit, ref: AnimatedImage) {
+    super(CanvasKit, ref, "AnimatedImage");
+  }
+
+  decodeNextFrame() {
+    return this.ref.decodeNextFrame();
+  }
+
+  currentFrameDuration() {
+    return this.ref.currentFrameDuration();
+  }
+
+  getCurrentFrame() {
+    const image = this.ref.makeImageAtCurrentFrame();
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+
+  dispose = () => {
+    this.ref.delete();
+  };
+}

package/src/skia/web/JsiSkAnimatedImageFactory.ts

@@ -0,0 +1,27 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData } from "../types";
+import type { AnimatedImageFactory } from "../types/AnimatedImage/AnimatedImageFactory";
+
+import { Host } from "./Host";
+import { JsiSkData } from "./JsiSkData";
+import { JsiSkAnimatedImage } from "./JsiSkAnimatedImage";
+
+export class JsiSkAnimatedImageFactory
+  extends Host
+  implements AnimatedImageFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeAnimatedImageFromEncoded(encoded: SkData) {
+    const image = this.CanvasKit.MakeAnimatedImageFromEncoded(
+      JsiSkData.fromValue(encoded)
+    );
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkAnimatedImage(this.CanvasKit, image);
+  }
+}

package/src/skia/web/JsiSkia.ts

@@ -39,6 +39,7 @@ import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFactory";
 import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
+import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -98,6 +99,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   MakeVertices: MakeVertices.bind(null, CanvasKit),
   Data: new JsiSkDataFactory(CanvasKit),
   Image: new JsiSkImageFactory(CanvasKit),
+  AnimatedImage: new JsiSkAnimatedImageFactory(CanvasKit),
   SVG: new JsiSkSVGFactory(CanvasKit),
   TextBlob: new JsiSkTextBlobFactory(CanvasKit),
   XYWHRect: (x: number, y: number, width: number, height: number) => {