@shopify/react-native-skia 0.1.115

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</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>
+		<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>
+	</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_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>
+		<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>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@shopify/react-native-skia",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "React Native Skia",
+  "version": "0.1.115",
+  "description": "Skia View for React Native",
+  "main": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "lib/module/index.js",
+  "module": "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/**",
+    "src/**",
+    "index.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": "yarn 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",
+    "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.2"
+  },
+  "dependencies": {
+    "react-reconciler": "^0.26.2"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/react-native-skia.podspec

@@ -0,0 +1,71 @@
+# @shopify/react-native-skia.podspec
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-skia"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<-DESC
+                  @shopify/react-native-skia
+                   DESC
+  s.homepage     = "https://github.com/shopify/react-native-skia"
+  # brief license entry:
+  s.license      = "MIT"
+  # optional - use expanded license entry instead:
+  # s.license    = { :type => "MIT", :file => "LICENSE" }
+  s.authors      = { "Your Name" => "yourname@email.com" }
+  s.platforms    = { :ios => "9.0" }
+  s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
+
+  s.requires_arc = true
+  s.xcconfig = {
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) SK_GL=1 SK_METAL=1',
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17'
+  }
+
+  s.frameworks = 'GLKit', 'MetalKit'
+
+  s.ios.vendored_frameworks = [
+    'libs/ios/libskia.xcframework', 
+    'libs/ios/libsvg.xcframework', 
+    'libs/ios/libskshaper.xcframework'
+  ]
+
+  # All iOS cpp/h files
+  s.source_files = [
+    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+  ]
+
+  s.subspec 'SkiaHeaders' do |ss|
+    ss.header_mappings_dir = 'cpp/skia'
+    ss.source_files = "cpp/skia/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Utils' do |ss|
+    ss.header_mappings_dir = 'cpp/utils'
+    ss.source_files = "cpp/utils/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Jsi' do |ss|
+    ss.header_mappings_dir = 'cpp/jsi'
+    ss.source_files = "cpp/jsi/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Api' do |ss|
+    ss.header_mappings_dir = 'cpp/api'
+    ss.source_files = "cpp/api/**/*.{h,cpp}"
+  end
+
+  s.subspec 'RNSkia' do |ss|
+    ss.header_mappings_dir = 'cpp/rnskia'
+    ss.source_files = "cpp/rnskia/**/*.{h,cpp}"
+  end
+
+  s.dependency "React"
+  s.dependency "React-callinvoker"
+  s.dependency "React-Core"
+end
+

package/scripts/install-npm.js

@@ -0,0 +1,23 @@
+const fs = require("fs");
+const path = require("path");
+
+console.log("Updating symlinks for Android build...");
+
+const createSymlink = (p) => {
+  console.log(`Creating symlink to ${p}`, __dirname, process.cwd());
+  const srcDir = path.resolve(`./cpp/${p}`);
+  const dstDir = path.resolve(`./android/cpp/${p}`);
+
+  if (!fs.existsSync(dstDir) || !fs.lstatSync(dstDir).isSymbolicLink()) {
+    fs.symlinkSync(srcDir, dstDir, "dir");
+  }
+};
+
+// Copy common cpp files from the package root to the android folder
+createSymlink("api");
+createSymlink("jsi");
+createSymlink("rnskia");
+createSymlink("skia");
+createSymlink("utils");
+
+console.log("Symlinks created successfully.");

package/src/external/index.ts

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

package/src/external/reanimated/index.ts

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

package/src/external/reanimated/useSharedValueEffect.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect, useMemo } from "react";
+
+// @ts-ignore
+let Reanimated: typeof import("react-native-reanimated") | undefined;
+let Core: // @ts-ignore
+typeof import("react-native-reanimated/lib/reanimated2/core") | undefined;
+
+try {
+  Reanimated = require("react-native-reanimated");
+  Core = require("react-native-reanimated/lib/reanimated2/core");
+} catch (e) {
+  // Ignore
+}
+
+type SharedValueTypeWrapper<T = number> = {
+  value: T;
+};
+
+const useSharedValueWrapper =
+  Reanimated?.useSharedValue === undefined
+    ? (value: number) => useMemo(() => ({ value }), [value])
+    : Reanimated.useSharedValue;
+
+/**
+ * Connects a shared value from reanimated to a SkiaView or Canvas
+ * so whenever the shared value changes the SkiaView will redraw.
+ * @param cb Callback that will be called whenever the shared value changes.
+ * @param values One or more shared values to listen for.
+ */
+export const useSharedValueEffect = <T = number>(
+  cb: () => void,
+  value: SharedValueTypeWrapper<T>,
+  ...values: SharedValueTypeWrapper<T>[]
+) => {
+  const input = useSharedValueWrapper(0);
+  const { runOnJS, startMapper, stopMapper } = useMemo(() => {
+    if (Reanimated && Core) {
+      const { runOnJS } = Reanimated;
+      const { startMapper, stopMapper } = Core;
+      return { runOnJS, startMapper, stopMapper };
+    } else {
+      console.warn(
+        "Reanimated was not found and the useSharedValueEffect hook will have no effect."
+      );
+      return {
+        runOnJS: undefined,
+        startMapper: undefined,
+        stopMapper: undefined,
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (
+      startMapper !== undefined &&
+      runOnJS !== undefined &&
+      stopMapper !== undefined
+    ) {
+      // Start a mapper in Reanimated
+      const mapperId = startMapper(
+        () => {
+          "worklet";
+          runOnJS(cb)();
+        },
+        [value, ...values],
+        [input]
+      );
+      // Return unregistering the mapper
+      return () => {
+        if (stopMapper && mapperId !== undefined) {
+          stopMapper(mapperId);
+        }
+      };
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [input, runOnJS, startMapper, stopMapper, value, ...values]);
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+import "./skia/NativeSetup";
+
+export * from "./renderer";
+export * from "./views";
+export * from "./skia";
+export * from "./external";
+export * from "./values";

package/src/renderer/Canvas.tsx

@@ -0,0 +1,190 @@
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useMemo,
+  useContext,
+  forwardRef,
+  useRef,
+} from "react";
+import type {
+  RefObject,
+  ReactNode,
+  ComponentProps,
+  Context,
+  ReactElement,
+  MutableRefObject,
+  ForwardedRef,
+} from "react";
+import type { OpaqueRoot } from "react-reconciler";
+import ReactReconciler from "react-reconciler";
+
+import { SkiaView, useDrawCallback } from "../views";
+import type { TouchHandler } from "../views";
+import { Skia } from "../skia";
+import type { FontMgr } from "../skia/FontMgr/FontMgr";
+
+import { debug as hostDebug, skHostConfig } from "./HostConfig";
+// import { debugTree } from "./nodes";
+import { vec } from "./processors";
+import { Container } from "./nodes";
+import { DependencyManager } from "./DependencyManager";
+
+// useContextBridge() is taken from https://github.com/pmndrs/drei#usecontextbridge
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useContextBridge = (...contexts: Context<any>[]) => {
+  const values =
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    contexts.map((context) => useContext(context));
+  return useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) =>
+        contexts.reduceRight(
+          (acc, Context, i) => (
+            <Context.Provider value={values[i]} children={acc} />
+          ),
+          children
+        ) as ReactElement,
+    [contexts, values]
+  );
+};
+
+interface CanvasContext {
+  width: number;
+  height: number;
+}
+
+const CanvasContext = React.createContext<CanvasContext | null>(null);
+
+export const useCanvas = () => {
+  const canvas = useContext(CanvasContext);
+  if (!canvas) {
+    throw new Error("Canvas context is not available");
+  }
+  return canvas;
+};
+
+export const skiaReconciler = ReactReconciler(skHostConfig);
+
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia",
+});
+
+const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
+  skiaReconciler.updateContainer(element, root, null, () => {
+    hostDebug("updateContainer");
+
+    container.depMgr.subscribe();
+  });
+};
+
+export const useCanvasRef = () => useRef<SkiaView>(null);
+
+export interface CanvasProps extends ComponentProps<typeof SkiaView> {
+  ref?: RefObject<SkiaView>;
+  children: ReactNode;
+  onTouch?: TouchHandler;
+  fontMgr?: FontMgr;
+}
+
+const defaultFontMgr = Skia.FontMgr.RefDefault();
+
+export const Canvas = forwardRef<SkiaView, CanvasProps>(
+  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+    const innerRef = useCanvasRef();
+    const ref = useCombinedRefs(forwardedRef, innerRef);
+    const [tick, setTick] = useState(0);
+    const redraw = useCallback(() => setTick((t) => t + 1), []);
+
+    const container = useMemo(
+      () => new Container(new DependencyManager(ref), redraw),
+      [redraw, ref]
+    );
+
+    const canvasCtx = useRef({ width: 0, height: 0 });
+    const root = useMemo(
+      () => skiaReconciler.createContainer(container, 0, false, null),
+      [container]
+    );
+    // Render effect
+    useEffect(() => {
+      render(
+        <CanvasContext.Provider value={canvasCtx.current}>
+          {children}
+        </CanvasContext.Provider>,
+        root,
+        container
+      );
+    }, [children, root, redraw, container]);
+
+    // Draw callback
+    const onDraw = useDrawCallback(
+      (canvas, info) => {
+        // TODO: if tree is empty (count === 1) maybe we should not render?
+        const { width, height, timestamp } = info;
+        if (onTouch) {
+          onTouch(info.touches);
+        }
+        const paint = Skia.Paint();
+        paint.setAntiAlias(true);
+        const ctx = {
+          width,
+          height,
+          timestamp,
+          canvas,
+          paint,
+          opacity: 1,
+          ref,
+          center: vec(width / 2, height / 2),
+          fontMgr: fontMgr ?? defaultFontMgr,
+        };
+        canvasCtx.current = ctx;
+        container.draw(ctx);
+      },
+      [tick, onTouch]
+    );
+
+    useEffect(() => {
+      return () => {
+        container.depMgr.unsubscribe();
+      };
+    }, [container]);
+
+    return (
+      <SkiaView
+        ref={ref}
+        style={style}
+        onDraw={onDraw}
+        mode={mode}
+        debug={debug}
+      />
+    );
+  }
+);
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = <T,>(
+  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
+) => {
+  const targetRef = React.useRef<T>(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};

package/src/renderer/DependencyManager.tsx

@@ -0,0 +1,59 @@
+import type { RefObject } from "react";
+
+import type { SkiaView } from "../views";
+import type { SkiaReadonlyValue } from "../values";
+
+import { isValue } from "./processors";
+import type { Node } from "./nodes";
+
+type Unsubscribe = () => void;
+type Props = { [key: string]: unknown };
+
+export class DependencyManager {
+  ref: RefObject<SkiaView>;
+  subscriptions: Map<
+    Node,
+    { values: SkiaReadonlyValue<unknown>[]; unsubscribe: null | Unsubscribe }
+  > = new Map();
+
+  constructor(ref: RefObject<SkiaView>) {
+    this.ref = ref;
+  }
+
+  unSubscribeNode(node: Node) {
+    const subscription = this.subscriptions.get(node);
+    if (subscription && subscription.unsubscribe) {
+      subscription.unsubscribe();
+    }
+    this.subscriptions.delete(node);
+  }
+
+  subscribeNode(node: Node, props: Props) {
+    const values = Object.values(props).filter(isValue);
+    if (values.length > 0) {
+      this.subscriptions.set(node, { values, unsubscribe: null });
+    }
+  }
+
+  subscribe() {
+    if (this.ref.current === null) {
+      throw new Error("Canvas ref is not set");
+    }
+    this.subscriptions.forEach((subscription) => {
+      if (subscription.unsubscribe === null) {
+        subscription.unsubscribe = this.ref.current!.registerValues(
+          subscription.values
+        );
+      }
+    });
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach(({ unsubscribe }) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    });
+    this.subscriptions.clear();
+  }
+}

package/src/renderer/DrawingContext.ts

@@ -0,0 +1,16 @@
+import type { RefObject } from "react";
+
+import type { DrawingInfo, SkiaView } from "../views";
+import type { SkCanvas, SkPaint } from "../skia";
+import type { FontMgr } from "../skia/FontMgr/FontMgr";
+
+import type { Vector } from "./processors/math/Vector";
+
+export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
+  canvas: SkCanvas;
+  paint: SkPaint;
+  opacity: number;
+  center: Vector;
+  ref: RefObject<SkiaView>;
+  fontMgr: FontMgr;
+}