react-native-skia 3.0.1 → 3.0.3

package/react-native-skia.podspec

@@ -1,14 +1,10 @@
-# @shopify/react-native-skia.podspec
+# react-native-skia.podspec
 
 require "json"
 require "fileutils"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# Check if Graphite is enabled via marker file (created by install-skia-graphite)
-use_graphite = File.exist?(File.join(__dir__, 'libs', '.graphite'))
-puts "-- SK_GRAPHITE: #{use_graphite ? 'ON' : 'OFF'} (detected via libs/.graphite marker file)"
-
 # Resolve a node package directory using Node's own module resolution
 # (mirrors `require.resolve(pkg/package.json)`). Returns nil if it can't be found.
 # Defined as a lambda (not a `def`) because CocoaPods evaluates the podspec inside
@@ -40,12 +36,22 @@ install_apple_skia_libs = lambda do |base_dir, packages|
     # 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)
+    if File.exist?(dawn_version)
+      FileUtils.mkdir_p(File.join(base_dir, 'libs'))
+      FileUtils.cp(dawn_version, File.join(base_dir, 'libs', '.dawn-version'))
+    end
 
     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')
 
+    # Frameworks without a .version stamp were built locally (`yarn build-skia`):
+    # keep them instead of overwriting them with the npm package.
+    if !File.exist?(marker) && !Dir.glob(File.join(dest, '*.xcframework')).empty?
+      Pod::UI.puts "react-native-skia: using locally built #{platform} Skia frameworks"
+      next
+    end
+
     # Already up to date: leave the files untouched so CocoaPods keeps its cache.
     next if File.exist?(marker) && File.read(marker).strip == version
 
@@ -57,23 +63,15 @@ install_apple_skia_libs = lambda do |base_dir, packages|
   end
 end
 
-# The default (Ganesh) build ships its binaries in the react-native-skia-apple-*
-# npm packages, the Graphite build in react-native-skia-graphite-apple-* (no tvOS).
-# During in-repo development install-skia-graphite downloads the binaries directly
-# into libs/ and the graphite packages are absent from node_modules, in which case
-# the copy below is a no-op and the downloaded binaries are used as-is.
-apple_skia_packages = use_graphite ?
-  { 'ios' => 'react-native-skia-graphite-apple-ios',
-    'macos' => 'react-native-skia-graphite-apple-macos' } :
-  { 'ios' => 'react-native-skia-apple-ios',
-    'macos' => 'react-native-skia-apple-macos',
-    'tvos' => 'react-native-skia-apple-tvos' }
+# The Graphite binaries ship in the react-native-skia-graphite-apple-* npm
+# packages (no tvOS), together with the shared Dawn (libwebgpu_dawn.xcframework).
+apple_skia_packages = {
+  'ios' => 'react-native-skia-graphite-apple-ios',
+  'macos' => 'react-native-skia-graphite-apple-macos'
+}
 install_apple_skia_libs.call(__dir__, apple_skia_packages)
 
-# Set preprocessor definitions based on GRAPHITE flag
-preprocessor_defs = use_graphite ?
-  '$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1' :
-  '$(inherited) SK_METAL=1 SK_GANESH=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1'
+preprocessor_defs = '$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1'
 
 # Define framework names
 framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
@@ -86,14 +84,18 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
 # vendoring the framework here as well would fail CocoaPods'
 # duplicate-framework-name check, so Skia only vendors it when alone. The
 # skia pod's dawn::native references resolve from webgpu's copy at app link.
+# An app that installs react-native-webgpu but keeps it out of a platform's
+# Pods (e.g. a macOS target that filters it out of autolinking) sets
+# RNSKIA_VENDOR_DAWN=1 before `pod install` so Skia vendors Dawn itself there.
 webgpu_pkg_dir = resolve_node_package.call('react-native-webgpu', __dir__)
-has_webgpu_pkg = !webgpu_pkg_dir.nil?
-if use_graphite && has_webgpu_pkg
+has_webgpu_pkg = !webgpu_pkg_dir.nil? && ENV['RNSKIA_VENDOR_DAWN'] != '1'
+if has_webgpu_pkg
   Pod::UI.puts 'react-native-skia: react-native-webgpu detected, Dawn is provided by its libwebgpu_dawn'
 
   # Both packages must link the exact same Dawn artifact. Compare the release
-  # tag this Graphite build was installed with (libs/.dawn-version) against
-  # the tag react-native-webgpu declares in its package.json `dawn` field.
+  # tag the Skia binaries were packaged with (libs/.dawn-version, copied in from
+  # the binary package above) against the tag react-native-webgpu declares in
+  # its package.json `dawn` field.
   dawn_marker = File.join(__dir__, 'libs', '.dawn-version')
   if File.exist?(dawn_marker)
     skia_dawn = File.read(dawn_marker).strip
@@ -115,7 +117,7 @@ if use_graphite && has_webgpu_pkg
     Pod::UI.puts "react-native-skia: Dawn versions match (#{skia_dawn})"
   end
 end
-if use_graphite && !has_webgpu_pkg
+unless 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|
@@ -130,7 +132,7 @@ if use_graphite && !has_webgpu_pkg
 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).
+# packages, or built locally with `yarn build-skia`).
 unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
   expected_packages = apple_skia_packages.values.join(', ')
   Pod::UI.warn "#{'-' * 72}"
@@ -143,33 +145,26 @@ unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__d
 end
 
 # Build platform-specific framework paths (relative to pod's libs directory)
-# xcframeworks are copied into libs/ by install_apple_skia_libs above (default build)
-# or downloaded by install-skia-graphite (Graphite build).
+# xcframeworks are copied into libs/ by install_apple_skia_libs above.
 ios_frameworks = framework_names.map { |f| "libs/ios/#{f}.xcframework" }
 osx_frameworks = framework_names.map { |f| "libs/macos/#{f}.xcframework" }
-# tvOS frameworks - check if libs/tvos/ exists (only populated for the default build)
-tvos_frameworks = if use_graphite || !Dir.exist?(File.join(__dir__, 'libs', 'tvos'))
-  []
-else
-  framework_names.map { |f| "libs/tvos/#{f}.xcframework" }
-end
 
 Pod::Spec.new do |s|
   s.name         = "react-native-skia"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.description  = <<-DESC
-                  @shopify/react-native-skia
+                  react-native-skia
                    DESC
-  s.homepage     = "https://github.com/shopify/react-native-skia"
+  s.homepage     = "https://github.com/wcandillon/react-native-skia"
   s.license      = "MIT"
   s.license    = { :type => "MIT", :file => "LICENSE.md" }
   s.authors      = {
     "Christian Falch" => "christian.falch@gmail.com",
     "William Candillon" => "wcandillon@gmail.com"
   }
-  s.platforms    = { :ios => "14.0", :tvos => "13.0", :osx => "11" }
-  s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
+  s.platforms    = { :ios => "15.1", :osx => "11" }
+  s.source       = { :git => "https://github.com/wcandillon/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true
   s.pod_target_xcconfig = {
@@ -185,11 +180,6 @@ Pod::Spec.new do |s|
   s.ios.vendored_frameworks = ios_frameworks
   s.osx.vendored_frameworks = osx_frameworks
 
-  # tvOS frameworks only available for non-Graphite builds
-  unless use_graphite
-    s.tvos.vendored_frameworks = tvos_frameworks
-  end
-
   # Preserve the copied libs directory
   s.preserve_paths = ["libs/**/*"]
 
@@ -199,20 +189,6 @@ Pod::Spec.new do |s|
     "cpp/**/*.{h,cpp}"
   ]
 
-  graphite_exclusions = [
-    'cpp/rnskia/RNDawnContext.h',
-    'cpp/rnskia/RNDawnUtils.h',
-    'cpp/rnskia/RNMetalLayerColorSpace.h',
-    'cpp/rnskia/RNDawnWindowContext.h',
-    'cpp/rnskia/RNDawnWindowContext.cpp',
-    'cpp/rnskia/RNDawnInterop.cpp',
-    'cpp/rnskia/RNImageProvider.h',
-    'cpp/rnskia/RNSkGraphiteView.h',
-    'cpp/api/JsiSkGraphiteContext.h',
-    'cpp/api/JsiSkGraphiteRecording.h'
-  ]
-  s.exclude_files = graphite_exclusions unless use_graphite
-
   install_modules_dependencies(s)
   s.dependency "React"
   s.dependency "React-callinvoker"

package/src/Platform/Platform.web.tsx

@@ -7,7 +7,7 @@ import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
-// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
+// Layout is observed by the views themselves (see SkiaView.web.tsx):
 // this shim only reproduces react-native-web's default View styling.
 const View = (({ children, style: rawStyle }: ViewProps) => {
   const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);

package/src/external/reanimated/interpolators.ts

@@ -115,7 +115,7 @@ export const usePathInterpolation = (
     // For example, throw an error or return early
     throw new Error(
       `Not all paths in the output range are interpolable.
-See: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`
+See: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`
     );
   }
   return useInterpolator(

package/src/index.ts

@@ -1,10 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
-export { useCanvasRef, useCanvasSize } from "./renderer/Canvas";
+export { Canvas, 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,7 +23,6 @@ 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

@@ -19,8 +19,9 @@ import type { SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
-import type { AndroidCanvasProps, AndroidSurfaceType } from "../views/types";
-import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { androidNativeProps } from "../views/android";
+import type { AndroidCanvasProps } from "../views/types";
+import SkiaViewNativeComponent from "../specs/SkiaViewNativeComponent";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
@@ -61,7 +62,6 @@ export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
 };
 
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
-  debug?: boolean;
   /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */
   onLayout?: ViewProps["onLayout"];
   /**
@@ -72,7 +72,6 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
    */
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
-  colorSpace?: "p3" | "srgb";
   /**
    * Renders into a surface with more than 8 bits per channel (16-bit float on
    * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are
@@ -85,25 +84,14 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   /** Android-only rendering options. Ignored on iOS and web. */
   android?: AndroidCanvasProps;
   ref?: React.Ref<CanvasRef>;
-  androidWarmup?: boolean;
   __destroyWebGLContextAfterRender?: boolean;
 }
 
-// Anything else reaching the native component would hit the generated
-// string-enum parser, which aborts on unknown values.
-const resolveSurfaceType = (
-  surfaceType: AndroidSurfaceType | undefined
-): "auto" | AndroidSurfaceType =>
-  surfaceType === "SurfaceView" || surfaceType === "TextureView"
-    ? surfaceType
-    : "auto";
-
 /**
- * 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.
+ * What the canvas owns: the native id, the scene graph root rendered into it,
+ * the `onSize` measurement and the imperative handle of the ref.
  */
-export const useCanvasRoot = ({
+const useCanvasRoot = ({
   children,
   onSize,
   ref,
@@ -111,7 +99,7 @@ export const useCanvasRoot = ({
 }: 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"
+      "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size"
     );
   }
   const viewRef = useCanvasRefPriv(null);
@@ -186,14 +174,26 @@ export const useCanvasRoot = ({
   return { nativeId, viewRef };
 };
 
+/**
+ * The declarative canvas. Its children are rendered by Skia's own React
+ * renderer; the frames are produced off the JS thread:
+ *
+ * - 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.
+ *
+ * On the web the scene is drawn into a picture on the JS thread and painted
+ * on a WebGL canvas.
+ */
 export const Canvas = ({
-  debug,
   opaque,
   children,
   onSize,
-  colorSpace = "p3",
   highBitDepth = false,
-  androidWarmup = false,
   android,
   ref,
   onLayout,
@@ -219,17 +219,13 @@ export const Canvas = ({
     [onLayout, onSize]
   );
   return (
-    <SkiaPictureViewNativeComponent
+    <SkiaViewNativeComponent
       ref={viewRef}
       collapsable={false}
       nativeID={`${nativeId}`}
-      debug={debug}
       opaque={opaque}
-      colorSpace={colorSpace}
       highBitDepth={highBitDepth}
-      androidWarmup={androidWarmup}
-      androidSurfaceType={resolveSurfaceType(android?.surfaceType)}
-      androidZOrderOnTop={!!android?.zOrderOnTop}
+      {...androidNativeProps(android)}
       onLayout={
         Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout
       }

package/src/skia/types/Graphite.ts

@@ -2,13 +2,13 @@ import type { SkCanvas } from "./Canvas";
 import type { SkJSIInstance } from "./JsiInstance";
 
 /**
- * A frame recorded for a SkiaGraphiteView. Immutable once finished: submit it
- * to the view as many times as needed, from any runtime.
+ * A frame recorded for a view. Immutable once finished: submit it to the view
+ * as many times as needed, from any runtime.
  */
 export type SkGraphiteRecording = SkJSIInstance<"GraphiteRecording">;
 
 /**
- * The recording side of a SkiaGraphiteView, obtained from the view's ref.
+ * The recording side of a view, obtained from the ref of a SkiaGraphiteView.
  *
  * Frames are recorded on the calling thread and presented by the view on its
  * display link, so the context can be captured into a worklet and used from

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

@@ -106,7 +106,7 @@ export interface ImageFactory {
    * while the image is in use: destroy() releases the underlying GPU
    * resource regardless of reference counts.
    *
-   * Note: This method is only available when the Graphite backend is enabled.
+   * Native only.
    *
    * @param pointer - The WGPUTexture pointer (texture.nativePointer)
    * @returns An SkImage wrapping the texture, or throws if the texture is invalid
@@ -119,7 +119,7 @@ export interface ImageFactory {
    * returned pointer carries one reference and must be adopted exactly once
    * with react-native-webgpu's adoptTexture(), which owns it from then on.
    *
-   * Note: This method is only available when the Graphite backend is enabled.
+   * Native only.
    *
    * @param image - An SkImage to convert to a texture
    * @returns A WGPUTexture pointer for adoptTexture(), or throws on failure

package/src/skia/types/Skia.ts

@@ -106,8 +106,7 @@ export interface Skia {
   /**
    * Raw WGPUDevice pointer of Skia's Graphite device, as a BigInt. Pass it to
    * react-native-webgpu's importDevice() to get a GPUDevice sharing Skia's
-   * device (zero-copy interop). Only available on Graphite builds; throws
-   * otherwise.
+   * device (zero-copy interop). Native only.
    */
   getNativeDevice(): bigint;
 }

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

@@ -43,7 +43,7 @@ export interface SurfaceFactory {
    * surface exists. Calling destroy() on the GPUTexture still invalidates
    * the surface.
    *
-   * Note: This method is only available when the Graphite backend is enabled.
+   * Native only.
    *
    * @param pointer - The WGPUTexture pointer (texture.nativePointer)
    * @returns An SkSurface rendering into the texture, or throws if the texture is invalid

package/src/specs/NativeSkiaModule.web.ts

@@ -7,8 +7,12 @@ import type {
 } from "../skia/types";
 import type { ISkiaViewApi } from "../views/types";
 
-/** What every web view registers under its native id. */
+/** What the web view registers under its native id. */
 export interface SkiaWebViewHandle {
+  /** Shows a picture: the frame of a <Canvas> or a <SkiaPictureView>. */
+  setPicture(picture: SkPicture): void;
+  /** The recording side of the view, see SkiaGraphiteView. */
+  getContext(): SkGraphiteContext;
   getSize(): { width: number; height: number };
   redraw(): void;
   makeImageSnapshot(rect?: SkRect): SkImage | null;
@@ -27,20 +31,6 @@ export interface SkiaWebViewHandle {
   ): void;
 }
 
-export interface SkiaGraphiteViewHandle extends SkiaWebViewHandle {
-  getContext(): SkGraphiteContext;
-}
-
-interface PictureHandle extends SkiaWebViewHandle {
-  setPicture(picture: SkPicture): void;
-}
-
-const hasPicture = (view: SkiaWebViewHandle): view is PictureHandle =>
-  "setPicture" in view;
-
-const hasContext = (view: SkiaWebViewHandle): view is SkiaGraphiteViewHandle =>
-  "getContext" in view;
-
 export type ISkiaViewApiWeb = ISkiaViewApi & {
   views: Record<string, SkiaWebViewHandle>;
   deferedPictures: Record<string, SkPicture>;
@@ -58,7 +48,7 @@ global.SkiaViewApi = {
   registerView(nativeId: string, view: SkiaWebViewHandle) {
     this.unregisteredViews.delete(nativeId);
     // Maybe a picture for this view was already set
-    if (this.deferedPictures[nativeId] && hasPicture(view)) {
+    if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);
       delete this.deferedPictures[nativeId];
     }
@@ -77,9 +67,7 @@ global.SkiaViewApi = {
       const id = `${nativeId}`;
       const view = this.views[id];
       if (view) {
-        if (hasPicture(view)) {
-          view.setPicture(value);
-        }
+        view.setPicture(value);
       } else if (!this.unregisteredViews.has(id)) {
         this.deferedPictures[id] = value;
       }
@@ -114,9 +102,9 @@ global.SkiaViewApi = {
   },
   makeGraphiteContext(nativeId: number) {
     const view = this.views[`${nativeId}`];
-    if (!view || !hasContext(view)) {
+    if (!view) {
       throw new Error(
-        `Cannot make a Graphite context: no SkiaGraphiteView with nativeID ${nativeId} is mounted`
+        `Cannot make a Graphite context: no view with nativeID ${nativeId} is mounted`
       );
     }
     return view.getContext();

package/src/specs/{SkiaPictureViewNativeComponent.ts → SkiaViewNativeComponent.ts}

@@ -4,11 +4,8 @@ import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - pointerEvents needs to be redeclared for codegen to generate native bindings
 export interface NativeProps extends ViewProps {
-  debug?: boolean;
   opaque?: boolean;
-  colorSpace?: string;
   highBitDepth?: boolean;
-  androidWarmup?: boolean;
   androidSurfaceType?: WithDefault<
     "auto" | "SurfaceView" | "TextureView",
     "auto"
@@ -21,4 +18,4 @@ export interface NativeProps extends ViewProps {
 }
 
 // eslint-disable-next-line import/no-default-export
-export default codegenNativeComponent<NativeProps>("SkiaPictureView");
+export default codegenNativeComponent<NativeProps>("SkiaView");

package/src/specs/{SkiaPictureViewNativeComponent.web.ts → SkiaViewNativeComponent.web.ts}

@@ -1,33 +1,31 @@
 import type { ViewProps } from "react-native";
 import { createElement } from "react";
 
-import { SkiaPictureView } from "../views/SkiaPictureView.web";
+import { SkiaView } from "../views/SkiaView.web";
 
 export interface NativeProps extends ViewProps {
-  debug?: boolean;
   opaque?: boolean;
+  highBitDepth?: boolean;
   nativeID: string;
   androidSurfaceType?: "auto" | "SurfaceView" | "TextureView";
   androidZOrderOnTop?: boolean;
 }
 
-const SkiaPictureViewNativeComponent = ({
+const SkiaViewNativeComponent = ({
   nativeID,
-  debug,
-  opaque,
   onLayout,
-  // Android-only, never reaches the DOM
+  // Surface settings, never reach the DOM
+  opaque: _opaque,
+  highBitDepth: _highBitDepth,
   androidSurfaceType: _androidSurfaceType,
   androidZOrderOnTop: _androidZOrderOnTop,
   ...viewProps
 }: NativeProps) => {
-  return createElement(SkiaPictureView, {
+  return createElement(SkiaView, {
     nativeID,
-    debug,
-    opaque,
     onLayout,
     ...viewProps,
   });
 };
 // eslint-disable-next-line import/no-default-export
-export default SkiaPictureViewNativeComponent;
+export default SkiaViewNativeComponent;

package/src/views/SkiaGraphiteView.tsx

@@ -1,9 +1,11 @@
 import React, { useImperativeHandle, useMemo, useRef } from "react";
 
 import type { SkGraphiteContext } from "../skia/types";
-import SkiaGraphiteViewNativeComponent from "../specs/SkiaGraphiteViewNativeComponent";
+import SkiaViewNativeComponent from "../specs/SkiaViewNativeComponent";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
+import { androidNativeProps } from "./android";
 import type { SkiaGraphiteViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
@@ -20,40 +22,49 @@ export interface SkiaGraphiteViewProps extends SkiaGraphiteViewNativeProps {
   ref?: React.Ref<SkiaGraphiteViewRef>;
 }
 
+// The layout is known synchronously on the new architecture;
+// getBoundingClientRect became stable in React Native 0.83. On the web the
+// view measures itself (see SkiaView.web).
+const measureLayout = (view: unknown) => {
+  if (Platform.OS === "web") {
+    return { width: 0, height: 0 };
+  }
+  const host = view as {
+    getBoundingClientRect?: () => { width: number; height: number };
+    unstable_getBoundingClientRect: () => { width: number; height: number };
+  };
+  return host.getBoundingClientRect
+    ? host.getBoundingClientRect()
+    : host.unstable_getBoundingClientRect();
+};
+
 /**
- * A view presenting frames recorded with Skia Graphite. Requires the Graphite
- * backend (install-skia-graphite); with the default backend it renders
- * nothing. See {@link SkGraphiteContext}.
+ * A view whose frames are recorded from JavaScript, on any runtime, through
+ * the context of its ref. See {@link SkGraphiteContext}.
  */
 export const SkiaGraphiteView = ({
-  debug = false,
   opaque = false,
   highBitDepth = false,
+  android,
   ref,
   ...viewProps
 }: SkiaGraphiteViewProps) => {
   const nativeId = useMemo(() => SkiaViewNativeId.current++, []);
   const viewRef =
-    useRef<React.ComponentRef<typeof SkiaGraphiteViewNativeComponent>>(null);
+    useRef<React.ComponentRef<typeof SkiaViewNativeComponent>>(null);
   useImperativeHandle(
     ref,
     () => ({
       getNativeId: () => nativeId,
       getContext: () => {
         assertSkiaViewApi();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const view = viewRef.current as any;
+        const view = viewRef.current;
         if (!view) {
           throw new Error(
             "SkiaGraphiteView: getContext() was called before the view was mounted."
           );
         }
-        // The layout is known synchronously on the new architecture;
-        // getBoundingClientRect became stable in React Native 0.83.
-        const size =
-          "getBoundingClientRect" in view
-            ? view.getBoundingClientRect()
-            : view.unstable_getBoundingClientRect();
+        const size = measureLayout(view);
         return SkiaViewApi.makeGraphiteContext(
           nativeId,
           size.width,
@@ -66,13 +77,13 @@ export const SkiaGraphiteView = ({
     [nativeId, opaque, highBitDepth]
   );
   return (
-    <SkiaGraphiteViewNativeComponent
+    <SkiaViewNativeComponent
       ref={viewRef}
       collapsable={false}
       nativeID={`${nativeId}`}
-      debug={debug}
       opaque={opaque}
       highBitDepth={highBitDepth}
+      {...androidNativeProps(android)}
       {...viewProps}
     />
   );