react-native-skia 0.0.1 → 2.15.0

package/lib/module/external/reanimated/useVideo.js

@@ -0,0 +1,142 @@
+import { useEffect, useMemo } from "react";
+import { Platform } from "../../Platform";
+import Rea from "./ReanimatedProxy";
+import { useVideoLoading } from "./useVideoLoading";
+const copyFrameOnAndroid = currentFrame => {
+  "worklet";
+
+  // on android we need to copy the texture before it's invalidated
+  if (Platform.OS === "android") {
+    const tex = currentFrame.value;
+    if (tex) {
+      const copy = tex.makeNonTextureImage();
+      if (copy) {
+        currentFrame.value = copy;
+        tex.dispose();
+      }
+      // If copy fails, keep the original frame rather than showing black
+    }
+  }
+};
+const setFrame = (video, currentFrame) => {
+  "worklet";
+
+  const img = video.nextImage();
+  if (img) {
+    var _currentFrame$value;
+    (_currentFrame$value = currentFrame.value) === null || _currentFrame$value === void 0 || _currentFrame$value.dispose();
+    currentFrame.value = img;
+    copyFrameOnAndroid(currentFrame);
+  }
+};
+const defaultOptions = {
+  looping: true,
+  paused: false,
+  seek: null,
+  volume: 0
+};
+const useOption = value => {
+  "worklet";
+
+  const defaultValue = Rea.useSharedValue(Rea.isSharedValue(value) ? value.value : value);
+  return Rea.isSharedValue(value) ? value : defaultValue;
+};
+const disposeVideo = video => {
+  "worklet";
+
+  video === null || video === void 0 || video.dispose();
+};
+export const useVideo = (source, userOptions) => {
+  var _userOptions$paused, _userOptions$looping, _userOptions$seek, _userOptions$volume;
+  const video = useVideoLoading(source);
+  const isPaused = useOption((_userOptions$paused = userOptions === null || userOptions === void 0 ? void 0 : userOptions.paused) !== null && _userOptions$paused !== void 0 ? _userOptions$paused : defaultOptions.paused);
+  const looping = useOption((_userOptions$looping = userOptions === null || userOptions === void 0 ? void 0 : userOptions.looping) !== null && _userOptions$looping !== void 0 ? _userOptions$looping : defaultOptions.looping);
+  const seek = useOption((_userOptions$seek = userOptions === null || userOptions === void 0 ? void 0 : userOptions.seek) !== null && _userOptions$seek !== void 0 ? _userOptions$seek : defaultOptions.seek);
+  const volume = useOption((_userOptions$volume = userOptions === null || userOptions === void 0 ? void 0 : userOptions.volume) !== null && _userOptions$volume !== void 0 ? _userOptions$volume : defaultOptions.volume);
+  const currentFrame = Rea.useSharedValue(null);
+  const currentTime = Rea.useSharedValue(0);
+  const duration = useMemo(() => {
+    var _video$duration;
+    return (_video$duration = video === null || video === void 0 ? void 0 : video.duration()) !== null && _video$duration !== void 0 ? _video$duration : 0;
+  }, [video]);
+  const framerate = useMemo(() => {
+    var _video$framerate;
+    return Platform.OS === "web" ? -1 : (_video$framerate = video === null || video === void 0 ? void 0 : video.framerate()) !== null && _video$framerate !== void 0 ? _video$framerate : 0;
+  }, [video]);
+  const size = useMemo(() => {
+    var _video$size;
+    return (_video$size = video === null || video === void 0 ? void 0 : video.size()) !== null && _video$size !== void 0 ? _video$size : {
+      width: 0,
+      height: 0
+    };
+  }, [video]);
+  const rotation = useMemo(() => {
+    var _video$rotation;
+    return (_video$rotation = video === null || video === void 0 ? void 0 : video.rotation()) !== null && _video$rotation !== void 0 ? _video$rotation : 0;
+  }, [video]);
+
+  // Handle pause/play state changes
+  Rea.useAnimatedReaction(() => isPaused.value, paused => {
+    if (paused) {
+      video === null || video === void 0 || video.pause();
+    } else {
+      video === null || video === void 0 || video.play();
+    }
+  });
+
+  // Handle seek
+  Rea.useAnimatedReaction(() => seek.value, value => {
+    if (value !== null) {
+      video === null || video === void 0 || video.seek(value);
+      seek.value = null;
+    }
+  });
+
+  // Handle volume changes
+  Rea.useAnimatedReaction(() => volume.value, value => {
+    video === null || video === void 0 || video.setVolume(value);
+  });
+
+  // Handle looping changes
+  Rea.useAnimatedReaction(() => looping.value, value => {
+    video === null || video === void 0 || video.setLooping(value);
+  });
+
+  // Frame callback - simplified since native handles frame timing
+  Rea.useFrameCallback(_frameInfo => {
+    "worklet";
+
+    if (!video) {
+      return;
+    }
+    // Update current time from native player
+    currentTime.value = video.currentTime();
+    // Get the latest frame (native handles timing via CADisplayLink/etc)
+    setFrame(video, currentFrame);
+  });
+
+  // Apply initial state when video becomes available
+  useEffect(() => {
+    if (video) {
+      video.setLooping(looping.value);
+      video.setVolume(volume.value);
+      if (isPaused.value) {
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
+    return () => {
+      Rea.runOnUI(disposeVideo)(video);
+    };
+  }, [video, isPaused, looping, volume]);
+  return {
+    currentFrame,
+    currentTime,
+    duration,
+    framerate,
+    rotation,
+    size
+  };
+};
+//# sourceMappingURL=useVideo.js.map

package/lib/module/external/reanimated/useVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","Platform","Rea","useVideoLoading","copyFrameOnAndroid","currentFrame","OS","tex","value","copy","makeNonTextureImage","dispose","setFrame","video","img","nextImage","_currentFrame$value","defaultOptions","looping","paused","seek","volume","useOption","defaultValue","useSharedValue","isSharedValue","disposeVideo","useVideo","source","userOptions","_userOptions$paused","_userOptions$looping","_userOptions$seek","_userOptions$volume","isPaused","currentTime","duration","_video$duration","framerate","_video$framerate","size","_video$size","width","height","rotation","_video$rotation","useAnimatedReaction","pause","play","setVolume","setLooping","useFrameCallback","_frameInfo","runOnUI"],"sources":["useVideo.ts"],"sourcesContent":["import type { SharedValue, FrameInfo } from \"react-native-reanimated\";\nimport { useEffect, useMemo } from \"react\";\n\nimport type { SkImage, Video } from \"../../skia/types\";\nimport { Platform } from \"../../Platform\";\n\nimport Rea from \"./ReanimatedProxy\";\nimport { useVideoLoading } from \"./useVideoLoading\";\n\ntype MaybeAnimated<T> = SharedValue<T> | T;\n\ninterface PlaybackOptions {\n  looping: MaybeAnimated<boolean>;\n  paused: MaybeAnimated<boolean>;\n  seek: MaybeAnimated<number | null>;\n  volume: MaybeAnimated<number>;\n}\n\nconst copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {\n  \"worklet\";\n  // on android we need to copy the texture before it's invalidated\n  if (Platform.OS === \"android\") {\n    const tex = currentFrame.value;\n    if (tex) {\n      const copy = tex.makeNonTextureImage();\n      if (copy) {\n        currentFrame.value = copy;\n        tex.dispose();\n      }\n      // If copy fails, keep the original frame rather than showing black\n    }\n  }\n};\n\nconst setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {\n  \"worklet\";\n  const img = video.nextImage();\n  if (img) {\n    currentFrame.value?.dispose();\n    currentFrame.value = img;\n    copyFrameOnAndroid(currentFrame);\n  }\n};\n\nconst defaultOptions = {\n  looping: true,\n  paused: false,\n  seek: null,\n  volume: 0,\n};\n\nconst useOption = <T>(value: MaybeAnimated<T>) => {\n  \"worklet\";\n  const defaultValue = Rea.useSharedValue(\n    Rea.isSharedValue(value) ? value.value : value\n  );\n  return Rea.isSharedValue(value)\n    ? (value as SharedValue<T>)\n    : (defaultValue as SharedValue<T>);\n};\n\nconst disposeVideo = (video: Video | null) => {\n  \"worklet\";\n  video?.dispose();\n};\n\nexport const useVideo = (\n  source: string | null,\n  userOptions?: Partial<PlaybackOptions>\n) => {\n  const video = useVideoLoading(source);\n  const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);\n  const looping = useOption(userOptions?.looping ?? defaultOptions.looping);\n  const seek = useOption(userOptions?.seek ?? defaultOptions.seek);\n  const volume = useOption(userOptions?.volume ?? defaultOptions.volume);\n  const currentFrame = Rea.useSharedValue<null | SkImage>(null);\n  const currentTime = Rea.useSharedValue(0);\n  const duration = useMemo(() => video?.duration() ?? 0, [video]);\n  const framerate = useMemo(\n    () => (Platform.OS === \"web\" ? -1 : (video?.framerate() ?? 0)),\n    [video]\n  );\n  const size = useMemo(() => video?.size() ?? { width: 0, height: 0 }, [video]);\n  const rotation = useMemo(() => video?.rotation() ?? 0, [video]);\n\n  // Handle pause/play state changes\n  Rea.useAnimatedReaction(\n    () => isPaused.value,\n    (paused) => {\n      if (paused) {\n        video?.pause();\n      } else {\n        video?.play();\n      }\n    }\n  );\n\n  // Handle seek\n  Rea.useAnimatedReaction(\n    () => seek.value,\n    (value) => {\n      if (value !== null) {\n        video?.seek(value);\n        seek.value = null;\n      }\n    }\n  );\n\n  // Handle volume changes\n  Rea.useAnimatedReaction(\n    () => volume.value,\n    (value) => {\n      video?.setVolume(value);\n    }\n  );\n\n  // Handle looping changes\n  Rea.useAnimatedReaction(\n    () => looping.value,\n    (value) => {\n      video?.setLooping(value);\n    }\n  );\n\n  // Frame callback - simplified since native handles frame timing\n  Rea.useFrameCallback((_frameInfo: FrameInfo) => {\n    \"worklet\";\n    if (!video) {\n      return;\n    }\n    // Update current time from native player\n    currentTime.value = video.currentTime();\n    // Get the latest frame (native handles timing via CADisplayLink/etc)\n    setFrame(video, currentFrame);\n  });\n\n  // Apply initial state when video becomes available\n  useEffect(() => {\n    if (video) {\n      video.setLooping(looping.value);\n      video.setVolume(volume.value);\n      if (isPaused.value) {\n        video.pause();\n      } else {\n        video.play();\n      }\n    }\n    return () => {\n      Rea.runOnUI(disposeVideo)(video);\n    };\n  }, [video, isPaused, looping, volume]);\n\n  return {\n    currentFrame,\n    currentTime,\n    duration,\n    framerate,\n    rotation,\n    size,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/external/reanimated/useVideoLoading.d.ts

@@ -0,0 +1,4 @@
+import type { Video } from "../../skia/types";
+type VideoSource = string | null;
+export declare const useVideoLoading: (source: VideoSource) => Video | null;
+export {};

package/lib/module/external/reanimated/useVideoLoading.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { Skia } from "../../skia";
+import Rea from "./ReanimatedProxy";
+
+// Created lazily: accessing the proxy at module scope would require
+// react-native-reanimated as soon as the package is imported, and would spawn
+// the runtime even for apps that never load a video.
+let runtime;
+const getRuntime = () => {
+  if (runtime === undefined) {
+    runtime = Rea.createWorkletRuntime("video-metadata-runtime");
+  }
+  return runtime;
+};
+export const useVideoLoading = source => {
+  const {
+    runOnJS
+  } = Rea;
+  const [video, setVideo] = useState(null);
+  const cb = useCallback(src => {
+    "worklet";
+
+    const vid = Skia.Video(src);
+    runOnJS(setVideo)(vid);
+  }, [runOnJS]);
+  useEffect(() => {
+    if (source) {
+      Rea.runOnRuntime(getRuntime(), cb)(source);
+    }
+  }, [cb, source]);
+  return video;
+};
+//# sourceMappingURL=useVideoLoading.js.map

package/lib/module/external/reanimated/useVideoLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useState","Skia","Rea","runtime","getRuntime","undefined","createWorkletRuntime","useVideoLoading","source","runOnJS","video","setVideo","cb","src","vid","Video","runOnRuntime"],"sources":["useVideoLoading.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport type { WorkletRuntime } from \"react-native-reanimated\";\n\nimport type { Video } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport Rea from \"./ReanimatedProxy\";\n\n// Created lazily: accessing the proxy at module scope would require\n// react-native-reanimated as soon as the package is imported, and would spawn\n// the runtime even for apps that never load a video.\nlet runtime: WorkletRuntime | undefined;\nconst getRuntime = () => {\n  if (runtime === undefined) {\n    runtime = Rea.createWorkletRuntime(\"video-metadata-runtime\");\n  }\n  return runtime;\n};\n\ntype VideoSource = string | null;\n\nexport const useVideoLoading = (source: VideoSource) => {\n  const { runOnJS } = Rea;\n  const [video, setVideo] = useState<Video | null>(null);\n  const cb = useCallback(\n    (src: string) => {\n      \"worklet\";\n      const vid = Skia.Video(src) as Video;\n      runOnJS(setVideo)(vid);\n    },\n    [runOnJS]\n  );\n  useEffect(() => {\n    if (source) {\n      Rea.runOnRuntime(getRuntime(), cb)(source);\n    }\n  }, [cb, source]);\n  return video;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAIxD,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,GAAG,MAAM,mBAAmB;;AAEnC;AACA;AACA;AACA,IAAIC,OAAmC;AACvC,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,IAAID,OAAO,KAAKE,SAAS,EAAE;IACzBF,OAAO,GAAGD,GAAG,CAACI,oBAAoB,CAAC,wBAAwB,CAAC;EAC9D;EACA,OAAOH,OAAO;AAChB,CAAC;AAID,OAAO,MAAMI,eAAe,GAAIC,MAAmB,IAAK;EACtD,MAAM;IAAEC;EAAQ,CAAC,GAAGP,GAAG;EACvB,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAe,IAAI,CAAC;EACtD,MAAMY,EAAE,GAAGd,WAAW,CACnBe,GAAW,IAAK;IACf,SAAS;;IACT,MAAMC,GAAG,GAAGb,IAAI,CAACc,KAAK,CAACF,GAAG,CAAU;IACpCJ,OAAO,CAACE,QAAQ,CAAC,CAACG,GAAG,CAAC;EACxB,CAAC,EACD,CAACL,OAAO,CACV,CAAC;EACDV,SAAS,CAAC,MAAM;IACd,IAAIS,MAAM,EAAE;MACVN,GAAG,CAACc,YAAY,CAACZ,UAAU,CAAC,CAAC,EAAEQ,EAAE,CAAC,CAACJ,MAAM,CAAC;IAC5C;EACF,CAAC,EAAE,CAACI,EAAE,EAAEJ,MAAM,CAAC,CAAC;EAChB,OAAOE,KAAK;AACd,CAAC","ignoreList":[]}

package/lib/module/external/reanimated/useVideoLoading.web.d.ts

@@ -0,0 +1,4 @@
+import type { Video } from "../../skia/types";
+type VideoSource = string | null;
+export declare const useVideoLoading: (source: VideoSource) => Video | null;
+export {};

package/lib/module/external/reanimated/useVideoLoading.web.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+import { Skia } from "../../skia";
+export const useVideoLoading = source => {
+  const [video, setVideo] = useState(null);
+  useEffect(() => {
+    if (source) {
+      const vid = Skia.Video(source);
+      vid.then(v => setVideo(v));
+    }
+  }, [source]);
+  return video;
+};
+//# sourceMappingURL=useVideoLoading.web.js.map

package/lib/module/external/reanimated/useVideoLoading.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","Skia","useVideoLoading","source","video","setVideo","vid","Video","then","v"],"sources":["useVideoLoading.web.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport type { Video } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\ntype VideoSource = string | null;\n\nexport const useVideoLoading = (source: VideoSource) => {\n  const [video, setVideo] = useState<Video | null>(null);\n  useEffect(() => {\n    if (source) {\n      const vid = Skia.Video(source) as Promise<Video>;\n      vid.then((v) => setVideo(v));\n    }\n  }, [source]);\n  return video;\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAG3C,SAASC,IAAI,QAAQ,YAAY;AAIjC,OAAO,MAAMC,eAAe,GAAIC,MAAmB,IAAK;EACtD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAAe,IAAI,CAAC;EACtDD,SAAS,CAAC,MAAM;IACd,IAAII,MAAM,EAAE;MACV,MAAMG,GAAG,GAAGL,IAAI,CAACM,KAAK,CAACJ,MAAM,CAAmB;MAChDG,GAAG,CAACE,IAAI,CAAEC,CAAC,IAAKJ,QAAQ,CAACI,CAAC,CAAC,CAAC;IAC9B;EACF,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EACZ,OAAOC,KAAK;AACd,CAAC","ignoreList":[]}

package/lib/module/headless/index.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { SkSurface } from "../skia";
+export * from "../renderer/components";
+export * from "../skia/types";
+export declare const makeOffscreenSurface: (width: number, height: number) => SkSurface;
+export declare const getSkiaExports: () => {
+    Skia: import("../skia/types").Skia;
+};
+export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => Promise<import("../skia").SkImage>;

package/lib/module/headless/index.js

@@ -0,0 +1,36 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
+import { JsiSkApi } from "../skia/web";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+export * from "../renderer/components";
+export * from "../skia/types";
+let Skia;
+export const makeOffscreenSurface = (width, height) => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+  const surface = Skia.Surface.MakeOffscreen(width, height);
+  if (surface === null) {
+    throw new Error("Couldn't create surface!");
+  }
+  return surface;
+};
+export const getSkiaExports = () => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+  return {
+    Skia
+  };
+};
+export const drawOffscreen = async (surface, element) => {
+  const root = new SkiaSGRoot(Skia);
+  await root.render(element);
+  const canvas = surface.getCanvas();
+  root.drawOnCanvas(canvas);
+  root.unmount();
+  surface.flush();
+  return surface.makeImageSnapshot();
+};
+//# sourceMappingURL=index.js.map

package/lib/module/headless/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["JsiSkApi","SkiaSGRoot","Skia","makeOffscreenSurface","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","getSkiaExports","drawOffscreen","element","root","render","canvas","getCanvas","drawOnCanvas","unmount","flush","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport type { SkSurface } from \"../skia\";\nimport { JsiSkApi } from \"../skia/web\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\n\nexport * from \"../renderer/components\";\nexport * from \"../skia/types\";\n\nlet Skia: ReturnType<typeof JsiSkApi>;\n\nexport const makeOffscreenSurface = (width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  return surface;\n};\n\nexport const getSkiaExports = () => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  return { Skia };\n};\n\nexport const drawOffscreen = async (surface: SkSurface, element: ReactNode) => {\n  const root = new SkiaSGRoot(Skia);\n  await root.render(element);\n  const canvas = surface.getCanvas();\n  root.drawOnCanvas(canvas);\n  root.unmount();\n  surface.flush();\n  return surface.makeImageSnapshot();\n};\n"],"mappings":"AAAA;AACA;;AAKA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,oBAAoB;AAE/C,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAE7B,IAAIC,IAAiC;AAErC,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAa,EAAEC,MAAc,KAAK;EACrE,IAAI,CAACH,IAAI,EAAE;IACTA,IAAI,GAAGF,QAAQ,CAACM,SAAS,CAAC;EAC5B;EACA,MAAMC,OAAO,GAAGL,IAAI,CAACM,OAAO,CAACC,aAAa,CAACL,KAAK,EAAEC,MAAM,CAAC;EACzD,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIG,KAAK,CAAC,0BAA0B,CAAC;EAC7C;EACA,OAAOH,OAAO;AAChB,CAAC;AAED,OAAO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,IAAI,CAACT,IAAI,EAAE;IACTA,IAAI,GAAGF,QAAQ,CAACM,SAAS,CAAC;EAC5B;EACA,OAAO;IAAEJ;EAAK,CAAC;AACjB,CAAC;AAED,OAAO,MAAMU,aAAa,GAAG,MAAAA,CAAOL,OAAkB,EAAEM,OAAkB,KAAK;EAC7E,MAAMC,IAAI,GAAG,IAAIb,UAAU,CAACC,IAAI,CAAC;EACjC,MAAMY,IAAI,CAACC,MAAM,CAACF,OAAO,CAAC;EAC1B,MAAMG,MAAM,GAAGT,OAAO,CAACU,SAAS,CAAC,CAAC;EAClCH,IAAI,CAACI,YAAY,CAACF,MAAM,CAAC;EACzBF,IAAI,CAACK,OAAO,CAAC,CAAC;EACdZ,OAAO,CAACa,KAAK,CAAC,CAAC;EACf,OAAOb,OAAO,CAACc,iBAAiB,CAAC,CAAC;AACpC,CAAC","ignoreList":[]}

package/lib/module/index.d.ts

@@ -0,0 +1,11 @@
+import "./skia/NativeSetup";
+export { JsiSkImage } from "./skia/web/JsiSkImage";
+export * from "./renderer";
+export * from "./renderer/Canvas";
+export * from "./renderer/Offscreen";
+export * from "./views";
+export * from "./skia";
+export * from "./external";
+export * from "./animation";
+export * from "./dom/types";
+export * from "./dom/nodes";

package/lib/module/index.js

@@ -0,0 +1,12 @@
+import "./skia/NativeSetup";
+export { JsiSkImage } from "./skia/web/JsiSkImage";
+export * from "./renderer";
+export * from "./renderer/Canvas";
+export * from "./renderer/Offscreen";
+export * from "./views";
+export * from "./skia";
+export * from "./external";
+export * from "./animation";
+export * from "./dom/types";
+export * from "./dom/nodes";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["JsiSkImage"],"sources":["index.ts"],"sourcesContent":["import \"./skia/NativeSetup\";\nexport { JsiSkImage } from \"./skia/web/JsiSkImage\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./renderer/Offscreen\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"],"mappings":"AAAA,OAAO,oBAAoB;AAC3B,SAASA,UAAU,QAAQ,uBAAuB;AAClD,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,sBAAsB;AACpC,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,aAAa","ignoreList":[]}

package/lib/module/mock/index.d.ts

@@ -0,0 +1,2 @@
+import type { CanvasKit } from "canvaskit-wasm";
+export declare const Mock: (CanvasKit: CanvasKit) => any;

package/lib/module/mock/index.js

@@ -0,0 +1,74 @@
+import { JsiSkApi } from "../skia/web";
+import { JsiSkImage } from "../skia/web/JsiSkImage";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Noop = () => undefined;
+const NoopValue = () => ({
+  current: 0
+});
+const NoopSharedValue = () => ({
+  value: 0
+});
+export const Mock = CanvasKit => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  global.SkiaApi = JsiSkApi(CanvasKit);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const Skia = global.SkiaApi;
+  return {
+    Skia,
+    ...require("../renderer/components"),
+    ...require("../skia"),
+    ...require("../animation"),
+    ...require("../dom/types"),
+    ...require("../dom/nodes"),
+    Canvas: require("react-native").View,
+    getPreferredHighBitDepthCanvasFormat: () => "rgba16float",
+    SkiaPictureView: require("react-native").View,
+    SkiaGraphiteView: require("react-native").View,
+    JsiSkImage: JsiSkImage,
+    drawAsPicture: Noop,
+    drawAsImage: Noop,
+    drawAsImageFromPicture: Noop,
+    useCanvasRef: NoopValue,
+    useCanvasSize: () => ({
+      ref: {
+        current: 0
+      },
+      size: {
+        width: 0,
+        height: 0
+      }
+    }),
+    // Skia Animations
+    useValue: NoopValue,
+    useComputedValue: NoopValue,
+    useTiming: NoopValue,
+    useLoop: NoopValue,
+    useSpring: NoopValue,
+    useClockValue: NoopValue,
+    useValueEffect: Noop,
+    // Reanimated hooks
+    isOnMainThread: () => true,
+    useClock: NoopSharedValue,
+    usePathInterpolation: NoopSharedValue,
+    useImageAsTexture: NoopSharedValue,
+    useTextureValue: NoopSharedValue,
+    useTextureValueFromPicture: NoopSharedValue,
+    useRSXformBuffer: NoopSharedValue,
+    usePointBuffer: NoopSharedValue,
+    useColorBuffer: NoopSharedValue,
+    useRectBuffer: NoopSharedValue,
+    useBuffer: NoopSharedValue,
+    useRawData: Noop,
+    useData: Noop,
+    useFont: () => Skia.Font(undefined, 0),
+    useFonts: Noop,
+    useTypeface: () => null,
+    useImage: () => null,
+    useSVG: () => null,
+    useVideo: () => null
+  };
+};
+//# sourceMappingURL=index.js.map

package/lib/module/mock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["JsiSkApi","JsiSkImage","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","Skia","require","Canvas","View","getPreferredHighBitDepthCanvasFormat","SkiaPictureView","SkiaGraphiteView","drawAsPicture","drawAsImage","drawAsImageFromPicture","useCanvasRef","useCanvasSize","ref","size","width","height","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","isOnMainThread","useClock","usePathInterpolation","useImageAsTexture","useTextureValue","useTextureValueFromPicture","useRSXformBuffer","usePointBuffer","useColorBuffer","useRectBuffer","useBuffer","useRawData","useData","useFont","Font","useFonts","useTypeface","useImage","useSVG","useVideo"],"sources":["index.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { JsiSkImage } from \"../skia/web/JsiSkImage\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Noop: () => any = () => undefined;\nconst NoopValue = () => ({ current: 0 });\nconst NoopSharedValue = () => ({ value: 0 });\n\nexport const Mock = (CanvasKit: CanvasKit) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  global.SkiaApi = JsiSkApi(CanvasKit);\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const Skia = global.SkiaApi;\n  return {\n    Skia,\n    ...require(\"../renderer/components\"),\n    ...require(\"../skia\"),\n    ...require(\"../animation\"),\n    ...require(\"../dom/types\"),\n    ...require(\"../dom/nodes\"),\n    Canvas: require(\"react-native\").View,\n    getPreferredHighBitDepthCanvasFormat: () => \"rgba16float\",\n    SkiaPictureView: require(\"react-native\").View,\n    SkiaGraphiteView: require(\"react-native\").View,\n    JsiSkImage: JsiSkImage,\n    drawAsPicture: Noop,\n    drawAsImage: Noop,\n    drawAsImageFromPicture: Noop,\n    useCanvasRef: NoopValue,\n    useCanvasSize: () => ({\n      ref: {\n        current: 0,\n      },\n      size: {\n        width: 0,\n        height: 0,\n      },\n    }),\n    // Skia Animations\n    useValue: NoopValue,\n    useComputedValue: NoopValue,\n    useTiming: NoopValue,\n    useLoop: NoopValue,\n    useSpring: NoopValue,\n    useClockValue: NoopValue,\n    useValueEffect: Noop,\n    // Reanimated hooks\n    isOnMainThread: () => true,\n    useClock: NoopSharedValue,\n    usePathInterpolation: NoopSharedValue,\n    useImageAsTexture: NoopSharedValue,\n    useTextureValue: NoopSharedValue,\n    useTextureValueFromPicture: NoopSharedValue,\n    useRSXformBuffer: NoopSharedValue,\n    usePointBuffer: NoopSharedValue,\n    useColorBuffer: NoopSharedValue,\n    useRectBuffer: NoopSharedValue,\n    useBuffer: NoopSharedValue,\n    useRawData: Noop,\n    useData: Noop,\n    useFont: () => Skia.Font(undefined, 0),\n    useFonts: Noop,\n    useTypeface: () => null,\n    useImage: () => null,\n    useSVG: () => null,\n    useVideo: () => null,\n  };\n};\n"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,wBAAwB;;AAEnD;AACA,MAAMC,IAAe,GAAGA,CAAA,KAAMC,SAAS;AACvC,MAAMC,SAAS,GAAGA,CAAA,MAAO;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC;AACxC,MAAMC,eAAe,GAAGA,CAAA,MAAO;EAAEC,KAAK,EAAE;AAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,IAAI,GAAIC,SAAoB,IAAK;EAC5C;EACA;EACAC,MAAM,CAACC,OAAO,GAAGX,QAAQ,CAACS,SAAS,CAAC;EACpC;EACA;EACA,MAAMG,IAAI,GAAGF,MAAM,CAACC,OAAO;EAC3B,OAAO;IACLC,IAAI;IACJ,GAAGC,OAAO,CAAC,wBAAwB,CAAC;IACpC,GAAGA,OAAO,CAAC,SAAS,CAAC;IACrB,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1BC,MAAM,EAAED,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IACpCC,oCAAoC,EAAEA,CAAA,KAAM,aAAa;IACzDC,eAAe,EAAEJ,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IAC7CG,gBAAgB,EAAEL,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IAC9Cd,UAAU,EAAEA,UAAU;IACtBkB,aAAa,EAAEjB,IAAI;IACnBkB,WAAW,EAAElB,IAAI;IACjBmB,sBAAsB,EAAEnB,IAAI;IAC5BoB,YAAY,EAAElB,SAAS;IACvBmB,aAAa,EAAEA,CAAA,MAAO;MACpBC,GAAG,EAAE;QACHnB,OAAO,EAAE;MACX,CAAC;MACDoB,IAAI,EAAE;QACJC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV;IACF,CAAC,CAAC;IACF;IACAC,QAAQ,EAAExB,SAAS;IACnByB,gBAAgB,EAAEzB,SAAS;IAC3B0B,SAAS,EAAE1B,SAAS;IACpB2B,OAAO,EAAE3B,SAAS;IAClB4B,SAAS,EAAE5B,SAAS;IACpB6B,aAAa,EAAE7B,SAAS;IACxB8B,cAAc,EAAEhC,IAAI;IACpB;IACAiC,cAAc,EAAEA,CAAA,KAAM,IAAI;IAC1BC,QAAQ,EAAE9B,eAAe;IACzB+B,oBAAoB,EAAE/B,eAAe;IACrCgC,iBAAiB,EAAEhC,eAAe;IAClCiC,eAAe,EAAEjC,eAAe;IAChCkC,0BAA0B,EAAElC,eAAe;IAC3CmC,gBAAgB,EAAEnC,eAAe;IACjCoC,cAAc,EAAEpC,eAAe;IAC/BqC,cAAc,EAAErC,eAAe;IAC/BsC,aAAa,EAAEtC,eAAe;IAC9BuC,SAAS,EAAEvC,eAAe;IAC1BwC,UAAU,EAAE5C,IAAI;IAChB6C,OAAO,EAAE7C,IAAI;IACb8C,OAAO,EAAEA,CAAA,KAAMpC,IAAI,CAACqC,IAAI,CAAC9C,SAAS,EAAE,CAAC,CAAC;IACtC+C,QAAQ,EAAEhD,IAAI;IACdiD,WAAW,EAAEA,CAAA,KAAM,IAAI;IACvBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;IACpBC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,QAAQ,EAAEA,CAAA,KAAM;EAClB,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/module/renderer/Canvas.d.ts

@@ -0,0 +1,48 @@
+import type { FC, RefObject } from "react";
+import React from "react";
+import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { AndroidCanvasProps } from "../views/types";
+import type { SkImage, SkRect, SkSize } from "../skia/types";
+export interface CanvasRef extends FC<CanvasProps> {
+    makeImageSnapshot(rect?: SkRect): SkImage;
+    makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
+    redraw(): void;
+    getNativeId(): number;
+    measure(callback: MeasureOnSuccessCallback): void;
+    measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+}
+export declare const useCanvasRef: () => RefObject<CanvasRef | null>;
+export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
+    ref: RefObject<CanvasRef | null>;
+    size: SkSize;
+};
+export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
+    debug?: boolean;
+    /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */
+    onLayout?: ViewProps["onLayout"];
+    /**
+     * Declares that the canvas covers every pixel of its bounds, so nothing
+     * behind it needs to show through. On Android an opaque canvas is backed by
+     * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).
+     * Defaults to false.
+     */
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    colorSpace?: "p3" | "srgb";
+    /**
+     * Renders into a surface with more than 8 bits per channel (16-bit float on
+     * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are
+     * identical to the default 8-bit surface, only with more precision (this is
+     * about bit depth, not HDR). On Android the extra precision survives
+     * composition only when combined with `opaque`, and the prop must be set
+     * before the canvas is mounted.
+     */
+    highBitDepth?: boolean;
+    /** Android-only rendering options. Ignored on iOS and web. */
+    android?: AndroidCanvasProps;
+    ref?: React.Ref<CanvasRef>;
+    androidWarmup?: boolean;
+    __destroyWebGLContextAfterRender?: boolean;
+}
+export declare const Canvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

package/lib/module/renderer/Canvas.js

@@ -0,0 +1,160 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import Rea from "../external/reanimated/ReanimatedProxy";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+import { Platform } from "../Platform";
+import { HAS_REANIMATED_3 } from "../external";
+export const useCanvasRef = () => useRef(null);
+const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
+const measure = !HAS_REANIMATED_3 ? null : Rea.measure;
+const useCanvasRefPriv = !HAS_REANIMATED_3 ? useRef : Rea.useAnimatedRef;
+export const useCanvasSize = userRef => {
+  const ourRef = useCanvasRef();
+  const ref = userRef !== null && userRef !== void 0 ? userRef : ourRef;
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.measure((_x, _y, width, height) => {
+        setSize({
+          width,
+          height
+        });
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    ref,
+    size
+  };
+};
+// Anything else reaching the native component would hit the generated
+// string-enum parser, which aborts on unknown values.
+const resolveSurfaceType = surfaceType => surfaceType === "SurfaceView" || surfaceType === "TextureView" ? surfaceType : "auto";
+export const Canvas = ({
+  debug,
+  opaque,
+  children,
+  onSize,
+  colorSpace = "p3",
+  highBitDepth = false,
+  androidWarmup = false,
+  android,
+  ref,
+  onLayout,
+  ...viewProps
+}) => {
+  if (onLayout && Platform.OS !== "web") {
+    console.error("<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size");
+  }
+  const viewRef = useCanvasRefPriv(null);
+  // Native ID
+  const nativeId = useMemo(() => {
+    return SkiaViewNativeId.current++;
+  }, []);
+
+  // Root
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+  useReanimatedFrame(() => {
+    "worklet";
+
+    if (onSize && measure) {
+      var _viewRef$current;
+      const result =
+      // eslint-disable-next-line no-nested-ternary
+      Platform.OS === "web" ?
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      (_viewRef$current = viewRef.current) !== null && _viewRef$current !== void 0 && _viewRef$current.canvasRef ?
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      measure(viewRef.current.canvasRef) : {
+        width: 0,
+        height: 0
+      } :
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      measure(viewRef);
+      if (result) {
+        const {
+          width,
+          height
+        } = result;
+        if (onSize.value.width !== width || onSize.value.height !== height) {
+          onSize.value = {
+            width,
+            height
+          };
+        }
+      }
+    }
+  }, !!onSize);
+
+  // Render effects
+  useLayoutEffect(() => {
+    root.render(children);
+  }, [children, root, nativeId]);
+  useEffect(() => {
+    return () => {
+      root.unmount();
+    };
+  }, [root]);
+
+  // Component methods
+  useImperativeHandle(ref, () => ({
+    makeImageSnapshot: rect => {
+      return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+    },
+    makeImageSnapshotAsync: rect => {
+      return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+    },
+    redraw: () => {
+      SkiaViewApi.requestRedraw(nativeId);
+    },
+    getNativeId: () => {
+      return nativeId;
+    },
+    measure: callback => {
+      var _viewRef$current2;
+      (_viewRef$current2 = viewRef.current) === null || _viewRef$current2 === void 0 || _viewRef$current2.measure(callback);
+    },
+    measureInWindow: callback => {
+      var _viewRef$current3;
+      (_viewRef$current3 = viewRef.current) === null || _viewRef$current3 === void 0 || _viewRef$current3.measureInWindow(callback);
+    }
+  }));
+  const onLayoutWeb = useCallback(e => {
+    if (onLayout) {
+      onLayout(e);
+    }
+    if (Platform.OS === "web" && onSize) {
+      const {
+        width,
+        height
+      } = e.nativeEvent.layout;
+      onSize.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, onSize]);
+  return /*#__PURE__*/React.createElement(SkiaPictureViewNativeComponent, _extends({
+    ref: viewRef,
+    collapsable: false,
+    nativeID: `${nativeId}`,
+    debug: debug,
+    opaque: opaque,
+    colorSpace: colorSpace,
+    highBitDepth: highBitDepth,
+    androidWarmup: androidWarmup,
+    androidSurfaceType: resolveSurfaceType(android === null || android === void 0 ? void 0 : android.surfaceType),
+    androidZOrderOnTop: !!(android !== null && android !== void 0 && android.zOrderOnTop),
+    onLayout: Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout
+  }, viewProps));
+};
+//# sourceMappingURL=Canvas.js.map