@shopify/react-native-skia 2.0.0 → 2.0.2

package/lib/module/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getContext","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/skia/web/JsiSkImageFactory.d.ts

@@ -1,5 +1,6 @@
 export const __esModule: boolean;
 export class JsiSkImageFactory extends _Host.Host {
+    MakeNull(): _JsiSkImage.JsiSkImage;
     MakeImageFromViewTag(viewTag: any): Promise<null>;
     MakeImageFromNativeBuffer(buffer: any, surface: any, image: any): _JsiSkImage.JsiSkImage;
     MakeImageFromEncoded(encoded: any): _JsiSkImage.JsiSkImage | null;

package/lib/typescript/lib/commonjs/skia/web/JsiSkSurface.d.ts

@@ -5,7 +5,7 @@ export class JsiSkSurface extends _Host.HostObject {
     width(): any;
     height(): any;
     getCanvas(): _JsiSkCanvas.JsiSkCanvas;
-    makeImageSnapshot(bounds: any): _JsiSkImage.JsiSkImage;
+    makeImageSnapshot(bounds: any, outputImage: any): _JsiSkImage.JsiSkImage;
     getNativeTextureUnstable(): null;
 }
 import _Host = require("./Host");

package/lib/typescript/lib/commonjs/sksg/HostConfig.d.ts

@@ -26,7 +26,7 @@ export namespace sksgHostConfig {
     function clearContainer(_container: any): void;
     function prepareUpdate(_instance: any, _type: any, oldProps: any, newProps: any, container: any, _hostContext: any): any;
     function preparePortalMount(): void;
-    function cloneInstance(instance: any, _type: any, _oldProps: any, newProps: any, _updatePayload: any, _internalInstanceHandle: any, keepChildren: any, _recyclableInstance: any): {
+    function cloneInstance(instance: any, _type: any, _oldProps: any, newProps: any, keepChildren: any, _newChildSet: any): {
         type: any;
         props: any;
         children: any[];

package/lib/typescript/lib/commonjs/sksg/Recorder/DrawingContext.d.ts

@@ -14,4 +14,6 @@ export function createDrawingContext(Skia: any, paintPool: any, canvas: any): {
     readonly paint: any;
     restorePaint: () => any;
     materializePaint: () => void;
+    getOpacity: () => any;
+    setOpacity: (newOpacity: any) => void;
 };

package/lib/typescript/lib/commonjs/sksg/Recorder/commands/Paint.d.ts

@@ -1,5 +1,5 @@
 export const __esModule: boolean;
-export function setPaintProperties(Skia: any, paint: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
+export function setPaintProperties(Skia: any, ctx: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
     opacity: any;
     color: any;
     blendMode: any;

package/lib/typescript/lib/module/skia/web/JsiSkImageFactory.d.ts

@@ -1,4 +1,5 @@
 export class JsiSkImageFactory extends Host {
+    MakeNull(): JsiSkImage;
     MakeImageFromViewTag(viewTag: any): Promise<null>;
     MakeImageFromNativeBuffer(buffer: any, surface: any, image: any): JsiSkImage;
     MakeImageFromEncoded(encoded: any): JsiSkImage | null;

package/lib/typescript/lib/module/skia/web/JsiSkSurface.d.ts

@@ -4,7 +4,7 @@ export class JsiSkSurface extends HostObject {
     width(): any;
     height(): any;
     getCanvas(): JsiSkCanvas;
-    makeImageSnapshot(bounds: any): JsiSkImage;
+    makeImageSnapshot(bounds: any, outputImage: any): JsiSkImage;
     getNativeTextureUnstable(): null;
 }
 import { HostObject } from "./Host";

package/lib/typescript/lib/module/sksg/HostConfig.d.ts

@@ -26,7 +26,7 @@ export namespace sksgHostConfig {
     function clearContainer(_container: any): void;
     function prepareUpdate(_instance: any, _type: any, oldProps: any, newProps: any, container: any, _hostContext: any): any;
     function preparePortalMount(): void;
-    function cloneInstance(instance: any, _type: any, _oldProps: any, newProps: any, _updatePayload: any, _internalInstanceHandle: any, keepChildren: any, _recyclableInstance: any): {
+    function cloneInstance(instance: any, _type: any, _oldProps: any, newProps: any, keepChildren: any, _newChildSet: any): {
         type: any;
         props: any;
         children: any[];

package/lib/typescript/lib/module/sksg/Recorder/DrawingContext.d.ts

@@ -13,4 +13,6 @@ export function createDrawingContext(Skia: any, paintPool: any, canvas: any): {
     readonly paint: any;
     restorePaint: () => any;
     materializePaint: () => void;
+    getOpacity: () => any;
+    setOpacity: (newOpacity: any) => void;
 };

package/lib/typescript/lib/module/sksg/Recorder/commands/Paint.d.ts

@@ -1,4 +1,4 @@
-export function setPaintProperties(Skia: any, paint: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
+export function setPaintProperties(Skia: any, ctx: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
     opacity: any;
     color: any;
     blendMode: any;

package/lib/typescript/src/skia/types/Image/ImageFactory.d.ts

@@ -15,6 +15,7 @@ export interface ImageInfo {
     width: number;
 }
 export interface ImageFactory {
+    MakeNull: () => SkImage;
     /**
      * Return an Image backed by the encoded data, but attempt to defer decoding until the image
      * is actually used/drawn. This deferral allows the system to cache the result, either on the
@@ -58,7 +59,7 @@ export interface ImageFactory {
      *
      * @returns Returns a valid SkImage, if the texture is invalid, an error is thrown.
      */
-    MakeImageFromNativeTextureUnstable: (texture: unknown, width: number, height: number, mipmapped?: boolean) => SkImage;
+    MakeImageFromNativeTextureUnstable: (texture: unknown, width: number, height: number, mipmapped?: boolean, outputImage?: SkImage) => SkImage;
     /**
      * Returns an image that will be a screenshot of the view represented by
      * the view tag

package/lib/typescript/src/skia/types/Surface/Surface.d.ts

@@ -32,7 +32,7 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
   
         example: https://fiddle.skia.org/c/@Surface_makeImageSnapshot
     */
-    makeImageSnapshot(bounds?: SkRect): SkImage;
+    makeImageSnapshot(bounds?: SkRect, outputImage?: SkImage): SkImage;
     /**
      * Make sure any queued draws are sent to the screen or the GPU.
      */

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

@@ -5,6 +5,7 @@ import { JsiSkImage } from "./JsiSkImage";
 import type { JsiSkSurface } from "./JsiSkSurface";
 export declare class JsiSkImageFactory extends Host implements ImageFactory {
     constructor(CanvasKit: CanvasKit);
+    MakeNull(): JsiSkImage;
     MakeImageFromViewTag(viewTag: number): Promise<SkImage | null>;
     MakeImageFromNativeBuffer(buffer: NativeBuffer, surface?: JsiSkSurface, image?: JsiSkImage): JsiSkImage;
     MakeImageFromEncoded(encoded: SkData): JsiSkImage | null;

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

@@ -1,6 +1,7 @@
 import type { CanvasKit, Surface } from "canvaskit-wasm";
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
+import { JsiSkImage } from "./JsiSkImage";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
     constructor(CanvasKit: CanvasKit, ref: Surface);
     dispose: () => void;
@@ -8,6 +9,6 @@ export declare class JsiSkSurface extends HostObject<Surface, "Surface"> impleme
     width(): number;
     height(): number;
     getCanvas(): SkCanvas;
-    makeImageSnapshot(bounds?: SkRect): SkImage;
+    makeImageSnapshot(bounds?: SkRect, outputImage?: JsiSkImage): SkImage;
     getNativeTextureUnstable(): unknown;
 }

package/lib/typescript/src/sksg/Recorder/DrawingContext.d.ts

@@ -14,5 +14,7 @@ export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], ca
     readonly paint: SkPaint;
     restorePaint: () => SkPaint | undefined;
     materializePaint: () => void;
+    getOpacity: () => number;
+    setOpacity: (newOpacity: number) => void;
 };
 export type DrawingContext = ReturnType<typeof createDrawingContext>;

package/lib/typescript/src/sksg/Recorder/commands/Paint.d.ts

@@ -1,3 +1,4 @@
 import type { PaintProps } from "../../../dom/types";
-import type { SkPaint, Skia } from "../../../skia/types";
-export declare const setPaintProperties: (Skia: Skia, paint: SkPaint, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;
+import type { Skia } from "../../../skia/types";
+import type { DrawingContext } from "../DrawingContext";
+export declare const setPaintProperties: (Skia: Skia, ctx: DrawingContext, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/react-native-skia.podspec

@@ -4,8 +4,48 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# Check for GRAPHITE env var
-use_graphite = ENV['SK_GRAPHITE'] == '1'
+# Check if Graphite symbols are available in libskia
+libskia_path = File.join(__dir__, "libs/apple/libskia.xcframework")
+use_graphite = false
+
+if File.exist?(libskia_path)
+  # Look for any arm64 or x86_64 framework inside the xcframework
+  framework_paths = Dir.glob(File.join(libskia_path, "**/libskia.framework/libskia"))
+  
+  # Also try looking for static libraries if frameworks aren't found
+  if framework_paths.empty?
+    framework_paths = Dir.glob(File.join(libskia_path, "**/libskia.a"))
+  end
+  
+  framework_paths.each do |framework_path|
+    if File.exist?(framework_path)
+      # Look for specific Dawn function symbols that indicate Graphite support
+      dawn_symbols = [
+        'dawn::',
+        'wgpu',
+        '_ZN4dawn',
+        'DawnDevice',
+        'dawn_native'
+      ]
+      
+      dawn_symbols.each do |symbol|
+        nm_output = `nm "#{framework_path}" 2>/dev/null | grep "#{symbol}"`
+        if $?.success? && !nm_output.empty?
+          use_graphite = true
+          break
+        end
+      end
+      
+      break if use_graphite
+    end
+  end
+end
+
+if use_graphite
+  puts "SK_GRAPHITE: ON (Graphite symbols found in libskia)"
+else
+  puts "SK_GRAPHITE: OFF (Graphite symbols not found in libskia)"
+end
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ? 
@@ -20,13 +60,6 @@ base_frameworks = ['libs/apple/libskia.xcframework',
 'libs/apple/libskunicode_core.xcframework',
 'libs/apple/libskunicode_libgrapheme.xcframework',]
 
-# Add Graphite frameworks if enabled
-graphite_frameworks = [
-  'libs/apple/libdawn_native_static.xcframework',
-  'libs/apple/libdawn_platform_static.xcframework', 
-  'libs/apple/libdawn_proc_static.xcframework'
-]
-
 Pod::Spec.new do |s|
   s.name         = "react-native-skia"
   s.version      = package["version"]
@@ -54,9 +87,7 @@ Pod::Spec.new do |s|
 
   s.frameworks = ['MetalKit', 'AVFoundation', 'AVKit', 'CoreMedia']
 
-  s.vendored_frameworks = use_graphite ? 
-  base_frameworks + graphite_frameworks :
-  base_frameworks
+  s.vendored_frameworks = base_frameworks
 
   # All iOS cpp/h files
   s.source_files = [

package/src/renderer/__tests__/e2e/DataEncoding.spec.tsx

@@ -52,7 +52,9 @@ describe("Data Encoding", () => {
       const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
       const canvas = offscreen.getCanvas();
       canvas.drawImage(img, 0, 0);
-      return Array.from(offscreen.makeImageSnapshot().encodeToBytes());
+      const snapshotImage = Skia.Image.MakeNull();
+      offscreen.makeImageSnapshot(undefined, snapshotImage);
+      return Array.from(snapshotImage.encodeToBytes());
     });
     expect(result.length).toBeGreaterThan(0);
   });
@@ -68,7 +70,9 @@ describe("Data Encoding", () => {
       const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
       const canvas = offscreen.getCanvas();
       canvas.drawImage(img, 0, 0);
-      return offscreen.makeImageSnapshot().encodeToBase64();
+      const snapshotImage = Skia.Image.MakeNull();
+      offscreen.makeImageSnapshot(undefined, snapshotImage);
+      return snapshotImage.encodeToBase64();
     });
     expect(result.length).toBeGreaterThan(0);
   });

package/src/renderer/__tests__/e2e/Paint.spec.tsx

@@ -10,7 +10,7 @@ import {
   Paint,
   Path,
 } from "../../components";
-import { checkImage } from "../../../__tests__/setup";
+import { checkImage, docPath } from "../../../__tests__/setup";
 import { fitbox } from "../../components/shapes/FitBox";
 
 const blendModes = [
@@ -167,4 +167,47 @@ describe("Paint", () => {
       threshold: 0,
     });
   });
+  it("should override colors", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <>
+        <Circle c={c} r={r} color="transparent">
+          <Paint color="lightblue" />
+          <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
+          <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+        </Circle>
+      </>
+    );
+    checkImage(result, docPath("paint/stroke.png"));
+  });
+  it("colors don't influence opacity (1)", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <Group color="rgba(0,0,0,0.5)">
+        <Circle c={c} r={r} color="lightblue" />
+      </Group>
+    );
+    checkImage(result, docPath("paint/opaque-circle.png"));
+  });
+  it("colors don't influence opacity (2)", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <Group opacity={0.5}>
+        <Circle c={c} r={r} color="lightblue" />
+      </Group>
+    );
+    checkImage(result, docPath("paint/semi-transparent-circle.png"));
+  });
 });

package/src/skia/types/Image/ImageFactory.ts

@@ -21,6 +21,7 @@ export interface ImageInfo {
 }
 
 export interface ImageFactory {
+  MakeNull: () => SkImage;
   /**
    * Return an Image backed by the encoded data, but attempt to defer decoding until the image
    * is actually used/drawn. This deferral allows the system to cache the result, either on the
@@ -70,7 +71,8 @@ export interface ImageFactory {
     texture: unknown,
     width: number,
     height: number,
-    mipmapped?: boolean
+    mipmapped?: boolean,
+    outputImage?: SkImage
   ) => SkImage;
 
   /**

package/src/skia/types/Surface/Surface.ts

@@ -35,7 +35,7 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
 
       example: https://fiddle.skia.org/c/@Surface_makeImageSnapshot
   */
-  makeImageSnapshot(bounds?: SkRect): SkImage;
+  makeImageSnapshot(bounds?: SkRect, outputImage?: SkImage): SkImage;
 
   /**
    * Make sure any queued draws are sent to the screen or the GPU.

package/src/skia/web/JsiSkImageFactory.ts

@@ -20,6 +20,10 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     super(CanvasKit);
   }
 
+  MakeNull() {
+    return new JsiSkImage(this.CanvasKit, null as unknown as Image);
+  }
+
   MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {
     const view = viewTag as unknown as HTMLElement;
     // TODO: Implement screenshot from view in React JS

package/src/skia/web/JsiSkSurface.ts

@@ -35,12 +35,15 @@ export class JsiSkSurface
     return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());
   }
 
-  makeImageSnapshot(bounds?: SkRect): SkImage {
+  makeImageSnapshot(bounds?: SkRect, outputImage?: JsiSkImage): SkImage {
     const image = this.ref.makeImageSnapshot(
       bounds
         ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))
         : undefined
     );
+    if (outputImage) {
+      outputImage.ref = image;
+    }
     return new JsiSkImage(this.CanvasKit, image);
   }
 

package/src/sksg/HostConfig.ts

@@ -177,10 +177,8 @@ export const sksgHostConfig: SkiaHostConfig = {
     _type,
     _oldProps,
     newProps,
-    _updatePayload,
-    _internalInstanceHandle,
-    keepChildren: boolean,
-    _recyclableInstance: null | Instance
+    keepChildren,
+    _newChildSet
   ) {
     debug("cloneInstance");
     return {

package/src/sksg/Recorder/DrawingContext.ts

@@ -22,12 +22,14 @@ export const createDrawingContext = (
   const imageFilters: SkImageFilter[] = [];
   const pathEffects: SkPathEffect[] = [];
   const paintDeclarations: SkPaint[] = [];
+  const opacities: number[] = [];
 
   let nextPaintIndex = 1;
 
-  // Initialize first paint
+  // Initialize first paint and opacity
   paintPool[0] = Skia.Paint();
   paints.push(paintPool[0]);
+  opacities.push(1);
 
   // Methods (formerly class methods)
   const savePaint = () => {
@@ -39,9 +41,18 @@ export const createDrawingContext = (
     const nextPaint = paintPool[nextPaintIndex];
     nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties
     paints.push(nextPaint);
+    opacities.push(opacities[opacities.length - 1]);
     nextPaintIndex++;
   };
 
+  const getOpacity = () => {
+    return opacities[opacities.length - 1];
+  };
+
+  const setOpacity = (newOpacity: number) => {
+    opacities[opacities.length - 1] = Math.max(0, Math.min(1, newOpacity));
+  };
+
   const saveBackdropFilter = () => {
     let imageFilter: SkImageFilter | null = null;
     const imgf = imageFilters.pop();
@@ -63,6 +74,7 @@ export const createDrawingContext = (
   };
 
   const restorePaint = () => {
+    opacities.pop();
     return paints.pop();
   };
 
@@ -125,6 +137,8 @@ export const createDrawingContext = (
     }, // the "getter" for the current paint
     restorePaint,
     materializePaint,
+    getOpacity,
+    setOpacity,
   };
 };
 

package/src/sksg/Recorder/Player.ts

@@ -67,7 +67,7 @@ function play(ctx: DrawingContext, _command: Command) {
       ctx.paints.push(command.props.paint);
     } else {
       ctx.savePaint();
-      setPaintProperties(ctx.Skia, ctx.paint, command.props);
+      setPaintProperties(ctx.Skia, ctx, command.props);
     }
   } else if (isCommand(command, CommandType.RestorePaint)) {
     ctx.restorePaint();
@@ -101,7 +101,11 @@ function play(ctx: DrawingContext, _command: Command) {
   } else if (isCommand(command, CommandType.RestoreCTM)) {
     ctx.canvas.restore();
   } else {
-    const paints = [ctx.paint, ...ctx.paintDeclarations];
+    // TODO: is a copy needed here?
+    // apply opacity to the current paint.
+    const paint = ctx.paint.copy();
+    paint.setAlphaf(paint.getAlphaf() * ctx.getOpacity());
+    const paints = [paint, ...ctx.paintDeclarations];
     ctx.paintDeclarations = [];
     paints.forEach((p) => {
       ctx.paints.push(p);

package/src/sksg/Recorder/commands/Paint.ts

@@ -6,11 +6,12 @@ import {
   StrokeCap,
   StrokeJoin,
 } from "../../../skia/types";
-import type { SkPaint, Skia } from "../../../skia/types";
+import type { Skia } from "../../../skia/types";
+import type { DrawingContext } from "../DrawingContext";
 
 export const setPaintProperties = (
   Skia: Skia,
-  paint: SkPaint,
+  ctx: DrawingContext,
   {
     opacity,
     color,
@@ -25,14 +26,14 @@ export const setPaintProperties = (
   }: PaintProps
 ) => {
   "worklet";
+  const { paint } = ctx;
+
   if (opacity !== undefined) {
-    paint.setAlphaf(paint.getAlphaf() * opacity);
+    ctx.setOpacity(ctx.getOpacity() * opacity);
   }
   if (color !== undefined) {
-    const currentOpacity = paint.getAlphaf();
     paint.setShader(null);
     paint.setColor(processColor(Skia, color));
-    paint.setAlphaf(currentOpacity * paint.getAlphaf());
   }
   if (blendMode !== undefined) {
     paint.setBlendMode(BlendMode[enumKey(blendMode)]);

package/src/views/SkiaBaseWebView.tsx

@@ -42,6 +42,10 @@ export abstract class SkiaBaseWebView<
       canvas.width = this.width * pd;
       canvas.height = this.height * pd;
       const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+      const ctx = canvas.getContext("webgl2");
+      if (ctx) {
+        ctx.drawingBufferColorSpace = "display-p3";
+      }
       if (!surface) {
         throw new Error("Could not create surface");
       }