@shopify/react-native-skia 1.0.1 → 1.0.3

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

@@ -0,0 +1,10 @@
+import type { CanvasKit, Vertices } from "canvaskit-wasm";
+import type { SkVertices } from "../types";
+import { HostObject } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+export declare class JsiSkVertices extends HostObject<Vertices, "Vertices"> implements SkVertices {
+    constructor(CanvasKit: CanvasKit, ref: Vertices);
+    dispose: () => void;
+    bounds(): JsiSkRect;
+    uniqueID(): number;
+}

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

@@ -0,0 +1,4 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { SkColor, SkPoint, VertexMode } from "../types";
+import { JsiSkVertices } from "./JsiSkVertices";
+export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null, colors?: SkColor[], indices?: number[] | null, isVolatile?: boolean) => JsiSkVertices;

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

@@ -0,0 +1,3 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { Skia } from "../types";
+export declare const JsiSkApi: (CanvasKit: CanvasKit) => Skia;

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

@@ -0,0 +1 @@
+export * from "./JsiSkia";

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

@@ -0,0 +1,6 @@
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+export interface Spec extends TurboModule {
+    install: () => boolean;
+}
+declare const _default: Spec;
+export default _default;

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

@@ -0,0 +1,2 @@
+import { throwOnMissingReanimated } from "../external/reanimated/moduleWrapper";
+export default throwOnMissingReanimated;

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

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    mode: string;
+    debug?: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

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

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    mode: string;
+    debug?: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
+    constructor(props: TProps);
+    private _surface;
+    private _unsubscriptions;
+    private _touches;
+    private _canvas;
+    private _canvasRef;
+    private _mode;
+    private _redrawRequests;
+    private requestId;
+    protected width: number;
+    protected height: number;
+    private unsubscribeAll;
+    private onLayoutEvent;
+    protected getSize(): {
+        width: number;
+        height: number;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
+    /**
+     * Override to render
+     */
+    protected abstract renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    private tick;
+    redraw(): void;
+    /**
+     * Updates the drawing mode for the skia view. This is the same
+     * as declaratively setting the mode property on the SkiaView.
+     * There are two drawing modes, "continuous" and "default",
+     * where the continuous mode will continuously redraw the view and
+     * the default mode will only redraw when any of the regular react
+     * properties are changed like size and margins.
+     * @param mode Drawing mode to use.
+     */
+    setDrawMode(mode: DrawMode): void;
+    private handleTouchEvent;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    private onStart;
+    private onActive;
+    private onCancel;
+    private onEnd;
+    private onLayout;
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}

package/lib/typescript/src/views/SkiaDomView.web.d.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import type { SkiaDomViewProps, TouchInfo } from "./types";
+export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Skia, SkRect } from "../skia/types";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaJSDomView extends React.Component<SkiaDomViewProps & {
+    Skia: Skia;
+}> {
+    constructor(props: SkiaDomViewProps & {
+        Skia: Skia;
+    });
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps & {
+        Skia: Skia;
+    }): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    private draw;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}

package/lib/typescript/src/views/SkiaJSDomView.web.d.ts

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";

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

@@ -0,0 +1,20 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaPictureViewProps } from "./types";
+export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaPictureViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    render(): React.JSX.Element;
+}

package/lib/typescript/src/views/SkiaPictureView.web.d.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import type { SkiaPictureViewProps } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    protected renderInCanvas(canvas: SkCanvas): void;
+}

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

@@ -0,0 +1,3 @@
+export declare const SkiaViewNativeId: {
+    current: number;
+};

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

@@ -0,0 +1,5 @@
+import type { ISkiaViewApi } from "./types";
+declare global {
+    var SkiaViewApi: ISkiaViewApi;
+}
+export declare const SkiaViewApi: ISkiaViewApi;

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

@@ -0,0 +1,4 @@
+export * from "./SkiaPictureView";
+export * from "./SkiaDomView";
+export * from "./types";
+export * from "./useTouchHandler";

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

@@ -0,0 +1,79 @@
+import type { ViewProps } from "react-native";
+import type { GroupProps, RenderNode } from "../dom/types";
+import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
+export type DrawMode = "continuous" | "default";
+export type NativeSkiaViewProps = ViewProps & {
+    mode?: DrawMode;
+    debug?: boolean;
+};
+export declare enum TouchType {
+    Start = 0,
+    Active = 1,
+    End = 2,
+    Cancelled = 3
+}
+export interface TouchInfo {
+    x: number;
+    y: number;
+    force: number;
+    type: TouchType;
+    id: number;
+    timestamp: number;
+}
+export interface DrawingInfo {
+    width: number;
+    height: number;
+    timestamp: number;
+    touches: Array<Array<TouchInfo>>;
+}
+export type ExtendedTouchInfo = TouchInfo & {
+    velocityX: number;
+    velocityY: number;
+};
+export type TouchHandlers = {
+    onStart?: (touchInfo: TouchInfo) => void;
+    onActive?: (touchInfo: ExtendedTouchInfo) => void;
+    onEnd?: (touchInfo: ExtendedTouchInfo) => void;
+};
+export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
+/**
+ * Listener interface for value changes
+ */
+export interface ValueListener {
+    addListener: (callback: () => void) => number;
+    removeListener: (id: number) => void;
+}
+export interface ISkiaViewApi {
+    setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+    callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
+    requestRedraw: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+}
+export interface SkiaBaseViewProps extends ViewProps {
+    /**
+     * Sets the drawing mode for the skia view. There are two drawing
+     * modes, "continuous" and "default", where the continuous mode will
+     * continuously redraw the view, and the default mode will only
+     * redraw when any of the regular react properties are changed like
+     * sizes and margins.
+     */
+    mode?: DrawMode;
+    /**
+     * When set to true the view will display information about the
+     * average time it takes to render.
+     */
+    debug?: boolean;
+    /**
+     * Pass an animated value to the onSize property to get updates when
+     * the Skia view is resized.
+     */
+    onSize?: SharedValueType<SkSize>;
+}
+export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+    picture?: SkPicture;
+}
+export interface SkiaDomViewProps extends SkiaBaseViewProps {
+    root?: RenderNode<GroupProps>;
+    onTouch?: TouchHandler;
+}

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

@@ -0,0 +1,22 @@
+import type { DependencyList } from "react";
+import type { TouchHandlers, TouchHandler } from "./types";
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler only handles single touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export declare const useTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler handles multiple touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export declare const useMultiTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
+declare global {
+    var CanvasKit: CanvasKitType;
+}
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions) => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType } from "react";
+import React, { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+interface WithSkiaProps {
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";

package/libs/ios/libskia.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskottie.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskunicode.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskunicode.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskunicode.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/Platform/Platform.web.tsx

@@ -97,13 +97,23 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
   useElementLayout(ref, onLayout);
   const cssStyles = useMemo(() => {
     return {
+      alignItems: "stretch" as const,
+      backgroundColor: "transparent" as const,
+      border: "0 solid black" as const,
+      boxSizing: "border-box" as const,
+      display: "flex" as const,
+      flexBasis: "auto" as const,
+      flexDirection: "column" as const,
+      flexShrink: 0,
+      listStyle: "none" as const,
+      margin: 0,
+      minHeight: 0,
+      minWidth: 0,
+      padding: 0,
+      position: "relative" as const,
+      textDecoration: "none" as const,
+      zIndex: 0,
       ...style,
-      display: "flex",
-      flexDirection: style.flexDirection || "inherit",
-      flexWrap: style.flexWrap || "nowrap",
-      justifyContent: style.justifyContent || "flex-start",
-      alignItems: style.alignItems || "stretch",
-      alignContent: style.alignContent || "stretch",
     };
   }, [style]);