@shopify/react-native-skia 2.12.0-next.1 → 2.13.0

package/lib/module/views/types.d.ts

@@ -1,11 +1,23 @@
 import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { Node } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 export type NativeSkiaViewProps = ViewProps & {
     debug?: boolean;
     opaque?: boolean;
 };
+export type AndroidSurfaceType = "SurfaceView" | "TextureView";
+export interface AndroidCanvasProps {
+    /**
+     * Backing view. Defaults to `SurfaceView` when the canvas is `opaque` and to
+     * `TextureView` otherwise; both composite correctly in React Native stacking
+     * order without further flags.
+     */
+    surfaceType?: AndroidSurfaceType;
+    /**
+     * SurfaceView only: composite above every React Native view in the window,
+     * ignoring `zIndex`. Ignored for TextureView. Defaults to false.
+     */
+    zOrderOnTop?: boolean;
+}
 export interface ISkiaViewApi {
     web?: boolean;
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
@@ -21,10 +33,10 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     debug?: boolean;
     /**
-     * Pass an animated value to the onSize property to get updates when
-     * the Skia view is resized.
+     * 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
+     * (see `android.surfaceType`). Defaults to false.
      */
-    onSize?: SharedValue<SkSize>;
     opaque?: boolean;
     /**
      * Renders into a surface with more than 8 bits per channel (16-bit float on
@@ -32,12 +44,11 @@ export interface SkiaBaseViewProps extends ViewProps {
      * the extra precision survives composition only when combined with `opaque`.
      */
     highBitDepth?: boolean;
+    /** Android-only rendering options. Ignored on iOS and web. */
+    android?: AndroidCanvasProps;
     __destroyWebGLContextAfterRender?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;
     androidWarmup?: boolean;
 }
-export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
-    root?: Node<unknown>;
-}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n  size: (nativeId: number) => SkSize;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. On Android\n   * the extra precision survives composition only when combined with `opaque`.\n   */\n  highBitDepth?: boolean;\n\n  // On web, only 16 WebGL contextes are allowed. If the drawing is non-animated, set\n  // __destroyWebGLContextAfterRender to true to release the context after each draw.\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n  androidWarmup?: boolean;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport type AndroidSurfaceType = \"SurfaceView\" | \"TextureView\";\n\nexport interface AndroidCanvasProps {\n  /**\n   * Backing view. Defaults to `SurfaceView` when the canvas is `opaque` and to\n   * `TextureView` otherwise; both composite correctly in React Native stacking\n   * order without further flags.\n   */\n  surfaceType?: AndroidSurfaceType;\n  /**\n   * SurfaceView only: composite above every React Native view in the window,\n   * ignoring `zIndex`. Ignored for TextureView. Defaults to false.\n   */\n  zOrderOnTop?: boolean;\n}\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n  size: (nativeId: number) => SkSize;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n\n  /**\n   * Declares that the canvas covers every pixel of its bounds. On Android an\n   * opaque canvas is backed by a `SurfaceView` by default, the cheapest path\n   * (see `android.surfaceType`). Defaults to false.\n   */\n  opaque?: boolean;\n\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. On Android\n   * the extra precision survives composition only when combined with `opaque`.\n   */\n  highBitDepth?: boolean;\n\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n\n  // On web, only 16 WebGL contextes are allowed. If the drawing is non-animated, set\n  // __destroyWebGLContextAfterRender to true to release the context after each draw.\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n  androidWarmup?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/typescript/lib/commonjs/mock/index.d.ts

@@ -39,7 +39,6 @@ export function Mock(CanvasKit: any): {
     };
     useValueEffect: () => undefined;
     isOnMainThread: () => boolean;
-    isFabric: boolean;
     useClock: () => {
         value: number;
     };

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

@@ -1,11 +1,10 @@
 export const __esModule: boolean;
-export const isFabric: boolean;
 export function useCanvasRef(): any;
 export function useCanvasSize(userRef: any): {
     ref: any;
     size: any;
 };
-export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, ref, onLayout, ...viewProps }: {
+export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: {
     [x: string]: any;
     debug: any;
     opaque: any;
@@ -14,6 +13,7 @@ export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDep
     colorSpace?: string | undefined;
     highBitDepth?: boolean | undefined;
     androidWarmup?: boolean | undefined;
+    android: any;
     ref: any;
     onLayout: any;
 }): any;

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

@@ -23,7 +23,7 @@ export class JsiSkPathBuilder extends _Host.HostObject {
     addOval(oval: any, isCCW: any, startIndex: any): this;
     addArc(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any): this;
     addRRect(rrect: any, isCCW: any): this;
-    addCircle(x: any, y: any, r: any, _isCCW: any): this;
+    addCircle(x: any, y: any, r: any, isCCW: any): this;
     addPoly(points: any, close: any): this;
     addPath(src: any, matrix: any, extend?: boolean): this;
     setFillType(fill: any): this;

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

@@ -35,7 +35,6 @@ export function JsiSkApi(CanvasKit: any): {
     NativeBuffer: _JsiSkNativeBufferFactory.JsiSkNativeBufferFactory;
     Skottie: _JsiSkottieFactory.JsiSkottieFactory;
     Video: (url?: any) => Promise<any>;
-    Context: (_surface: any, _width: any, _height: any) => jest.Mock<any, any, any>;
     Recorder: () => jest.Mock<any, any, any>;
     getNativeDevice: () => jest.Mock<any, any, any>;
 };

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

@@ -12,6 +12,7 @@ export function createDrawingContext(Skia: any, paintPool: any, canvas: any): {
     paintDeclarations: any[];
     paintPool: any;
     savePaint: () => void;
+    pushPaint: (paint: any) => void;
     saveBackdropFilter: () => void;
     readonly paint: any;
     restorePaint: () => any;

package/lib/typescript/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -1,10 +1,12 @@
 export const __esModule: boolean;
 export default SkiaPictureViewNativeComponent;
-declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, ...viewProps }: {
+declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, androidSurfaceType: _androidSurfaceType, androidZOrderOnTop: _androidZOrderOnTop, ...viewProps }: {
     [x: string]: any;
     nativeID: any;
     debug: any;
     opaque: any;
     onLayout: any;
+    androidSurfaceType: any;
+    androidZOrderOnTop: any;
 }): _react.FunctionComponentElement<any>;
 import _react = require("react");

package/lib/typescript/lib/module/mock/index.d.ts

@@ -38,7 +38,6 @@ export function Mock(CanvasKit: any): {
     };
     useValueEffect: () => undefined;
     isOnMainThread: () => boolean;
-    isFabric: boolean;
     useClock: () => {
         value: number;
     };

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

@@ -6,8 +6,7 @@ export function useCanvasSize(userRef: any): {
         height: number;
     };
 };
-export const isFabric: boolean;
-export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, ref, onLayout, ...viewProps }: {
+export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: {
     [x: string]: any;
     debug: any;
     opaque: any;
@@ -16,6 +15,7 @@ export function Canvas({ debug, opaque, children, onSize, colorSpace, highBitDep
     colorSpace?: string | undefined;
     highBitDepth?: boolean | undefined;
     androidWarmup?: boolean | undefined;
+    android: any;
     ref: any;
     onLayout: any;
 }): React.CElement<object, React.Component<object, {}, any> & import("react-native").ReactNativeElement>;

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

@@ -34,7 +34,6 @@ export const Skia: {
     NativeBuffer: import("./web/JsiSkNativeBufferFactory").JsiSkNativeBufferFactory;
     Skottie: import("./web/JsiSkottieFactory").JsiSkottieFactory;
     Video: (url?: any) => Promise<any>;
-    Context: (_surface: any, _width: any, _height: any) => jest.Mock<any, any, any>;
     Recorder: () => jest.Mock<any, any, any>;
     getNativeDevice: () => jest.Mock<any, any, any>;
 };

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

@@ -22,7 +22,7 @@ export class JsiSkPathBuilder extends HostObject {
     addOval(oval: any, isCCW: any, startIndex: any): this;
     addArc(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any): this;
     addRRect(rrect: any, isCCW: any): this;
-    addCircle(x: any, y: any, r: any, _isCCW: any): this;
+    addCircle(x: any, y: any, r: any, isCCW: any): this;
     addPoly(points: any, close: any): this;
     addPath(src: any, matrix: any, extend?: boolean): this;
     setFillType(fill: any): this;

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

@@ -34,7 +34,6 @@ export function JsiSkApi(CanvasKit: any): {
     NativeBuffer: JsiSkNativeBufferFactory;
     Skottie: JsiSkottieFactory;
     Video: (url?: any) => Promise<any>;
-    Context: (_surface: any, _width: any, _height: any) => jest.Mock<any, any, any>;
     Recorder: () => jest.Mock<any, any, any>;
     getNativeDevice: () => jest.Mock<any, any, any>;
 };

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

@@ -11,6 +11,7 @@ export function createDrawingContext(Skia: any, paintPool: any, canvas: any): {
     paintDeclarations: any[];
     paintPool: any;
     savePaint: () => void;
+    pushPaint: (paint: any) => void;
     saveBackdropFilter: () => void;
     readonly paint: any;
     restorePaint: () => any;

package/lib/typescript/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -1,8 +1,10 @@
 export default SkiaPictureViewNativeComponent;
-declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, ...viewProps }: {
+declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, androidSurfaceType: _androidSurfaceType, androidZOrderOnTop: _androidZOrderOnTop, ...viewProps }: {
     [x: string]: any;
     nativeID: any;
     debug: any;
     opaque: any;
     onLayout: any;
+    androidSurfaceType: any;
+    androidZOrderOnTop: any;
 }): import("react").FunctionComponentElement<any>;

package/lib/typescript/react-native.config.d.ts

@@ -0,0 +1,3 @@
+export namespace spm {
+    let name: string;
+}

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

@@ -2,6 +2,7 @@ import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, 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";
 export interface CanvasRef extends FC<CanvasProps> {
     makeImageSnapshot(rect?: SkRect): SkImage;
@@ -16,11 +17,16 @@ export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
     ref: RefObject<CanvasRef | null>;
     size: SkSize;
 };
-export declare const isFabric: boolean;
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
     debug?: boolean;
-    /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
+    /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */
     onLayout?: ViewProps["onLayout"];
+    /**
+     * Declares that the canvas covers every pixel of its bounds, so nothing
+     * behind it needs to show through. On Android an opaque canvas is backed by
+     * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).
+     * Defaults to false.
+     */
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
     colorSpace?: "p3" | "srgb";
@@ -33,8 +39,10 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
      * before the canvas is mounted.
      */
     highBitDepth?: boolean;
+    /** Android-only rendering options. Ignored on iOS and web. */
+    android?: AndroidCanvasProps;
     ref?: React.Ref<CanvasRef>;
     androidWarmup?: boolean;
     __destroyWebGLContextAfterRender?: boolean;
 }
-export declare const Canvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;
+export declare const Canvas: ({ debug, opaque, children, onSize, colorSpace, highBitDepth, androidWarmup, android, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference lib="esnext.disposable" preserve="true" />
 export interface SkJSIInstance<T extends string> extends Disposable {
     __typename__: T;
     dispose(): void;

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

@@ -17,7 +17,7 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
 import type { DataFactory } from "./Data";
 import type { SVGFactory } from "./SVG";
 import type { TextBlobFactory } from "./TextBlob";
-import type { SkSurface, SurfaceFactory } from "./Surface";
+import type { SurfaceFactory } from "./Surface";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
@@ -30,10 +30,6 @@ import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
 import type { JsiRecorder } from "./Recorder";
 import type { SkottieFactory } from "./Skottie";
-export interface SkiaContext {
-    getSurface(): SkSurface;
-    present(): void;
-}
 /**
  * Declares the interface for the native Skia API
  */
@@ -82,7 +78,6 @@ export interface Skia {
     ParagraphBuilder: ParagraphBuilderFactory;
     Skottie: SkottieFactory;
     Video: (url: string) => Promise<Video> | Video;
-    Context(surface: bigint, width: number, height: number): SkiaContext;
     NativeBuffer: NativeBufferFactory;
     Recorder(): JsiRecorder;
     /**

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

@@ -25,7 +25,7 @@ export declare class JsiSkPathBuilder extends HostObject<CKPathBuilder, "PathBui
     addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): this;
     addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): this;
     addRRect(rrect: InputRRect, isCCW?: boolean): this;
-    addCircle(x: number, y: number, r: number, _isCCW?: boolean): this;
+    addCircle(x: number, y: number, r: number, isCCW?: boolean): this;
     addPoly(points: SkPoint[], close: boolean): this;
     addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): this;
     setFillType(fill: FillType): this;

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

@@ -12,6 +12,7 @@ export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], ca
     paintDeclarations: SkPaint[];
     paintPool: SkPaint[];
     savePaint: () => void;
+    pushPaint: (paint: SkPaint) => void;
     saveBackdropFilter: () => void;
     readonly paint: SkPaint;
     restorePaint: () => SkPaint | undefined;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.d.ts

@@ -6,6 +6,8 @@ export interface NativeProps extends ViewProps {
     colorSpace?: string;
     highBitDepth?: boolean;
     androidWarmup?: boolean;
+    androidSurfaceType?: WithDefault<"auto" | "SurfaceView" | "TextureView", "auto">;
+    androidZOrderOnTop?: WithDefault<boolean, false>;
     pointerEvents?: WithDefault<"auto" | "none" | "box-none" | "box-only", "auto">;
 }
 declare const _default: import("react-native").HostComponent<NativeProps>;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -3,6 +3,8 @@ export interface NativeProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     nativeID: string;
+    androidSurfaceType?: "auto" | "SurfaceView" | "TextureView";
+    androidZOrderOnTop?: boolean;
 }
-declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").FunctionComponentElement<import("../views/SkiaPictureView.web").SkiaPictureViewProps>;
+declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, androidSurfaceType: _androidSurfaceType, androidZOrderOnTop: _androidZOrderOnTop, ...viewProps }: NativeProps) => import("react").FunctionComponentElement<import("../views/SkiaPictureView.web").SkiaPictureViewProps>;
 export default SkiaPictureViewNativeComponent;

package/lib/typescript/src/views/types.d.ts

@@ -1,11 +1,23 @@
 import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { Node } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 export type NativeSkiaViewProps = ViewProps & {
     debug?: boolean;
     opaque?: boolean;
 };
+export type AndroidSurfaceType = "SurfaceView" | "TextureView";
+export interface AndroidCanvasProps {
+    /**
+     * Backing view. Defaults to `SurfaceView` when the canvas is `opaque` and to
+     * `TextureView` otherwise; both composite correctly in React Native stacking
+     * order without further flags.
+     */
+    surfaceType?: AndroidSurfaceType;
+    /**
+     * SurfaceView only: composite above every React Native view in the window,
+     * ignoring `zIndex`. Ignored for TextureView. Defaults to false.
+     */
+    zOrderOnTop?: boolean;
+}
 export interface ISkiaViewApi {
     web?: boolean;
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
@@ -21,10 +33,10 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     debug?: boolean;
     /**
-     * Pass an animated value to the onSize property to get updates when
-     * the Skia view is resized.
+     * 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
+     * (see `android.surfaceType`). Defaults to false.
      */
-    onSize?: SharedValue<SkSize>;
     opaque?: boolean;
     /**
      * Renders into a surface with more than 8 bits per channel (16-bit float on
@@ -32,12 +44,11 @@ export interface SkiaBaseViewProps extends ViewProps {
      * the extra precision survives composition only when combined with `opaque`.
      */
     highBitDepth?: boolean;
+    /** Android-only rendering options. Ignored on iOS and web. */
+    android?: AndroidCanvasProps;
     __destroyWebGLContextAfterRender?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;
     androidWarmup?: boolean;
 }
-export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
-    root?: Node<unknown>;
-}

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.12.0-next.1",
+  "version": "2.13.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -32,6 +32,9 @@
     "cpp/**/*.{h,cpp}",
     "apple/**",
     "react-native-skia.podspec",
+    "Package.swift",
+    "include/**",
+    "react-native.config.js",
     "dist/**",
     "libs/.graphite"
   ],
@@ -51,7 +54,6 @@
     "clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-common": "find cpp/ \\( -path 'cpp//skia' -prune \\) -o \\( -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' \\) -print | xargs clang-format -i",
-    "workflow-copy-libs": "tsx ./scripts/workflow-copy-libs.ts",
     "cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package"
   },
   "repository": {
@@ -62,7 +64,7 @@
   "keywords": [
     "react-native"
   ],
-  "author": "Shopify Inc.",
+  "author": "William Candillon",
   "contributors": [
     {
       "name": "Christian Falch",
@@ -116,6 +118,7 @@
     "eslint-config-react-native-wcandillon": "4.0.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "extract-zip": "^2.0.1",
     "jest": "30.0.0",
     "jest-diff": "29.7.0",
     "jest-environment-jsdom": "30.0.0",
@@ -139,15 +142,16 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.41.0",
-    "react-native-skia-graphite-android": "152.0.0",
-    "react-native-skia-graphite-apple-ios": "152.0.0",
-    "react-native-skia-graphite-apple-macos": "152.0.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-reconciler": "0.31.0"
   },
   "graphiteDependencies": {
-    "react-native-skia-graphite-android": "152.0.0",
-    "react-native-skia-graphite-apple-ios": "152.0.0",
-    "react-native-skia-graphite-apple-macos": "152.0.0"
+    "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"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -158,7 +162,7 @@
     "type": "all",
     "jsSrcsDir": "src/specs",
     "android": {
-      "javaPackageName": "com.shopify.reactnative.skia"
+      "javaPackageName": "com.reactnative.skia"
     },
     "ios": {
       "componentProvider": {
@@ -184,6 +188,5 @@
         }
       ]
     ]
-  },
-  "stableVersion": "0.0.0"
+  }
 }

package/react-native-skia.podspec

@@ -193,14 +193,8 @@ Pod::Spec.new do |s|
   ]
   s.exclude_files = graphite_exclusions unless use_graphite
 
-  if defined?(install_modules_dependencies()) != nil
-    install_modules_dependencies(s)
-    s.dependency "React"
-    s.dependency "React-callinvoker"
-    s.dependency "React-Core"
-  else
-    s.dependency "React"
-    s.dependency "React-callinvoker"
-    s.dependency "React-Core"
-  end
+  install_modules_dependencies(s)
+  s.dependency "React"
+  s.dependency "React-callinvoker"
+  s.dependency "React-Core"
 end

package/react-native.config.js

@@ -0,0 +1,5 @@
+// Pins the SwiftPM target name. Without it the name is derived — today from the
+// npm name (ReactNativeSkia), but an in-flight React Native change derives it
+// from the podspec instead (react-native-skia). The name is also the header
+// import prefix, so it must not move.
+module.exports = {spm: {name: 'ReactNativeSkia'}};

package/src/dom/nodes/datatypes/Rect.ts

@@ -6,8 +6,13 @@ import { processRadius } from "./Radius";
 
 export const isEdge = (pos: Vector, b: SkRect) => {
   "worklet";
+  const right = b.x + b.width;
+  const bottom = b.y + b.height;
+  const withinX = pos.x >= b.x && pos.x <= right;
+  const withinY = pos.y >= b.y && pos.y <= bottom;
   return (
-    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
+    (withinY && (pos.x === b.x || pos.x === right)) ||
+    (withinX && (pos.y === b.y || pos.y === bottom))
   );
 };
 

package/src/external/reanimated/useVideo.ts

@@ -22,8 +22,12 @@ const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
   if (Platform.OS === "android") {
     const tex = currentFrame.value;
     if (tex) {
-      currentFrame.value = tex; //.makeNonTextureImage();
-      tex.dispose();
+      const copy = tex.makeNonTextureImage();
+      if (copy) {
+        currentFrame.value = copy;
+        tex.dispose();
+      }
+      // If copy fails, keep the original frame rather than showing black
     }
   }
 };
@@ -32,6 +36,7 @@ const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
   "worklet";
   const img = video.nextImage();
   if (img) {
+    currentFrame.value?.dispose();
     currentFrame.value = img;
     copyFrameOnAndroid(currentFrame);
   }

package/src/mock/index.ts

@@ -49,7 +49,6 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useValueEffect: Noop,
     // Reanimated hooks
     isOnMainThread: () => true,
-    isFabric: true,
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
     useImageAsTexture: NoopSharedValue,

package/src/renderer/Canvas.tsx

@@ -19,6 +19,7 @@ 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 type { SkImage, SkRect, SkSize } from "../skia/types";
 import { SkiaSGRoot } from "../sksg/Reconciler";
@@ -59,13 +60,16 @@ export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
   return { ref, size };
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isFabric = Boolean((global as any)?.nativeFabricUIManager);
-
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   debug?: boolean;
-  /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
+  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */
   onLayout?: ViewProps["onLayout"];
+  /**
+   * Declares that the canvas covers every pixel of its bounds, so nothing
+   * behind it needs to show through. On Android an opaque canvas is backed by
+   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).
+   * Defaults to false.
+   */
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
@@ -78,11 +82,22 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
    * before the canvas is mounted.
    */
   highBitDepth?: boolean;
+  /** 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";
+
 export const Canvas = ({
   debug,
   opaque,
@@ -91,11 +106,12 @@ export const Canvas = ({
   colorSpace = "p3",
   highBitDepth = false,
   androidWarmup = false,
+  android,
   ref,
   onLayout,
   ...viewProps
 }: CanvasProps) => {
-  if (onLayout && isFabric) {
+  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"
     );
@@ -192,6 +208,8 @@ export const Canvas = ({
       colorSpace={colorSpace}
       highBitDepth={highBitDepth}
       androidWarmup={androidWarmup}
+      androidSurfaceType={resolveSurfaceType(android?.surfaceType)}
+      androidZOrderOnTop={!!android?.zOrderOnTop}
       onLayout={
         Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout
       }