@shopify/react-native-skia 0.0.135

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

@@ -0,0 +1,59 @@
+export interface SkiaValue<T = number> {
+    /**
+     * Gets the value hold by the Value object
+     */
+    readonly current: T;
+    /**
+     * Adds a listener that is called when value changes.
+     * Returns unsubscribe method.
+     */
+    addListener: (cb: (value: T) => void) => () => void;
+    /**
+     * Field to make typechecking easier
+     */
+    __typename__: "RNSkValue";
+}
+export interface SkiaMutableValue<T = number> extends SkiaValue<T> {
+    /**
+     * Get/sets the value hold by the Value object
+     */
+    current: T;
+    /**
+     * Get/sets the animation controlling the value
+     * */
+    animation: SkiaAnimation | undefined;
+}
+export interface SkiaClockValue extends SkiaValue<number> {
+    start: () => void;
+    stop: () => void;
+}
+export interface SkiaAnimation extends SkiaClockValue {
+    cancel: () => void;
+}
+export interface AnimationState {
+    current: number;
+    finished: boolean;
+}
+export interface ISkiaValueApi {
+    /**
+     * Creates a new value that holds the initial value and that
+     * can be changed.
+     */
+    createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
+    /**
+     * Creates a computed value. This is a calculated value that returns the result of
+     * a function that is called with the values of the dependencies.
+     */
+    createComputedValue: <R>(cb: () => R, values: Array<SkiaValue<unknown>>) => SkiaValue<R>;
+    /**
+     * Creates a clock value where the value is the number of milliseconds elapsed
+     * since the clock was created
+     */
+    createClockValue: () => SkiaClockValue;
+    /**
+     * Creates an animation that is driven from a clock and updated every frame.
+     * @param cb Callback to calculate next value from time.
+     * @returns An animation object that can control a value.
+     */
+    createAnimation: <S extends AnimationState = AnimationState>(cb: (t: number, state: S | undefined) => S) => SkiaAnimation;
+}

package/lib/typescript/src/values/web/RNSkAnimation.d.ts

@@ -0,0 +1,9 @@
+import type { AnimationState, SkiaAnimation } from "../types";
+import { RNSkClockValue } from "./RNSkClockValue";
+export declare class RNSkAnimation<S extends AnimationState = AnimationState> extends RNSkClockValue implements SkiaAnimation {
+    constructor(callback: (t: number, state: S | undefined) => S, raf: (callback: (time: number) => void) => number);
+    private _callback;
+    private _animationState;
+    cancel(): void;
+    protected update(nextValue: number): void;
+}

package/lib/typescript/src/values/web/RNSkClockValue.d.ts

@@ -0,0 +1,13 @@
+import type { SkiaClockValue } from "../types";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkClockValue extends RNSkReadonlyValue<number> implements SkiaClockValue {
+    constructor(raf: (callback: (time: number) => void) => number);
+    private _raf;
+    private _start;
+    private _stop;
+    private _state;
+    private notifyUpdate;
+    protected tick(value: number): void;
+    start(): void;
+    stop(): void;
+}

package/lib/typescript/src/values/web/RNSkComputedValue.d.ts

@@ -0,0 +1,9 @@
+import type { DependencyList } from "react";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
+    constructor(callback: () => T, dependencies: DependencyList);
+    private dependecyUpdated;
+    private _callback;
+    private _unsubscribers;
+    unsubscribe(): void;
+}

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -0,0 +1,11 @@
+import type { SkiaValue } from "../types";
+export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
+    constructor(value: T);
+    private _current;
+    private _listeners;
+    private notifyListeners;
+    protected update(nextValue: T): void;
+    readonly __typename__ = "RNSkValue";
+    get current(): T;
+    addListener(cb: (value: T) => void): () => void;
+}

package/lib/typescript/src/values/web/RNSkValue.d.ts

@@ -0,0 +1,14 @@
+import type { SkiaAnimation, SkiaValue } from "../types";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {
+    constructor(value: T);
+    set current(value: T);
+    get current(): T;
+    private _unsubscribe;
+    private unsubscribe;
+    private subscribe;
+    private animationDidUpdate;
+    private _animation;
+    get animation(): SkiaAnimation | undefined;
+    set animation(v: SkiaAnimation | undefined);
+}

package/lib/typescript/src/values/web/api.d.ts

@@ -0,0 +1,2 @@
+import type { ISkiaValueApi } from "../types";
+export declare const ValueApi: ISkiaValueApi;

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

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

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

@@ -0,0 +1,37 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { DrawMode, SkiaViewProps } from "./types";
+export declare class SkiaView extends React.Component<SkiaViewProps> {
+    constructor(props: SkiaViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaViewProps): 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;
+    /**
+     * 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;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,56 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { DrawMode, SkiaViewProps } from "./types";
+export declare class SkiaView extends React.Component<SkiaViewProps, {
+    width: number;
+    height: number;
+}> {
+    constructor(props: SkiaViewProps);
+    private _surface;
+    private _unsubscriptions;
+    private _touches;
+    private _canvas;
+    private _canvasRef;
+    private _mode;
+    private _redrawRequests;
+    private _unmounted;
+    private unsubscribeAll;
+    private onLayout;
+    componentDidMount(): 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;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    private redraw;
+    requestRedraw(): 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;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(_values: SkiaValue<unknown>[]): void;
+    private handleTouchEvent;
+    handleTouchStart(evt: PointerEvent): void;
+    handleTouchMove(evt: PointerEvent): void;
+    handleTouchEnd(evt: PointerEvent): void;
+    handleTouchCancel(evt: PointerEvent): void;
+    render(): JSX.Element;
+}

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 "./SkiaView";
+export * from "./types";
+export * from "./useDrawCallback";
+export * from "./useTouchHandler";

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

@@ -0,0 +1,76 @@
+import type { ViewProps } from "react-native";
+import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+export declare type DrawMode = "continuous" | "default";
+export declare 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 declare type ExtendedTouchInfo = TouchInfo & {
+    velocityX: number;
+    velocityY: number;
+};
+export declare type TouchHandlers = {
+    onStart?: (touchInfo: TouchInfo) => void;
+    onActive?: (touchInfo: ExtendedTouchInfo) => void;
+    onEnd?: (touchInfo: ExtendedTouchInfo) => void;
+};
+export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
+export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
+/**
+ * Listener interface for value changes
+ */
+export interface ValueListener {
+    addListener: (callback: () => void) => number;
+    removeListener: (id: number) => void;
+}
+export interface ISkiaViewApi {
+    invalidateSkiaView: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+    setDrawCallback: (nativeId: number, callback: RNSkiaDrawCallback | undefined) => void;
+    setDrawMode: (nativeId: number, mode: DrawMode) => void;
+    registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
+}
+export interface SkiaViewProps 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;
+    /**
+     * Draw callback. Will be called whenever the view is invalidated and
+     * needs to redraw. This is either caused by a change in a react
+     * property, a touch event, or a call to redraw. If the view is in
+     * continuous mode the callback will be called 60 frames per second
+     * by the native view.
+     */
+    onDraw?: RNSkiaDrawCallback;
+}

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

@@ -0,0 +1,8 @@
+import type { DependencyList } from "react";
+import type { RNSkiaDrawCallback } from "./types";
+/**
+ * Creates a memoized callback for the onDraw handler of a Skia component.
+ * @param callback The callback to memoize.
+ * @param deps Dependencies for the callback.
+ * */
+export declare const useDrawCallback: (callback: RNSkiaDrawCallback, deps?: DependencyList) => RNSkiaDrawCallback;

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/index.d.ts

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

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

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<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>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskia.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

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

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskshaper.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>
+			<key>LibraryPath</key>
+			<string>libskshaper.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

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

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libsvg.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<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>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@shopify/react-native-skia",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "React Native Skia",
+  "version": "0.0.135",
+  "description": "High-performance React Native Graphics using Skia",
+  "main": "lib/module/index.js",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "README.md",
+    "LICENSE.md",
+    "android/build.gradle",
+    "android/CMakeLists.txt",
+    "android/cpp/**",
+    "android/src/**",
+    "libs/android/**",
+    "index.js",
+    "jestSetup.js",
+    "cpp/**/*.{h,cpp}",
+    "ios",
+    "libs/ios/libskia.xcframework",
+    "libs/ios/libskshaper.xcframework",
+    "libs/ios/libsvg.xcframework",
+    "react-native-skia.podspec",
+    "scripts/install-npm.js",
+    "dist/**"
+  ],
+  "scripts": {
+    "tsc": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
+    "test": "jest",
+    "postinstall": "node scripts/install-npm.js",
+    "build": "bob build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shopify/react-native-skia.git",
+    "baseUrl": "https://github.com/Shopify/react-native-skia"
+  },
+  "keywords": [
+    "react-native"
+  ],
+  "author": "Shopify Inc.",
+  "contributors": [
+    {
+      "name": "Christian Falch",
+      "email": "christian.falch@gmail.com"
+    },
+    {
+      "name": "William Candillon",
+      "email": "wcandillon@gmail.com"
+    }
+  ],
+  "license": "MIT",
+  "licenseFilename": "LICENSE.md",
+  "readmeFilename": "README.md",
+  "peerDependencies": {
+    "react": ">=16.8.1",
+    "react-native": ">=0.63.0-rc.0 <1.0.x",
+    "react-native-reanimated": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.0.3",
+    "@types/react-native": "^0.65.0",
+    "@types/react-reconciler": "^0.26.4",
+    "eslint": "7.32.0",
+    "eslint-config-react-native-wcandillon": "^3.7.2",
+    "eslint-plugin-reanimated": "^1.2.6",
+    "jest": "^27.4.3",
+    "react": "17.0.2",
+    "react-native": "0.66.2",
+    "react-native-builder-bob": "^0.18.2",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.6.4"
+  },
+  "dependencies": {
+    "canvaskit-wasm": "^0.35.0",
+    "react-reconciler": "^0.26.2"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "types": "lib/typescript/index.d.ts",
+  "module": "lib/module/index.js",
+  "react-native": "lib/module/index.js"
+}