@shopify/react-native-skia 2.0.1 → 2.0.3

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");
       }