@shopify/react-native-skia 2.12.0-next.1 → 2.13.0

package/lib/commonjs/views/types.d.ts

@@ -1,11 +1,23 @@
 import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { Node } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 export type NativeSkiaViewProps = ViewProps & {
     debug?: boolean;
     opaque?: boolean;
 };
+export type AndroidSurfaceType = "SurfaceView" | "TextureView";
+export interface AndroidCanvasProps {
+    /**
+     * Backing view. Defaults to `SurfaceView` when the canvas is `opaque` and to
+     * `TextureView` otherwise; both composite correctly in React Native stacking
+     * order without further flags.
+     */
+    surfaceType?: AndroidSurfaceType;
+    /**
+     * SurfaceView only: composite above every React Native view in the window,
+     * ignoring `zIndex`. Ignored for TextureView. Defaults to false.
+     */
+    zOrderOnTop?: boolean;
+}
 export interface ISkiaViewApi {
     web?: boolean;
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
@@ -21,10 +33,10 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     debug?: boolean;
     /**
-     * Pass an animated value to the onSize property to get updates when
-     * the Skia view is resized.
+     * Declares that the canvas covers every pixel of its bounds. On Android an
+     * opaque canvas is backed by a `SurfaceView` by default, the cheapest path
+     * (see `android.surfaceType`). Defaults to false.
      */
-    onSize?: SharedValue<SkSize>;
     opaque?: boolean;
     /**
      * Renders into a surface with more than 8 bits per channel (16-bit float on
@@ -32,12 +44,11 @@ export interface SkiaBaseViewProps extends ViewProps {
      * the extra precision survives composition only when combined with `opaque`.
      */
     highBitDepth?: boolean;
+    /** Android-only rendering options. Ignored on iOS and web. */
+    android?: AndroidCanvasProps;
     __destroyWebGLContextAfterRender?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;
     androidWarmup?: boolean;
 }
-export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
-    root?: Node<unknown>;
-}

package/lib/commonjs/views/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n  size: (nativeId: number) => SkSize;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. On Android\n   * the extra precision survives composition only when combined with `opaque`.\n   */\n  highBitDepth?: boolean;\n\n  // On web, only 16 WebGL contextes are allowed. If the drawing is non-animated, set\n  // __destroyWebGLContextAfterRender to true to release the context after each draw.\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n  androidWarmup?: boolean;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport type AndroidSurfaceType = \"SurfaceView\" | \"TextureView\";\n\nexport interface AndroidCanvasProps {\n  /**\n   * Backing view. Defaults to `SurfaceView` when the canvas is `opaque` and to\n   * `TextureView` otherwise; both composite correctly in React Native stacking\n   * order without further flags.\n   */\n  surfaceType?: AndroidSurfaceType;\n  /**\n   * SurfaceView only: composite above every React Native view in the window,\n   * ignoring `zIndex`. Ignored for TextureView. Defaults to false.\n   */\n  zOrderOnTop?: boolean;\n}\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n  size: (nativeId: number) => SkSize;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n\n  /**\n   * Declares that the canvas covers every pixel of its bounds. On Android an\n   * opaque canvas is backed by a `SurfaceView` by default, the cheapest path\n   * (see `android.surfaceType`). Defaults to false.\n   */\n  opaque?: boolean;\n\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. On Android\n   * the extra precision survives composition only when combined with `opaque`.\n   */\n  highBitDepth?: boolean;\n\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n\n  // On web, only 16 WebGL contextes are allowed. If the drawing is non-animated, set\n  // __destroyWebGLContextAfterRender to true to release the context after each draw.\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n  androidWarmup?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/module/dom/nodes/datatypes/Rect.js

@@ -4,7 +4,11 @@ import { processRadius } from "./Radius";
 export const isEdge = (pos, b) => {
   "worklet";
 
-  return pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height;
+  const right = b.x + b.width;
+  const bottom = b.y + b.height;
+  const withinX = pos.x >= b.x && pos.x <= right;
+  const withinY = pos.y >= b.y && pos.y <= bottom;
+  return withinY && (pos.x === b.x || pos.x === right) || withinX && (pos.y === b.y || pos.y === bottom);
 };
 
 // We have an issue to check property existence on JSI backed instances

package/lib/module/dom/nodes/datatypes/Rect.js.map

@@ -1 +1 @@
-{"version":3,"names":["processRadius","isEdge","pos","b","x","y","width","height","isRRectCtor","def","rect","undefined","isRectCtor","processRect","Skia","_def$x","_def$y","XYWHRect","processRRect","_def$r","_def$x2","_def$y2","r","RRectXY","inflate","box","dx","dy","tx","ty","rx","ry","deflate"],"sources":["Rect.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Skia, SkRect, SkRRect, Vector } from \"../../../skia/types\";\nimport type { RectCtor, RectDef, RRectCtor, RRectDef } from \"../../types\";\n\nimport { processRadius } from \"./Radius\";\n\nexport const isEdge = (pos: Vector, b: SkRect) => {\n  \"worklet\";\n  return (\n    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height\n  );\n};\n\n// We have an issue to check property existence on JSI backed instances\nconst isRRectCtor = (def: RRectDef): def is RRectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n// We have an issue to check property existence on JSI backed instances\nconst isRectCtor = (def: RectDef): def is RectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n\nexport const processRect = (Skia: Skia, def: RectDef) => {\n  \"worklet\";\n  if (isRectCtor(def)) {\n    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);\n  } else {\n    return def.rect;\n  }\n};\n\nexport const processRRect = (Skia: Skia, def: RRectDef) => {\n  \"worklet\";\n  if (isRRectCtor(def)) {\n    const r = processRadius(Skia, def.r ?? 0);\n    return Skia.RRectXY(\n      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),\n      r.x,\n      r.y\n    );\n  } else {\n    return def.rect;\n  }\n};\n\nexport const inflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return Skia.RRectXY(\n    Skia.XYWHRect(\n      box.rect.x - dx + tx,\n      box.rect.y - dy + ty,\n      box.rect.width + 2 * dx,\n      box.rect.height + 2 * dy\n    ),\n    box.rx + dx,\n    box.ry + dy\n  );\n};\n\nexport const deflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return inflate(Skia, box, -dx, -dy, tx, ty);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["processRadius","isEdge","pos","b","right","x","width","bottom","y","height","withinX","withinY","isRRectCtor","def","rect","undefined","isRectCtor","processRect","Skia","_def$x","_def$y","XYWHRect","processRRect","_def$r","_def$x2","_def$y2","r","RRectXY","inflate","box","dx","dy","tx","ty","rx","ry","deflate"],"sources":["Rect.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Skia, SkRect, SkRRect, Vector } from \"../../../skia/types\";\nimport type { RectCtor, RectDef, RRectCtor, RRectDef } from \"../../types\";\n\nimport { processRadius } from \"./Radius\";\n\nexport const isEdge = (pos: Vector, b: SkRect) => {\n  \"worklet\";\n  const right = b.x + b.width;\n  const bottom = b.y + b.height;\n  const withinX = pos.x >= b.x && pos.x <= right;\n  const withinY = pos.y >= b.y && pos.y <= bottom;\n  return (\n    (withinY && (pos.x === b.x || pos.x === right)) ||\n    (withinX && (pos.y === b.y || pos.y === bottom))\n  );\n};\n\n// We have an issue to check property existence on JSI backed instances\nconst isRRectCtor = (def: RRectDef): def is RRectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n// We have an issue to check property existence on JSI backed instances\nconst isRectCtor = (def: RectDef): def is RectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n\nexport const processRect = (Skia: Skia, def: RectDef) => {\n  \"worklet\";\n  if (isRectCtor(def)) {\n    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);\n  } else {\n    return def.rect;\n  }\n};\n\nexport const processRRect = (Skia: Skia, def: RRectDef) => {\n  \"worklet\";\n  if (isRRectCtor(def)) {\n    const r = processRadius(Skia, def.r ?? 0);\n    return Skia.RRectXY(\n      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),\n      r.x,\n      r.y\n    );\n  } else {\n    return def.rect;\n  }\n};\n\nexport const inflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return Skia.RRectXY(\n    Skia.XYWHRect(\n      box.rect.x - dx + tx,\n      box.rect.y - dy + ty,\n      box.rect.width + 2 * dx,\n      box.rect.height + 2 * dy\n    ),\n    box.rx + dx,\n    box.ry + dy\n  );\n};\n\nexport const deflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return inflate(Skia, box, -dx, -dy, tx, ty);\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -9,8 +9,12 @@ const copyFrameOnAndroid = currentFrame => {
   if (Platform.OS === "android") {
     const tex = currentFrame.value;
     if (tex) {
-      currentFrame.value = tex; //.makeNonTextureImage();
-      tex.dispose();
+      const copy = tex.makeNonTextureImage();
+      if (copy) {
+        currentFrame.value = copy;
+        tex.dispose();
+      }
+      // If copy fails, keep the original frame rather than showing black
     }
   }
 };
@@ -19,6 +23,8 @@ const setFrame = (video, currentFrame) => {
 
   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);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","Platform","Rea","useVideoLoading","copyFrameOnAndroid","currentFrame","OS","tex","value","dispose","setFrame","video","img","nextImage","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      currentFrame.value = tex; //.makeNonTextureImage();\n      tex.dispose();\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 = 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":[]}
+{"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/mock/index.js

@@ -50,7 +50,6 @@ export const Mock = CanvasKit => {
     useValueEffect: Noop,
     // Reanimated hooks
     isOnMainThread: () => true,
-    isFabric: true,
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
     useImageAsTexture: NoopSharedValue,

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

@@ -1 +1 @@
-{"version":3,"names":["JsiSkApi","JsiSkImage","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","Skia","require","Canvas","View","getPreferredHighBitDepthCanvasFormat","SkiaPictureView","drawAsPicture","drawAsImage","drawAsImageFromPicture","useCanvasRef","useCanvasSize","ref","size","width","height","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","isOnMainThread","isFabric","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    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    isFabric: 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;IAC7Cd,UAAU,EAAEA,UAAU;IACtBiB,aAAa,EAAEhB,IAAI;IACnBiB,WAAW,EAAEjB,IAAI;IACjBkB,sBAAsB,EAAElB,IAAI;IAC5BmB,YAAY,EAAEjB,SAAS;IACvBkB,aAAa,EAAEA,CAAA,MAAO;MACpBC,GAAG,EAAE;QACHlB,OAAO,EAAE;MACX,CAAC;MACDmB,IAAI,EAAE;QACJC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV;IACF,CAAC,CAAC;IACF;IACAC,QAAQ,EAAEvB,SAAS;IACnBwB,gBAAgB,EAAExB,SAAS;IAC3ByB,SAAS,EAAEzB,SAAS;IACpB0B,OAAO,EAAE1B,SAAS;IAClB2B,SAAS,EAAE3B,SAAS;IACpB4B,aAAa,EAAE5B,SAAS;IACxB6B,cAAc,EAAE/B,IAAI;IACpB;IACAgC,cAAc,EAAEA,CAAA,KAAM,IAAI;IAC1BC,QAAQ,EAAE,IAAI;IACdC,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":[]}
+{"version":3,"names":["JsiSkApi","JsiSkImage","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","Skia","require","Canvas","View","getPreferredHighBitDepthCanvasFormat","SkiaPictureView","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    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;IAC7Cd,UAAU,EAAEA,UAAU;IACtBiB,aAAa,EAAEhB,IAAI;IACnBiB,WAAW,EAAEjB,IAAI;IACjBkB,sBAAsB,EAAElB,IAAI;IAC5BmB,YAAY,EAAEjB,SAAS;IACvBkB,aAAa,EAAEA,CAAA,MAAO;MACpBC,GAAG,EAAE;QACHlB,OAAO,EAAE;MACX,CAAC;MACDmB,IAAI,EAAE;QACJC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV;IACF,CAAC,CAAC;IACF;IACAC,QAAQ,EAAEvB,SAAS;IACnBwB,gBAAgB,EAAExB,SAAS;IAC3ByB,SAAS,EAAEzB,SAAS;IACpB0B,OAAO,EAAE1B,SAAS;IAClB2B,SAAS,EAAE3B,SAAS;IACpB4B,aAAa,EAAE5B,SAAS;IACxB6B,cAAc,EAAE/B,IAAI;IACpB;IACAgC,cAAc,EAAEA,CAAA,KAAM,IAAI;IAC1BC,QAAQ,EAAE7B,eAAe;IACzB8B,oBAAoB,EAAE9B,eAAe;IACrC+B,iBAAiB,EAAE/B,eAAe;IAClCgC,eAAe,EAAEhC,eAAe;IAChCiC,0BAA0B,EAAEjC,eAAe;IAC3CkC,gBAAgB,EAAElC,eAAe;IACjCmC,cAAc,EAAEnC,eAAe;IAC/BoC,cAAc,EAAEpC,eAAe;IAC/BqC,aAAa,EAAErC,eAAe;IAC9BsC,SAAS,EAAEtC,eAAe;IAC1BuC,UAAU,EAAE3C,IAAI;IAChB4C,OAAO,EAAE5C,IAAI;IACb6C,OAAO,EAAEA,CAAA,KAAMnC,IAAI,CAACoC,IAAI,CAAC7C,SAAS,EAAE,CAAC,CAAC;IACtC8C,QAAQ,EAAE/C,IAAI;IACdgD,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

@@ -2,6 +2,7 @@ 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;
@@ -16,11 +17,16 @@ export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
     ref: RefObject<CanvasRef | null>;
     size: SkSize;
 };
-export declare const isFabric: boolean;
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
     debug?: boolean;
-    /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
+    /** @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";
@@ -33,8 +39,10 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
      * 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, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;
+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

@@ -1,4 +1,3 @@
-var _global;
 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";
@@ -35,9 +34,9 @@ export const useCanvasSize = userRef => {
     size
   };
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isFabric = Boolean((_global = global) === null || _global === void 0 ? void 0 : _global.nativeFabricUIManager);
+// 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,
@@ -46,11 +45,12 @@ export const Canvas = ({
   colorSpace = "p3",
   highBitDepth = false,
   androidWarmup = false,
+  android,
   ref,
   onLayout,
   ...viewProps
 }) => {
-  if (onLayout && isFabric) {
+  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);
@@ -152,6 +152,8 @@ export const Canvas = ({
     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));
 };

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","highBitDepth","androidWarmup","onLayout","viewProps","console","error","viewRef","nativeId","root","_viewRef$current","result","OS","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  ref?: React.Ref<CanvasRef>;\n  androidWarmup?: boolean;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  highBitDepth = false,\n  androidWarmup = false,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      \"<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\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      highBitDepth={highBitDepth}\n      androidWarmup={androidWarmup}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","resolveSurfaceType","surfaceType","Canvas","debug","opaque","children","onSize","colorSpace","highBitDepth","androidWarmup","android","onLayout","viewProps","OS","console","error","viewRef","nativeId","root","_viewRef$current","result","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID","androidSurfaceType","androidZOrderOnTop","zOrderOnTop"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { AndroidCanvasProps, AndroidSurfaceType } from \"../views/types\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  /**\n   * Declares that the canvas covers every pixel of its bounds, so nothing\n   * behind it needs to show through. On Android an opaque canvas is backed by\n   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).\n   * Defaults to false.\n   */\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n  ref?: React.Ref<CanvasRef>;\n  androidWarmup?: boolean;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\n// Anything else reaching the native component would hit the generated\n// string-enum parser, which aborts on unknown values.\nconst resolveSurfaceType = (\n  surfaceType: AndroidSurfaceType | undefined\n): \"auto\" | AndroidSurfaceType =>\n  surfaceType === \"SurfaceView\" || surfaceType === \"TextureView\"\n    ? surfaceType\n    : \"auto\";\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  highBitDepth = false,\n  androidWarmup = false,\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && Platform.OS !== \"web\") {\n    console.error(\n      \"<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\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      highBitDepth={highBitDepth}\n      androidWarmup={androidWarmup}\n      androidSurfaceType={resolveSurfaceType(android?.surfaceType)}\n      androidZOrderOnTop={!!android?.zOrderOnTop}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/renderer/components/Mask.js

@@ -10,16 +10,10 @@ export const Mask = ({
 }) => {
   return /*#__PURE__*/React.createElement(Group, {
     layer: true
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, children, /*#__PURE__*/React.createElement(Group, {
     layer: /*#__PURE__*/React.createElement(Paint, {
-      blendMode: "src"
+      blendMode: clip ? "dstIn" : "dstATop"
     }, mode === "luminance" && /*#__PURE__*/React.createElement(LumaColorFilter, null))
-  }, mask, clip && /*#__PURE__*/React.createElement(Group, {
-    layer: /*#__PURE__*/React.createElement(Paint, {
-      blendMode: "dstIn"
-    })
-  }, children)), /*#__PURE__*/React.createElement(Group, {
-    blendMode: "srcIn"
-  }, children));
+  }, mask));
 };
 //# sourceMappingURL=Mask.js.map

package/lib/module/renderer/components/Mask.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Group","LumaColorFilter","Paint","Mask","children","mask","mode","clip","createElement","layer","blendMode"],"sources":["Mask.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { Group } from \"./Group\";\nimport { LumaColorFilter } from \"./colorFilters/LumaColorFilter\";\nimport { Paint } from \"./Paint\";\n\ninterface MaskProps {\n  mode?: \"luminance\" | \"alpha\";\n  clip?: boolean;\n  mask: ReactNode | ReactNode[];\n  children: ReactNode | ReactNode[];\n}\n\nexport const Mask = ({\n  children,\n  mask,\n  mode = \"alpha\",\n  clip = true,\n}: MaskProps) => {\n  return (\n    <Group layer>\n      <Group\n        layer={\n          <Paint blendMode=\"src\">\n            {mode === \"luminance\" && <LumaColorFilter />}\n          </Paint>\n        }\n      >\n        {mask}\n        {clip && <Group layer={<Paint blendMode=\"dstIn\" />}>{children}</Group>}\n      </Group>\n      <Group blendMode=\"srcIn\">{children}</Group>\n    </Group>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,KAAK,QAAQ,SAAS;AAS/B,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACnBC,QAAQ;EACRC,IAAI;EACJC,IAAI,GAAG,OAAO;EACdC,IAAI,GAAG;AACE,CAAC,KAAK;EACf,oBACER,KAAA,CAAAS,aAAA,CAACR,KAAK;IAACS,KAAK;EAAA,gBACVV,KAAA,CAAAS,aAAA,CAACR,KAAK;IACJS,KAAK,eACHV,KAAA,CAAAS,aAAA,CAACN,KAAK;MAACQ,SAAS,EAAC;IAAK,GACnBJ,IAAI,KAAK,WAAW,iBAAIP,KAAA,CAAAS,aAAA,CAACP,eAAe,MAAE,CACtC;EACR,GAEAI,IAAI,EACJE,IAAI,iBAAIR,KAAA,CAAAS,aAAA,CAACR,KAAK;IAACS,KAAK,eAAEV,KAAA,CAAAS,aAAA,CAACN,KAAK;MAACQ,SAAS,EAAC;IAAO,CAAE;EAAE,GAAEN,QAAgB,CAChE,CAAC,eACRL,KAAA,CAAAS,aAAA,CAACR,KAAK;IAACU,SAAS,EAAC;EAAO,GAAEN,QAAgB,CACrC,CAAC;AAEZ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Group","LumaColorFilter","Paint","Mask","children","mask","mode","clip","createElement","layer","blendMode"],"sources":["Mask.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { Group } from \"./Group\";\nimport { LumaColorFilter } from \"./colorFilters/LumaColorFilter\";\nimport { Paint } from \"./Paint\";\n\ninterface MaskProps {\n  mode?: \"luminance\" | \"alpha\";\n  clip?: boolean;\n  mask: ReactNode | ReactNode[];\n  children: ReactNode | ReactNode[];\n}\n\nexport const Mask = ({\n  children,\n  mask,\n  mode = \"alpha\",\n  clip = true,\n}: MaskProps) => {\n  return (\n    <Group layer>\n      {children}\n      {/* The children composite against each other in the layer above; the\n          mask is then applied once, when its own layer is restored. A blend\n          mode attached to a <Group> without a layer would instead be applied\n          per draw call, compositing every child after the first against the\n          previous child rather than against the mask (issue #3254).\n          dstIn keeps the children where the mask is opaque and erases them\n          where it is transparent. Without clip, dstATop additionally keeps\n          the mask artwork itself wherever the children leave it uncovered. */}\n      <Group\n        layer={\n          <Paint blendMode={clip ? \"dstIn\" : \"dstATop\"}>\n            {mode === \"luminance\" && <LumaColorFilter />}\n          </Paint>\n        }\n      >\n        {mask}\n      </Group>\n    </Group>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,KAAK,QAAQ,SAAS;AAS/B,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACnBC,QAAQ;EACRC,IAAI;EACJC,IAAI,GAAG,OAAO;EACdC,IAAI,GAAG;AACE,CAAC,KAAK;EACf,oBACER,KAAA,CAAAS,aAAA,CAACR,KAAK;IAACS,KAAK;EAAA,GACTL,QAAQ,eASTL,KAAA,CAAAS,aAAA,CAACR,KAAK;IACJS,KAAK,eACHV,KAAA,CAAAS,aAAA,CAACN,KAAK;MAACQ,SAAS,EAAEH,IAAI,GAAG,OAAO,GAAG;IAAU,GAC1CD,IAAI,KAAK,WAAW,iBAAIP,KAAA,CAAAS,aAAA,CAACP,eAAe,MAAE,CACtC;EACR,GAEAI,IACI,CACF,CAAC;AAEZ,CAAC","ignoreList":[]}

package/lib/module/skia/types/JsiInstance.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="esnext.disposable" preserve="true" />
 export interface SkJSIInstance<T extends string> extends Disposable {
     __typename__: T;
     dispose(): void;

package/lib/module/skia/types/JsiInstance.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["JsiInstance.ts"],"sourcesContent":["export interface SkJSIInstance<T extends string> extends Disposable {\n  __typename__: T;\n  dispose(): void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["JsiInstance.ts"],"sourcesContent":["/// <reference lib=\"esnext.disposable\" preserve=\"true\" />\n\nexport interface SkJSIInstance<T extends string> extends Disposable {\n  __typename__: T;\n  dispose(): void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/module/skia/types/Matrix4.js

@@ -86,12 +86,17 @@ export const multiply4 = (a, b) => {
   }
   return result;
 };
-const skewY = angle => {
+
+// These matrices are row-major, so the shear factor of skewX - which offsets x
+// in proportion to y - belongs in row 0, column 1, and skewY's in row 1,
+// column 0. React Native's MatrixMath stores the same transforms column-major,
+// and porting its indices verbatim is what swapped the two axes here.
+const skewX = angle => {
   "worklet";
 
   return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 };
-const skewX = angle => {
+const skewY = angle => {
   "worklet";
 
   return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];