@shopify/react-native-skia 0.1.155 → 0.1.157

package/libs/ios/libskottie.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>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</string>
+			<key>LibraryPath</key>
+			<string>libskottie.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/libsksg.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>libsksg.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>libsksg.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

@@ -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>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>
+			<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>

package/libs/ios/libsvg.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>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_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>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.155",
+  "version": "0.1.157",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -30,6 +30,8 @@
     "libs/ios/libskia.xcframework",
     "libs/ios/libskshaper.xcframework",
     "libs/ios/libsvg.xcframework",
+    "libs/ios/libskottie.xcframework",
+    "libs/ios/libsksg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
     "scripts/setup-canvaskit.js",
@@ -65,8 +67,8 @@
   "licenseFilename": "LICENSE.md",
   "readmeFilename": "README.md",
   "peerDependencies": {
-    "react": ">=16.8.1",
-    "react-native": ">=0.63.0-rc.0 <1.0.x",
+    "react": ">=18.0",
+    "react-native": ">=0.64",
     "react-native-reanimated": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -77,7 +79,7 @@
   "devDependencies": {
     "@types/jest": "^28.1.6",
     "@types/react-native": "0.66.2",
-    "@types/react-reconciler": "0.26.4",
+    "@types/react-reconciler": "^0.26.7",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
@@ -89,8 +91,9 @@
     "typescript": "4.8.3"
   },
   "dependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "canvaskit-wasm": "0.36.1",
-    "react-reconciler": "0.26.2"
+    "react-reconciler": "^0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -101,7 +104,12 @@
     "output": "lib",
     "targets": [
       "commonjs",
-      "module",
+      [
+        "module",
+        {
+          "configFile": "./.babelrc"
+        }
+      ],
       "typescript"
     ]
   },

package/src/dom/nodes/JsiSkDOM.ts

@@ -121,10 +121,15 @@ import { MorphologyImageFilterNode } from "./paint/ImageFilters";
 import { GroupNode } from "./GroupNode";
 import { PaintNode } from "./PaintNode";
 import type { NodeContext } from "./Node";
+import { LayerNode } from "./LayerNode";
 
 export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
 
+  Layer(props?: ChildrenProps) {
+    return new LayerNode(this.ctx, props ?? {});
+  }
+
   Group(props?: GroupProps) {
     return new GroupNode(this.ctx, props ?? {});
   }

package/src/dom/nodes/LayerNode.ts

@@ -0,0 +1,35 @@
+import type { DeclarationNode, DrawingContext, Node } from "../types";
+import { NodeType } from "../types";
+import type { ChildrenProps } from "../types/Common";
+import type { SkPaint } from "../../skia";
+
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+
+const isLayer = (
+  node: Node<unknown>
+): node is DeclarationNode<unknown, SkPaint> =>
+  node instanceof JsiDeclarationNode && node.isPaint();
+
+export class LayerNode extends JsiRenderNode<ChildrenProps> {
+  constructor(ctx: NodeContext, props: ChildrenProps) {
+    super(ctx, NodeType.Layer, props);
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    const [layer, ...children] = this.children();
+    if (isLayer(layer)) {
+      const paint = layer.materialize() as SkPaint;
+      ctx.canvas.saveLayer(paint);
+    }
+    children.map((child) => {
+      if (child instanceof JsiRenderNode) {
+        child.render(ctx);
+      }
+    });
+    if (isLayer(layer)) {
+      ctx.canvas.restore();
+    }
+  }
+}

package/src/dom/types/NodeType.ts

@@ -1,5 +1,6 @@
 export const enum NodeType {
   // Shaders
+  Layer = "skLayer",
   Shader = "skShader",
   ImageShader = "skImageShader",
   ColorShader = "skColorShader",

package/src/dom/types/SkDOM.ts

@@ -76,6 +76,7 @@ type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
 type DrawingNode<P extends GroupProps> = RenderNode<P>;
 
 export interface SkDOM {
+  Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
   Group(props?: GroupProps): RenderNode<GroupProps>;
   Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
 

package/src/renderer/Canvas.tsx

@@ -77,7 +77,17 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     }, [redraw, registerValues]);
 
     const root = useMemo(
-      () => skiaReconciler.createContainer(container, 0, false, null),
+      () =>
+        skiaReconciler.createContainer(
+          container,
+          0,
+          null,
+          true,
+          null,
+          "",
+          console.error,
+          null
+        ),
       [container]
     );
     // Render effect

package/src/renderer/HostComponents.ts

@@ -66,6 +66,7 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       skGroup: SkiaProps<GroupProps>;
+      skLayer: SkiaProps<ChildrenProps>;
       skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
 
       // Drawings
@@ -146,6 +147,8 @@ export const createNode = (
 ) => {
   const { Sk } = container;
   switch (type) {
+    case NodeType.Layer:
+      return Sk.Layer(props);
     case NodeType.Group:
       return Sk.Group(props);
     case NodeType.Paint:

package/src/renderer/HostConfig.ts

@@ -1,5 +1,6 @@
 /*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
 
 import type { NodeType, Node } from "../dom/types";
 import type { SkiaValue } from "../values";
@@ -67,7 +68,6 @@ export const skHostConfig: SkiaHostConfig = {
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
   now: Date.now,
-
   supportsMutation: true,
   isPrimaryRenderer: false,
   supportsPersistence: false,
@@ -232,6 +232,13 @@ export const skHostConfig: SkiaHostConfig = {
   insertBefore: (parent, child, before) => {
     insertBefore(parent, child, before);
   },
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
 };
 
 const materialize = <P>(props: AnimatedProps<P>) => {

package/src/renderer/components/Group.tsx

@@ -1,8 +1,21 @@
-import React from "react";
+import React, { isValidElement } from "react";
 
 import type { SkiaProps } from "../processors";
 import type { GroupProps } from "../../dom/types";
+import type { ChildrenProps } from "../../dom/types/Common";
 
-export const Group = (props: SkiaProps<GroupProps>) => {
-  return <skGroup {...props} />;
+export interface PublicGroupProps extends Omit<GroupProps, "layer"> {
+  layer?: GroupProps["layer"] | ChildrenProps["children"];
+}
+
+export const Group = ({ layer, ...props }: SkiaProps<PublicGroupProps>) => {
+  if (isValidElement(layer) && typeof layer === "object") {
+    return (
+      <skLayer>
+        {layer}
+        <skGroup {...props} />
+      </skLayer>
+    );
+  }
+  return <skGroup layer={layer as GroupProps["layer"]} {...props} />;
 };

package/src/renderer/components/Paint.tsx

@@ -1,10 +1,16 @@
+/* eslint-disable max-len */
 import React, { useRef, forwardRef } from "react";
 
 import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
 import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => useRef<PaintNode>(null);
+export const usePaintRef = () => {
+  console.log(`usePaintRef() is now deprecated.
+If you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.
+If you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);
+  return useRef<PaintNode>(null);
+};
 
 export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
   (props, ref) => {

package/src/views/SkiaPictureView.tsx

@@ -5,17 +5,16 @@ import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaView";
 import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
 
-let SkiaViewNativeId = 1000;
-
 const NativeSkiaPictureView =
   requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const { picture } = props;
     if (picture) {
       assertSkiaViewApi();

package/src/views/SkiaView.tsx

@@ -7,7 +7,7 @@ import type { SkiaValue } from "../values";
 import { SkiaViewApi } from "./api";
 import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
 
-let SkiaViewNativeId = 1000;
+export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView =
   requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
@@ -15,7 +15,7 @@ const NativeSkiaView =
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const { onDraw } = props;
     if (onDraw) {
       assertSkiaViewApi();