react-native-skia 3.0.0 → 3.0.2

package/src/views/{SkiaGraphiteView.web.tsx → SkiaView.web.tsx}

@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import type { ViewProps } from "react-native";
 
 import type {
   SkCanvas,
@@ -19,31 +20,30 @@ import { JsiSkPictureRecorder } from "../skia/web/JsiSkPictureRecorder";
 import { Platform } from "../Platform";
 import type {
   ISkiaViewApiWeb,
-  SkiaGraphiteViewHandle,
+  SkiaWebViewHandle,
 } from "../specs/NativeSkiaModule.web";
 
-import type { SkiaGraphiteViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 import { useSkiaWebRenderer } from "./SkiaWebRenderer";
-import type { Renderer } from "./SkiaWebRenderer";
-
-// The web has no Graphite: a recording is an SkPicture, replayed onto the
-// view's WebGL surface by the same renderer as SkiaPictureView (with its
-// context-loss handling and the destroy-context-after-render mode). Frames
-// keep their native semantics, presented in submission order and never
-// dropped, with one difference: the surface starts cleared on every frame,
-// so a recording draws the whole frame rather than a delta.
-
-export interface SkiaGraphiteViewRef {
-  /**
-   * The recording side of the view. Call it once the view is mounted.
-   */
-  getContext(): SkGraphiteContext;
-  getNativeId(): number;
+import type { Renderer, WebFrame } from "./SkiaWebRenderer";
+
+// The web has no Graphite: the view paints pictures on a WebGL canvas (with
+// context-loss recovery and the destroy-context-after-render mode). It shows
+// one of two kinds of content. The picture of a <Canvas> or a
+// <SkiaPictureView> is a whole frame: the latest one wins. The recordings
+// submitted through the view's context (SkiaGraphiteView) keep their native
+// semantics, presented in submission order and never dropped, with one
+// difference: the surface starts cleared on every frame, so a recording draws
+// the whole frame rather than a delta.
+
+export interface SkiaViewHandle extends SkiaWebViewHandle {
+  /** The canvas element, for Reanimated's measure(). */
+  readonly canvasRef: () => HTMLCanvasElement | null;
 }
 
-export interface SkiaGraphiteViewProps extends SkiaGraphiteViewNativeProps {
-  ref?: React.Ref<SkiaGraphiteViewRef>;
+export interface SkiaViewProps extends ViewProps {
+  ref?: React.Ref<SkiaViewHandle>;
+  __destroyWebGLContextAfterRender?: boolean;
 }
 
 /**
@@ -146,9 +146,11 @@ class WebGraphiteContext implements SkGraphiteContext {
   [Symbol.dispose]() {}
 }
 
-export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
+export const SkiaView = (props: SkiaViewProps) => {
   const { ref, onLayout } = props;
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  // The picture of a <Canvas> or a <SkiaPictureView>: a whole frame.
+  const pictureRef = useRef<SkPicture | null>(null);
   // Recordings submitted since the last frame, in order, and the frame on
   // screen, replayed when the surface is recreated.
   const queueRef = useRef<WebGraphiteRecording[]>([]);
@@ -164,9 +166,9 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
 
   const isStatic = props.__destroyWebGLContextAfterRender === true;
 
-  // Presents what was submitted since the last frame. A frame that cannot be
-  // painted yet (unmeasured canvas, lost context) stays queued for the next
-  // opportunity.
+  // Presents the recordings submitted since the last frame. A frame that
+  // cannot be painted yet (unmeasured canvas, lost context) stays queued for
+  // the next opportunity.
   const present = useCallback((renderer: Renderer) => {
     const frame = queueRef.current;
     if (frame.length === 0) {
@@ -182,10 +184,14 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
     previous.forEach((recording) => recording.release());
   }, []);
 
+  // Paints what the view holds: pending recordings first, else the picture,
+  // else the frame on screen again (the surface was recreated).
   const paint = useCallback(
     (renderer: Renderer) => {
       if (queueRef.current.length > 0) {
         present(renderer);
+      } else if (pictureRef.current) {
+        renderer.draw([pictureRef.current]);
       } else if (shownRef.current.length > 0) {
         renderer.draw(shownRef.current.map((recording) => recording.picture));
       }
@@ -197,27 +203,44 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
     onLayout,
   });
 
+  // Draws are flushed from a microtask rather than an animation frame: the
+  // browser composites once per frame either way, and painting right away
+  // keeps a frame produced inside an animation callback (the Reanimated
+  // mapper, a frame loop) from slipping to the next one. Deferring to the
+  // next animation frame would alternate between "flush pending in this
+  // frame" and "flush scheduled for the next frame", halving the effective
+  // frame rate. Without a renderer yet (an unmeasured canvas), the content
+  // stays held and is painted by the renderer once it exists, so it is
+  // never lost.
   const flush = useCallback(() => {
     flushScheduledRef.current = false;
     if (rendererRef.current) {
-      present(rendererRef.current);
+      paint(rendererRef.current);
+    }
+  }, [paint, rendererRef]);
+
+  const redraw = useCallback(() => {
+    if (!flushScheduledRef.current) {
+      flushScheduledRef.current = true;
+      queueMicrotask(flush);
     }
-  }, [present, rendererRef]);
+  }, [flush]);
+
+  const setPicture = useCallback(
+    (picture: SkPicture) => {
+      pictureRef.current = picture;
+      redraw();
+    },
+    [redraw]
+  );
 
-  // Frames are presented from a microtask rather than an animation frame:
-  // the browser composites once per frame either way, and painting right
-  // away keeps a frame recorded inside an animation callback from slipping
-  // to the next one (see SkiaPictureView.web).
   const submit = useCallback(
     (recording: WebGraphiteRecording) => {
       recording.retain();
       queueRef.current.push(recording);
-      if (!flushScheduledRef.current) {
-        flushScheduledRef.current = true;
-        queueMicrotask(flush);
-      }
+      redraw();
     },
-    [flush]
+    [redraw]
   );
 
   const getSize = useCallback(
@@ -233,23 +256,24 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
     [getSize, submit]
   );
 
-  const redraw = useCallback(() => {
-    if (rendererRef.current) {
-      paint(rendererRef.current);
-    }
-  }, [paint, rendererRef]);
-
   const makeImageSnapshot = useCallback(
     (rect?: SkRect): SkImage | null => {
-      const frame =
-        queueRef.current.length > 0 ? queueRef.current : shownRef.current;
-      if (!rendererRef.current || frame.length === 0) {
+      const renderer = rendererRef.current;
+      if (!renderer) {
         return null;
       }
-      return rendererRef.current.makeImageSnapshot(
-        frame.map((recording) => recording.picture),
-        rect
-      );
+      let frame: WebFrame;
+      if (queueRef.current.length > 0) {
+        frame = queueRef.current.map((recording) => recording.picture);
+      } else if (pictureRef.current) {
+        frame = [pictureRef.current];
+      } else {
+        frame = shownRef.current.map((recording) => recording.picture);
+      }
+      if (frame.length === 0) {
+        return null;
+      }
+      return renderer.makeImageSnapshot(frame, rect);
     },
     [rendererRef]
   );
@@ -273,10 +297,12 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
           top: 0,
         };
         callback(
+          // x, y are relative to the parent
           rect.left - parentRect.left,
           rect.top - parentRect.top,
           rect.width,
           rect.height,
+          // pageX, pageY are absolute screen coordinates
           rect.left + window.scrollX,
           rect.top + window.scrollY
         );
@@ -297,29 +323,53 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
     []
   );
 
+  // No flush cancellation is needed on unmount: a microtask queued before
+  // unmount runs within the same task, and flush no-ops once the
+  // layout-effect cleanup has nulled rendererRef.
+
   useImperativeHandle(
     ref,
     () => ({
+      setPicture,
       getContext,
-      getNativeId: () => nativeId,
+      getSize,
+      redraw,
+      makeImageSnapshot,
+      measure,
+      measureInWindow,
+      get canvasRef() {
+        return () => canvasRef.current;
+      },
     }),
-    [getContext, nativeId]
+    [
+      setPicture,
+      getContext,
+      getSize,
+      redraw,
+      makeImageSnapshot,
+      measure,
+      measureInWindow,
+    ]
   );
 
   useEffect(() => {
     const api = global.SkiaViewApi as ISkiaViewApiWeb;
     api.registerView(`${nativeId}`, {
+      setPicture,
       getContext,
       getSize,
       redraw,
       makeImageSnapshot,
       measure,
       measureInWindow,
-    } as SkiaGraphiteViewHandle);
+    });
     return () => {
+      // Views must be removed on unmount: the handle's closures capture the
+      // canvas element, so a stale entry retains the whole detached DOM tree.
       api.unregisterView(`${nativeId}`);
     };
   }, [
+    setPicture,
     getContext,
     getSize,
     redraw,
@@ -341,9 +391,6 @@ export const SkiaGraphiteView = (props: SkiaGraphiteViewProps) => {
   );
 
   const {
-    debug: _debug,
-    opaque: _opaque,
-    highBitDepth: _highBitDepth,
     ref: _ref,
     onLayout: _onLayout,
     nativeID: _nativeID,

package/src/views/SkiaWebRenderer.ts

@@ -7,7 +7,7 @@ import type { GrDirectContext, WebGLContextHandle } from "canvaskit-wasm";
 import type { SkRect, SkPicture, SkImage } from "../skia/types";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 
-// The WebGL renderers behind the web views (SkiaPictureView, SkiaGraphiteView):
+// The WebGL renderers behind the web view (SkiaView.web):
 // a <canvas> element, its WebGL context and the CanvasKit surface built on
 // it, with the context-loss handling and the "destroy the context after each
 // draw" mode that keeps a page under the browser's live-context limit.

package/src/views/android.ts

@@ -0,0 +1,16 @@
+import type { AndroidCanvasProps, AndroidSurfaceType } from "./types";
+
+// 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";
+
+/** The native props the `android` prop of a view resolves to. */
+export const androidNativeProps = (android?: AndroidCanvasProps) => ({
+  androidSurfaceType: resolveSurfaceType(android?.surfaceType),
+  androidZOrderOnTop: !!android?.zOrderOnTop,
+});

package/src/views/types.ts

@@ -9,11 +9,6 @@ import type {
   SkSize,
 } from "../skia/types";
 
-export type NativeSkiaViewProps = ViewProps & {
-  debug?: boolean;
-  opaque?: boolean;
-};
-
 export type AndroidSurfaceType = "SurfaceView" | "TextureView";
 
 export interface AndroidCanvasProps {
@@ -50,8 +45,8 @@ export interface ISkiaViewApi {
   makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
   size: (nativeId: number) => SkSize;
   /**
-   * The recording side of a SkiaGraphiteView: its native id, the layout size
-   * in points, and the props its surface format follows from. Graphite only.
+   * The recording side of a view: its native id, the layout size in points,
+   * and the props its surface format follows from.
    */
   makeGraphiteContext: (
     nativeId: number,
@@ -62,13 +57,8 @@ export interface ISkiaViewApi {
   ) => SkGraphiteContext;
 }
 
+/** The props every Skia view takes, whichever way it is drawn. */
 export interface SkiaBaseViewProps extends ViewProps {
-  /**
-   * When set to true the view will display information about the
-   * average time it takes to render.
-   */
-  debug?: boolean;
-
   /**
    * 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
@@ -93,7 +83,6 @@ export interface SkiaBaseViewProps extends ViewProps {
 
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
   picture?: SkPicture;
-  androidWarmup?: boolean;
 }
 
 export type SkiaGraphiteViewNativeProps = SkiaBaseViewProps;

package/android/cpp/jni/include/JniSkiaBaseView.h

@@ -1,92 +0,0 @@
-#pragma once
-
-#include <memory>
-#include <string>
-#include <vector>
-
-#include <fbjni/fbjni.h>
-#include <jni.h>
-#include <jsi/jsi.h>
-
-#include "JniSkiaManager.h"
-#include "RNSkAndroidView.h"
-
-#include <android/bitmap.h>
-
-namespace RNSkia {
-
-namespace jsi = facebook::jsi;
-
-class JniSkiaBaseView {
-public:
-  JniSkiaBaseView(jni::alias_ref<JniSkiaManager::javaobject> skiaManager,
-                  std::shared_ptr<RNSkBaseAndroidView> skiaView)
-      : _skiaAndroidView(std::move(skiaView)),
-        _manager(skiaManager->cthis()->getSkiaManager()) {}
-
-  ~JniSkiaBaseView() = default;
-
-  // The manager is owned by the RNSkiaModule and is destroyed when the module
-  // is invalidated (reload). Fabric drops views on the UI thread while the
-  // module is invalidated on a background thread, so a view can outlive its
-  // manager: holding a weak reference makes a late unregister a no-op and a
-  // concurrent one keep the manager alive for the duration of the call.
-  std::shared_ptr<RNSkManager> getSkiaManager() { return _manager.lock(); }
-
-protected:
-  virtual void surfaceAvailable(jobject surface, int width, int height,
-                                bool isSurface, bool highBitDepth) {
-    _skiaAndroidView->surfaceAvailable(surface, width, height, isSurface,
-                                       highBitDepth);
-  }
-
-  virtual void surfaceSizeChanged(jobject surface, int width, int height,
-                                  bool isSurface, bool highBitDepth) {
-    _skiaAndroidView->surfaceSizeChanged(surface, width, height, isSurface,
-                                         highBitDepth);
-  }
-
-  virtual void surfaceDestroyed() { _skiaAndroidView->surfaceDestroyed(); }
-
-  virtual void setDebugMode(bool show) {
-    _skiaAndroidView->setShowDebugInfo(show);
-  }
-
-  virtual void registerView(int nativeId) {
-    auto manager = getSkiaManager();
-    if (manager == nullptr) {
-      return;
-    }
-    manager->registerSkiaView(nativeId, _skiaAndroidView->getSkiaView());
-  }
-
-  virtual void unregisterView() {
-    if (_skiaAndroidView == nullptr) {
-      return;
-    }
-    auto skiaView = _skiaAndroidView->getSkiaView();
-    if (skiaView == nullptr) {
-      return;
-    }
-    if (auto manager = getSkiaManager()) {
-      manager->setSkiaView(skiaView->getNativeId(), nullptr);
-      manager->unregisterSkiaView(skiaView->getNativeId());
-    }
-    // React drops the Java view here, but the native view behind it (and the
-    // content it owns) is only destroyed when the Java object is finalized.
-    // Release the content now so it does not wait for the garbage collector.
-    skiaView->releaseContent();
-  }
-
-  virtual jni::local_ref<jni::JArrayInt> getBitmap(int width, int height) {
-    return jni::JArrayInt::newArray(0);
-  }
-
-protected:
-  std::shared_ptr<RNSkBaseAndroidView> _skiaAndroidView;
-
-private:
-  std::weak_ptr<RNSkManager> _manager;
-};
-
-} // namespace RNSkia

package/android/cpp/jni/include/JniSkiaGraphiteView.h

@@ -1,176 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include <fbjni/fbjni.h>
-#include <jni.h>
-
-#include "JniSkiaManager.h"
-#include "RNSkLog.h"
-
-#if defined(SK_GRAPHITE)
-#include "JniSkiaBaseView.h"
-#include "RNSkAndroidView.h"
-#include "RNSkGraphiteView.h"
-#endif
-
-namespace RNSkia {
-namespace jni = facebook::jni;
-
-#if defined(SK_GRAPHITE)
-
-/**
- * The Android side of SkiaGraphiteView: a SkiaBaseView whose frames are
- * Graphite recordings, presented on the Choreographer.
- */
-class JniSkiaGraphiteView : public jni::HybridClass<JniSkiaGraphiteView>,
-                            public JniSkiaBaseView {
-public:
-  static auto constexpr kJavaDescriptor =
-      "Lcom/reactnative/skia/SkiaGraphiteView;";
-
-  static jni::local_ref<jhybriddata>
-  initHybrid(jni::alias_ref<jhybridobject> jThis,
-             jni::alias_ref<JniSkiaManager::javaobject> skiaManager) {
-    return makeCxxInstance(jThis, skiaManager);
-  }
-
-  static void registerNatives() {
-    registerHybrid(
-        {makeNativeMethod("initHybrid", JniSkiaGraphiteView::initHybrid),
-         makeNativeMethod("surfaceAvailable",
-                          JniSkiaGraphiteView::surfaceAvailable),
-         makeNativeMethod("surfaceDestroyed",
-                          JniSkiaGraphiteView::surfaceDestroyed),
-         makeNativeMethod("surfaceSizeChanged",
-                          JniSkiaGraphiteView::surfaceSizeChanged),
-         makeNativeMethod("setDebugMode", JniSkiaGraphiteView::setDebugMode),
-         makeNativeMethod("registerView", JniSkiaGraphiteView::registerView),
-         makeNativeMethod("unregisterView",
-                          JniSkiaGraphiteView::unregisterView),
-         makeNativeMethod("getBitmap", JniSkiaGraphiteView::getBitmap),
-         makeNativeMethod("presentFrame", JniSkiaGraphiteView::presentFrame)});
-  }
-
-protected:
-  void surfaceAvailable(jobject surface, int width, int height, bool isSurface,
-                        bool highBitDepth) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height, isSurface,
-                                      highBitDepth);
-  }
-
-  void surfaceSizeChanged(jobject surface, int width, int height,
-                          bool isSurface, bool highBitDepth) override {
-    JniSkiaBaseView::surfaceSizeChanged(surface, width, height, isSurface,
-                                        highBitDepth);
-  }
-
-  void surfaceDestroyed() override { JniSkiaBaseView::surfaceDestroyed(); }
-
-  void setDebugMode(bool show) override { JniSkiaBaseView::setDebugMode(show); }
-
-  void registerView(int nativeId) override {
-    JniSkiaBaseView::registerView(nativeId);
-  }
-
-  void unregisterView() override { JniSkiaBaseView::unregisterView(); }
-
-  jni::local_ref<jni::JArrayInt> getBitmap(int width, int height) override {
-    return JniSkiaBaseView::getBitmap(width, height);
-  }
-
-  // Choreographer tick: presents the queued recordings, returns whether more
-  // are already waiting.
-  bool presentFrame() { return getGraphiteView()->presentFrame(); }
-
-private:
-  friend HybridBase;
-
-  explicit JniSkiaGraphiteView(
-      jni::alias_ref<jhybridobject> jThis,
-      jni::alias_ref<JniSkiaManager::javaobject> skiaManager)
-      : JniSkiaBaseView(
-            skiaManager,
-            std::make_shared<RNSkAndroidView<RNSkia::RNSkGraphiteView>>(
-                skiaManager->cthis()->getPlatformContext())) {
-    // A submitted recording arms the Java view's frame callback. Weak: the
-    // Java view owns this object through its hybrid data.
-    jni::weak_ref<jhybridobject> weakJava = jni::make_weak(jThis);
-    getGraphiteView()->setFrameScheduler([weakJava]() {
-      auto javaPart = weakJava.lockLocal();
-      if (!javaPart) {
-        return;
-      }
-      static const auto method =
-          javaPart->getClass()->getMethod<void()>("scheduleFrame");
-      method(javaPart);
-    });
-  }
-
-  std::shared_ptr<RNSkAndroidView<RNSkia::RNSkGraphiteView>> getGraphiteView() {
-    return std::static_pointer_cast<RNSkAndroidView<RNSkia::RNSkGraphiteView>>(
-        _skiaAndroidView);
-  }
-};
-
-#else // SK_GRAPHITE
-
-/**
- * Placeholder for builds without the Graphite backend: the component exists
- * so that the app links, but it renders nothing.
- */
-class JniSkiaGraphiteView : public jni::HybridClass<JniSkiaGraphiteView> {
-public:
-  static auto constexpr kJavaDescriptor =
-      "Lcom/reactnative/skia/SkiaGraphiteView;";
-
-  static jni::local_ref<jhybriddata>
-  initHybrid(jni::alias_ref<jhybridobject> jThis,
-             jni::alias_ref<JniSkiaManager::javaobject> skiaManager) {
-    static bool warned = false;
-    if (!warned) {
-      warned = true;
-      RNSkLogger::logToConsole(
-          "SkiaGraphiteView requires the Graphite backend. Rebuild with "
-          "SK_GRAPHITE enabled; the view renders nothing.");
-    }
-    return makeCxxInstance();
-  }
-
-  static void registerNatives() {
-    registerHybrid(
-        {makeNativeMethod("initHybrid", JniSkiaGraphiteView::initHybrid),
-         makeNativeMethod("surfaceAvailable",
-                          JniSkiaGraphiteView::surfaceAvailable),
-         makeNativeMethod("surfaceDestroyed",
-                          JniSkiaGraphiteView::surfaceDestroyed),
-         makeNativeMethod("surfaceSizeChanged",
-                          JniSkiaGraphiteView::surfaceSizeChanged),
-         makeNativeMethod("setDebugMode", JniSkiaGraphiteView::setDebugMode),
-         makeNativeMethod("registerView", JniSkiaGraphiteView::registerView),
-         makeNativeMethod("unregisterView",
-                          JniSkiaGraphiteView::unregisterView),
-         makeNativeMethod("getBitmap", JniSkiaGraphiteView::getBitmap),
-         makeNativeMethod("presentFrame", JniSkiaGraphiteView::presentFrame)});
-  }
-
-protected:
-  void surfaceAvailable(jobject, int, int, bool, bool) {}
-  void surfaceSizeChanged(jobject, int, int, bool, bool) {}
-  void surfaceDestroyed() {}
-  void setDebugMode(bool) {}
-  void registerView(int) {}
-  void unregisterView() {}
-  jni::local_ref<jni::JArrayInt> getBitmap(int, int) {
-    return jni::JArrayInt::newArray(0);
-  }
-  bool presentFrame() { return false; }
-
-private:
-  friend HybridBase;
-  JniSkiaGraphiteView() = default;
-};
-
-#endif // SK_GRAPHITE
-
-} // namespace RNSkia