react-native-skia 2.15.0 → 3.0.1

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { CanvasProps } from "./Canvas";
+/**
+ * The declarative canvas on the Graphite view. It takes the same props and
+ * exposes the same ref as {@link Canvas}, and draws the same children, but
+ * the frames are produced differently:
+ *
+ * - the JS thread records the scene graph into a native recorder once per
+ *   React commit and hands it to the view;
+ * - the Reanimated UI runtime only reads the shared values into it (the one
+ *   step that needs a JS runtime), it never replays anything;
+ * - a dedicated native thread pool replays the recorder into a Graphite
+ *   recording whenever the content changed, at most once per presented frame;
+ * - the view presents the recording on the next vsync.
+ *
+ * Neither the JS thread nor the UI thread pays for drawing. It requires the
+ * Graphite backend (install-skia-graphite); with the default backend the view
+ * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted
+ * for API compatibility and ignored: the Graphite view renders in sRGB and
+ * uses its own backing view.
+ */
+export declare const GraphiteCanvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

package/lib/module/renderer/GraphiteCanvas.js

@@ -0,0 +1,57 @@
+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 from "react";
+import SkiaGraphiteViewNativeComponent from "../specs/SkiaGraphiteViewNativeComponent";
+import { useCanvasRoot } from "./Canvas";
+
+/**
+ * The declarative canvas on the Graphite view. It takes the same props and
+ * exposes the same ref as {@link Canvas}, and draws the same children, but
+ * the frames are produced differently:
+ *
+ * - the JS thread records the scene graph into a native recorder once per
+ *   React commit and hands it to the view;
+ * - the Reanimated UI runtime only reads the shared values into it (the one
+ *   step that needs a JS runtime), it never replays anything;
+ * - a dedicated native thread pool replays the recorder into a Graphite
+ *   recording whenever the content changed, at most once per presented frame;
+ * - the view presents the recording on the next vsync.
+ *
+ * Neither the JS thread nor the UI thread pays for drawing. It requires the
+ * Graphite backend (install-skia-graphite); with the default backend the view
+ * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted
+ * for API compatibility and ignored: the Graphite view renders in sRGB and
+ * uses its own backing view.
+ */
+export const GraphiteCanvas = ({
+  debug,
+  opaque,
+  children,
+  onSize,
+  colorSpace,
+  highBitDepth = false,
+  androidWarmup,
+  android,
+  ref,
+  onLayout,
+  ...viewProps
+}) => {
+  const {
+    nativeId,
+    viewRef
+  } = useCanvasRoot({
+    children,
+    onSize,
+    ref,
+    onLayout
+  });
+  return /*#__PURE__*/React.createElement(SkiaGraphiteViewNativeComponent, _extends({
+    ref: viewRef,
+    collapsable: false,
+    nativeID: `${nativeId}`,
+    debug: debug,
+    opaque: opaque,
+    highBitDepth: highBitDepth,
+    onLayout: onLayout
+  }, viewProps));
+};
+//# sourceMappingURL=GraphiteCanvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","SkiaGraphiteViewNativeComponent","useCanvasRoot","GraphiteCanvas","debug","opaque","children","onSize","colorSpace","highBitDepth","androidWarmup","android","ref","onLayout","viewProps","nativeId","viewRef","createElement","_extends","collapsable","nativeID"],"sources":["GraphiteCanvas.tsx"],"sourcesContent":["import React from \"react\";\n\nimport SkiaGraphiteViewNativeComponent from \"../specs/SkiaGraphiteViewNativeComponent\";\n\nimport type { CanvasProps } from \"./Canvas\";\nimport { useCanvasRoot } from \"./Canvas\";\n\n/**\n * The declarative canvas on the Graphite view. It takes the same props and\n * exposes the same ref as {@link Canvas}, and draws the same children, but\n * the frames are produced differently:\n *\n * - the JS thread records the scene graph into a native recorder once per\n *   React commit and hands it to the view;\n * - the Reanimated UI runtime only reads the shared values into it (the one\n *   step that needs a JS runtime), it never replays anything;\n * - a dedicated native thread pool replays the recorder into a Graphite\n *   recording whenever the content changed, at most once per presented frame;\n * - the view presents the recording on the next vsync.\n *\n * Neither the JS thread nor the UI thread pays for drawing. It requires the\n * Graphite backend (install-skia-graphite); with the default backend the view\n * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted\n * for API compatibility and ignored: the Graphite view renders in sRGB and\n * uses its own backing view.\n */\nexport const GraphiteCanvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n\n  colorSpace,\n  highBitDepth = false,\n\n  androidWarmup,\n\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  const { nativeId, viewRef } = useCanvasRoot({\n    children,\n    onSize,\n    ref,\n    onLayout,\n  });\n  return (\n    <SkiaGraphiteViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      highBitDepth={highBitDepth}\n      onLayout={onLayout}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,+BAA+B,MAAM,0CAA0C;AAGtF,SAASC,aAAa,QAAQ,UAAU;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,MAAM;EAENC,UAAU;EACVC,YAAY,GAAG,KAAK;EAEpBC,aAAa;EAEbC,OAAO;EACPC,GAAG;EACHC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAM;IAAEC,QAAQ;IAAEC;EAAQ,CAAC,GAAGd,aAAa,CAAC;IAC1CI,QAAQ;IACRC,MAAM;IACNK,GAAG;IACHC;EACF,CAAC,CAAC;EACF,oBACEb,KAAA,CAAAiB,aAAA,CAAChB,+BAA+B,EAAAiB,QAAA;IAC9BN,GAAG,EAAEI,OAAQ;IACbG,WAAW,EAAE,KAAM;IACnBC,QAAQ,EAAE,GAAGL,QAAQ,EAAG;IACxBX,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfI,YAAY,EAAEA,YAAa;IAC3BI,QAAQ,EAAEA;EAAS,GACfC,SAAS,CACd,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/renderer/GraphiteCanvas.web.d.ts

@@ -0,0 +1 @@
+export { Canvas as GraphiteCanvas } from "./Canvas";

package/lib/module/renderer/GraphiteCanvas.web.js

@@ -0,0 +1,4 @@
+// The Graphite view is native only: on the web, GraphiteCanvas is the regular
+// Canvas.
+export { Canvas as GraphiteCanvas } from "./Canvas";
+//# sourceMappingURL=GraphiteCanvas.web.js.map

package/lib/module/renderer/GraphiteCanvas.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Canvas","GraphiteCanvas"],"sources":["GraphiteCanvas.web.tsx"],"sourcesContent":["// The Graphite view is native only: on the web, GraphiteCanvas is the regular\n// Canvas.\nexport { Canvas as GraphiteCanvas } from \"./Canvas\";\n"],"mappings":"AAAA;AACA;AACA,SAASA,MAAM,IAAIC,cAAc,QAAQ,UAAU","ignoreList":[]}

package/lib/typescript/src/index.d.ts

@@ -1,7 +1,10 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
-export * from "./renderer/Canvas";
+export { useCanvasRef, useCanvasSize } from "./renderer/Canvas";
+export type { CanvasProps, CanvasRef } from "./renderer/Canvas";
+export { GraphiteCanvas } from "./renderer/GraphiteCanvas";
+export { Canvas } from "./renderer/DefaultCanvas";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,6 +1,6 @@
 import type { FC, RefObject } from "react";
 import React from "react";
-import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
+import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, View, 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";
@@ -45,4 +45,13 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
     androidWarmup?: boolean;
     __destroyWebGLContextAfterRender?: boolean;
 }
+/**
+ * What every canvas shares, whichever native view it renders into: the native
+ * id, the scene graph root rendered into it, the `onSize` measurement and the
+ * imperative handle of the ref.
+ */
+export declare const useCanvasRoot: ({ children, onSize, ref, onLayout, }: Pick<CanvasProps, "children" | "onSize" | "ref" | "onLayout">) => {
+    nativeId: number;
+    viewRef: RefObject<View | null>;
+};
 export declare const Canvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

package/lib/typescript/src/renderer/DefaultCanvas.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { CanvasProps } from "./Canvas";
+/**
+ * `<Canvas>` renders {@link GraphiteCanvas} when React Native Skia is
+ * configured with the Graphite backend (install-skia-graphite), and the
+ * picture view based canvas otherwise. Both take the same props and ref.
+ */
+export declare const Canvas: (props: CanvasProps) => React.JSX.Element;

package/lib/typescript/src/renderer/GraphiteCanvas.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { CanvasProps } from "./Canvas";
+/**
+ * The declarative canvas on the Graphite view. It takes the same props and
+ * exposes the same ref as {@link Canvas}, and draws the same children, but
+ * the frames are produced differently:
+ *
+ * - the JS thread records the scene graph into a native recorder once per
+ *   React commit and hands it to the view;
+ * - the Reanimated UI runtime only reads the shared values into it (the one
+ *   step that needs a JS runtime), it never replays anything;
+ * - a dedicated native thread pool replays the recorder into a Graphite
+ *   recording whenever the content changed, at most once per presented frame;
+ * - the view presents the recording on the next vsync.
+ *
+ * Neither the JS thread nor the UI thread pays for drawing. It requires the
+ * Graphite backend (install-skia-graphite); with the default backend the view
+ * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted
+ * for API compatibility and ignored: the Graphite view renders in sRGB and
+ * uses its own backing view.
+ */
+export declare const GraphiteCanvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

package/lib/typescript/src/renderer/GraphiteCanvas.web.d.ts

@@ -0,0 +1 @@
+export { Canvas as GraphiteCanvas } from "./Canvas";

package/libs/.graphite

@@ -0,0 +1 @@
+m154

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.15.0",
+  "version": "3.0.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -142,16 +142,15 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.41.0",
-    "react-native-skia-android": "154.0.0",
-    "react-native-skia-apple-ios": "154.0.0",
-    "react-native-skia-apple-macos": "154.0.0",
-    "react-native-skia-apple-tvos": "154.0.0",
+    "react-native-skia-graphite-android": "154.0.1",
+    "react-native-skia-graphite-apple-ios": "154.0.1",
+    "react-native-skia-graphite-apple-macos": "154.0.1",
     "react-reconciler": "0.31.0"
   },
   "graphiteDependencies": {
-    "react-native-skia-graphite-android": "154.0.0",
-    "react-native-skia-graphite-apple-ios": "154.0.0",
-    "react-native-skia-graphite-apple-macos": "154.0.0"
+    "react-native-skia-graphite-android": "154.0.1",
+    "react-native-skia-graphite-apple-ios": "154.0.1",
+    "react-native-skia-graphite-apple-macos": "154.0.1"
   },
   "eslintIgnore": [
     "node_modules/",

package/react-native-skia.podspec

@@ -37,6 +37,11 @@ install_apple_skia_libs = lambda do |base_dir, packages|
     src = File.join(pkg_dir, 'libs')
     next unless Dir.exist?(src) && !Dir.glob(File.join(src, '*.xcframework')).empty?
 
+    # Graphite packages carry the Dawn release tag they ship (libs/.dawn-version),
+    # used below for the react-native-webgpu version check.
+    dawn_version = File.join(src, '.dawn-version')
+    FileUtils.cp(dawn_version, File.join(base_dir, 'libs', '.dawn-version')) if File.exist?(dawn_version)
+
     version = JSON.parse(File.read(File.join(pkg_dir, 'package.json')))['version'].to_s
     dest = File.join(base_dir, 'libs', platform)
     marker = File.join(dest, '.version')
@@ -110,7 +115,19 @@ if use_graphite && has_webgpu_pkg
     Pod::UI.puts "react-native-skia: Dawn versions match (#{skia_dawn})"
   end
 end
-framework_names += ['libwebgpu_dawn'] if use_graphite && !has_webgpu_pkg
+if use_graphite && !has_webgpu_pkg
+  # CocoaPods silently skips missing vendored frameworks, which would surface
+  # later as undefined dawn::native symbols at link time. Fail early instead.
+  %w[ios macos].each do |platform|
+    platform_dir = File.join(__dir__, 'libs', platform)
+    # A missing libs/<platform> is reported by the prebuilt binaries check below.
+    next if !Dir.exist?(platform_dir) || Dir.exist?(File.join(platform_dir, 'libwebgpu_dawn.xcframework'))
+    raise "react-native-skia: libwebgpu_dawn.xcframework not found in libs/#{platform}. " \
+          "The installed #{apple_skia_packages[platform]} package does not ship the shared " \
+          "Dawn library this Graphite build links against. Upgrade it, then run `pod install` again."
+  end
+  framework_names += ['libwebgpu_dawn']
+end
 
 # Verify that the prebuilt binaries are available (copied in above from the npm
 # packages, or downloaded by install-skia-graphite for in-repo Graphite builds).

package/src/index.ts

@@ -1,7 +1,10 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
-export * from "./renderer/Canvas";
+export { useCanvasRef, useCanvasSize } from "./renderer/Canvas";
+export type { CanvasProps, CanvasRef } from "./renderer/Canvas";
+export { GraphiteCanvas } from "./renderer/GraphiteCanvas";
+export { Canvas } from "./renderer/DefaultCanvas";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/src/mock/index.ts

@@ -23,6 +23,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    GraphiteCanvas: require("react-native").View,
     getPreferredHighBitDepthCanvasFormat: () => "rgba16float",
     SkiaPictureView: require("react-native").View,
     SkiaGraphiteView: require("react-native").View,

package/src/renderer/Canvas.tsx

@@ -98,19 +98,17 @@ const resolveSurfaceType = (
     ? surfaceType
     : "auto";
 
-export const Canvas = ({
-  debug,
-  opaque,
+/**
+ * What every canvas shares, whichever native view it renders into: the native
+ * id, the scene graph root rendered into it, the `onSize` measurement and the
+ * imperative handle of the ref.
+ */
+export const useCanvasRoot = ({
   children,
   onSize,
-  colorSpace = "p3",
-  highBitDepth = false,
-  androidWarmup = false,
-  android,
   ref,
   onLayout,
-  ...viewProps
-}: CanvasProps) => {
+}: Pick<CanvasProps, "children" | "onSize" | "ref" | "onLayout">) => {
   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"
@@ -185,6 +183,28 @@ export const Canvas = ({
         },
       }) as CanvasRef
   );
+  return { nativeId, viewRef };
+};
+
+export const Canvas = ({
+  debug,
+  opaque,
+  children,
+  onSize,
+  colorSpace = "p3",
+  highBitDepth = false,
+  androidWarmup = false,
+  android,
+  ref,
+  onLayout,
+  ...viewProps
+}: CanvasProps) => {
+  const { nativeId, viewRef } = useCanvasRoot({
+    children,
+    onSize,
+    ref,
+    onLayout,
+  });
 
   const onLayoutWeb = useCallback(
     (e: LayoutChangeEvent) => {

package/src/renderer/DefaultCanvas.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Skia } from "../skia";
+import { Platform } from "../Platform";
+
+import type { CanvasProps } from "./Canvas";
+import { Canvas as PictureCanvas } from "./Canvas";
+import { GraphiteCanvas } from "./GraphiteCanvas";
+
+let useGraphite: boolean | null = null;
+
+// Whether this build runs the Graphite backend. Resolved on the first render
+// (the native API is installed by then) and cached: getNativeDevice() throws
+// on Ganesh builds. On the web, GraphiteCanvas is the regular canvas anyway.
+const hasGraphite = () => {
+  if (useGraphite === null) {
+    if (Platform.OS === "web") {
+      useGraphite = false;
+    } else {
+      try {
+        useGraphite = typeof Skia.getNativeDevice() === "bigint";
+      } catch {
+        useGraphite = false;
+      }
+    }
+  }
+  return useGraphite;
+};
+
+/**
+ * `<Canvas>` renders {@link GraphiteCanvas} when React Native Skia is
+ * configured with the Graphite backend (install-skia-graphite), and the
+ * picture view based canvas otherwise. Both take the same props and ref.
+ */
+export const Canvas = (props: CanvasProps) => {
+  return hasGraphite() ? (
+    <GraphiteCanvas {...props} />
+  ) : (
+    <PictureCanvas {...props} />
+  );
+};

package/src/renderer/GraphiteCanvas.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import SkiaGraphiteViewNativeComponent from "../specs/SkiaGraphiteViewNativeComponent";
+
+import type { CanvasProps } from "./Canvas";
+import { useCanvasRoot } from "./Canvas";
+
+/**
+ * The declarative canvas on the Graphite view. It takes the same props and
+ * exposes the same ref as {@link Canvas}, and draws the same children, but
+ * the frames are produced differently:
+ *
+ * - the JS thread records the scene graph into a native recorder once per
+ *   React commit and hands it to the view;
+ * - the Reanimated UI runtime only reads the shared values into it (the one
+ *   step that needs a JS runtime), it never replays anything;
+ * - a dedicated native thread pool replays the recorder into a Graphite
+ *   recording whenever the content changed, at most once per presented frame;
+ * - the view presents the recording on the next vsync.
+ *
+ * Neither the JS thread nor the UI thread pays for drawing. It requires the
+ * Graphite backend (install-skia-graphite); with the default backend the view
+ * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted
+ * for API compatibility and ignored: the Graphite view renders in sRGB and
+ * uses its own backing view.
+ */
+export const GraphiteCanvas = ({
+  debug,
+  opaque,
+  children,
+  onSize,
+
+  colorSpace,
+  highBitDepth = false,
+
+  androidWarmup,
+
+  android,
+  ref,
+  onLayout,
+  ...viewProps
+}: CanvasProps) => {
+  const { nativeId, viewRef } = useCanvasRoot({
+    children,
+    onSize,
+    ref,
+    onLayout,
+  });
+  return (
+    <SkiaGraphiteViewNativeComponent
+      ref={viewRef}
+      collapsable={false}
+      nativeID={`${nativeId}`}
+      debug={debug}
+      opaque={opaque}
+      highBitDepth={highBitDepth}
+      onLayout={onLayout}
+      {...viewProps}
+    />
+  );
+};

package/src/renderer/GraphiteCanvas.web.tsx

@@ -0,0 +1,3 @@
+// The Graphite view is native only: on the web, GraphiteCanvas is the regular
+// Canvas.
+export { Canvas as GraphiteCanvas } from "./Canvas";