@shopify/react-native-skia 0.1.116 → 0.1.120

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

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.116",
+  "version": "0.1.120",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/renderer/Canvas.tsx

@@ -11,8 +11,6 @@ import type {
   RefObject,
   ReactNode,
   ComponentProps,
-  Context,
-  ReactElement,
   MutableRefObject,
   ForwardedRef,
 } from "react";
@@ -23,6 +21,8 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { Skia } from "../skia";
 import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import { useValue } from "../values/hooks/useValue";
+import type { SkiaReadonlyValue } from "../values/types";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -30,33 +30,12 @@ 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 {
+const CanvasContext = React.createContext<SkiaReadonlyValue<{
   width: number;
   height: number;
-}
+}> | null>(null);
 
-const CanvasContext = React.createContext<CanvasContext | null>(null);
-
-export const useCanvas = () => {
+export const useCanvasSize = () => {
   const canvas = useContext(CanvasContext);
   if (!canvas) {
     throw new Error("Canvas context is not available");
@@ -93,6 +72,7 @@ const defaultFontMgr = Skia.FontMgr.RefDefault();
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
   ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+    const canvasCtx = useValue({ width: 0, height: 0 });
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
@@ -103,7 +83,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       [redraw, ref]
     );
 
-    const canvasCtx = useRef({ width: 0, height: 0 });
     const root = useMemo(
       () => skiaReconciler.createContainer(container, 0, false, null),
       [container]
@@ -111,13 +90,13 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     // Render effect
     useEffect(() => {
       render(
-        <CanvasContext.Provider value={canvasCtx.current}>
+        <CanvasContext.Provider value={canvasCtx}>
           {children}
         </CanvasContext.Provider>,
         root,
         container
       );
-    }, [children, root, redraw, container]);
+    }, [children, root, redraw, container, canvasCtx]);
 
     // Draw callback
     const onDraw = useDrawCallback(
@@ -127,6 +106,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         if (onTouch) {
           onTouch(info.touches);
         }
+        if (
+          width !== canvasCtx.current.width ||
+          height !== canvasCtx.current.height
+        ) {
+          canvasCtx.current = { width, height };
+        }
         const paint = Skia.Paint();
         paint.setAntiAlias(true);
         const ctx = {
@@ -140,7 +125,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           center: vec(width / 2, height / 2),
           fontMgr: fontMgr ?? defaultFontMgr,
         };
-        canvasCtx.current = ctx;
         container.draw(ctx);
       },
       [tick, onTouch]

package/src/renderer/HostConfig.ts

@@ -3,7 +3,7 @@ import type { HostConfig } from "react-reconciler";
 
 import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
 import { DeclarationNode, DrawingNode, NodeType } from "./nodes";
-import { exhaustiveCheck, mapKeys } from "./typeddash";
+import { exhaustiveCheck, shallowEq } from "./typeddash";
 
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
@@ -53,24 +53,6 @@ type SkiaHostConfig = HostConfig<
   NoTimeout
 >;
 
-// Shallow eq on props (without children)
-const shallowEq = <P extends Props>(p1: P, p2: P): boolean => {
-  const keys1 = mapKeys(p1);
-  const keys2 = mapKeys(p2);
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    if (key === "children") {
-      continue;
-    }
-    if (p1[key] !== p2[key]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 const allChildrenAreMemoized = (node: Instance) => {
   if (!node.memoizable) {
     return false;
@@ -87,7 +69,7 @@ const bustBranchMemoization = (parent: Node) => {
   if (parent.memoizable) {
     let ancestor: Node | undefined = parent;
     while (ancestor) {
-      ancestor.memoized = false;
+      ancestor.memoized = null;
       ancestor = ancestor.parent;
     }
   }

package/src/renderer/components/Drawing.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import { createDrawing } from "../nodes/Drawing";
+
+interface DrawingProps {
+  drawing: (ctx: DrawingContext) => void;
+}
+
+const onDraw = createDrawing<DrawingProps>((ctx, { drawing }) => {
+  drawing(ctx);
+});
+
+export const Drawing = (props: DrawingProps) => {
+  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;
+};

package/src/renderer/components/Group.tsx

@@ -3,19 +3,15 @@ import type { RefObject } from "react";
 
 import type { SkPaint } from "../../skia";
 import { ClipOp } from "../../skia";
-import {
-  processTransform,
-  selectPaint,
-  processPaint,
-  processClip,
-} from "../processors";
+import { processTransform, processPaint, processClip } from "../processors";
 import type {
   CustomPaintProps,
   TransformProps,
   AnimatedProps,
   ClipDef,
 } from "../processors";
-import { createDrawing } from "../nodes";
+import { createDrawing, DrawingNode } from "../nodes";
+import { isDeclarationNode } from "../nodes/Declaration";
 
 const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
   "__typename__" in obj && obj.__typename__ === "Paint";
@@ -29,11 +25,22 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
 const onDraw = createDrawing<GroupProps>(
   (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
     const { canvas, opacity } = ctx;
-    const paint = selectPaint(ctx.paint, groupProps);
-    processPaint(paint, opacity, groupProps);
+    const declarations = node.children
+      .filter(isDeclarationNode)
+      .map((child) => child.draw(ctx));
+
+    const drawings = node.children.filter(
+      (child) => child instanceof DrawingNode
+    );
+    const paint = processPaint(
+      ctx.paint.copy(),
+      opacity,
+      groupProps,
+      declarations
+    );
     const hasTransform = !!groupProps.transform || !!groupProps.matrix;
     const hasClip = !!clip;
-    const shouldSave = hasTransform || hasClip;
+    const shouldSave = hasTransform || hasClip || !!layer;
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {
@@ -52,11 +59,14 @@ const onDraw = createDrawing<GroupProps>(
         processClip(canvas, clip, op);
       }
     }
-    node.visit({
-      ...ctx,
-      paint,
-      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
-    });
+    node.visit(
+      {
+        ...ctx,
+        paint,
+        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
+      },
+      drawings
+    );
     if (shouldSave) {
       canvas.restore();
     }

package/src/renderer/components/Paint.tsx

@@ -1,15 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
-import type { SkPaint, SkImageFilter } from "../../skia";
-import {
-  isShader,
-  isMaskFilter,
-  isColorFilter,
-  Skia,
-  isImageFilter,
-  isPathEffect,
-} from "../../skia";
+import type { SkPaint } from "../../skia";
+import { Skia } from "../../skia";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
@@ -26,32 +19,9 @@ export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>
-        createDeclaration<PaintProps>((paintProps, children, ctx) => {
-          processPaint(paint, ctx.opacity, paintProps);
-          children.forEach((child) => {
-            if (isShader(child)) {
-              paint.setShader(child);
-            } else if (isMaskFilter(child)) {
-              paint.setMaskFilter(child);
-            } else if (isColorFilter(child)) {
-              paint.setColorFilter(child);
-            } else if (isPathEffect(child)) {
-              paint.setPathEffect(child);
-            }
-          });
-          const filters = children.filter(isImageFilter);
-          if (filters.length > 0) {
-            paint.setImageFilter(
-              filters
-                .reverse()
-                .reduce<SkImageFilter | null>(
-                  Skia.ImageFilter.MakeCompose,
-                  null
-                )
-            );
-          }
-          return paint;
-        }),
+        createDeclaration<PaintProps>((paintProps, children, ctx) =>
+          processPaint(paint, ctx.opacity, paintProps, children)
+        ),
       [paint]
     );
     return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/Picture.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { SkPicture } from "../../skia";
+import { createDrawing } from "../nodes/Drawing";
+
+export interface PictureProps {
+  picture: SkPicture;
+}
+
+const onDraw = createDrawing<PictureProps>((ctx, { picture }) => {
+  const { canvas } = ctx;
+  canvas.drawPicture(picture);
+});
+
+export const Picture = (props: PictureProps) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,50 +1,36 @@
-import React from "react";
+import type { SkColor } from "../../../skia";
+import { BlendMode, Skia, TileMode } from "../../../skia";
+import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
 
-import { BlendMode, Skia, TileMode, processColor } from "../../../skia";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
-
-import { getInput } from "./getInput";
-
-export interface InnerShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  shadowOnly?: boolean;
-  inner?: boolean;
-}
-
-const onDeclare = createDeclaration<InnerShadowProps>(
-  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
-    const input = getInput(children);
-    const cl = processColor(color, opacity);
-    const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
-      null
-    );
-    const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
-      null
-    );
-    const f1 = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(cl, BlendMode.SrcOut),
-      null
-    );
-    const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
-    const f3 = Skia.ImageFilter.MakeBlur(blur, blur, TileMode.Decal, f2);
-    const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
-    if (shadowOnly) {
-      return f4;
-    }
-    return Skia.ImageFilter.MakeCompose(
-      input,
-      Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
-    );
+export const MakeInnerShadow = (
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
   }
-);
-
-export const InnerShadow = (props: AnimatedProps<InnerShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
 };

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { Color } from "../../../skia/Color";
+import { processColor } from "../../../skia/Color";
+
+import { getInput } from "./getInput";
+import { MakeInnerShadow } from "./InnerShadow";
+
+export interface ShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  inner?: boolean;
+  shadowOnly?: boolean;
+}
+
+const onDeclare = createDeclaration<ShadowProps>(
+  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {
+    const input = getInput(children);
+    const color = processColor(cl, opacity);
+    let factory;
+    if (inner) {
+      factory = MakeInnerShadow.bind(null, shadowOnly);
+    } else {
+      factory = shadowOnly
+        ? Skia.ImageFilter.MakeDropShadowOnly
+        : Skia.ImageFilter.MakeDropShadow;
+    }
+    return factory(dx, dy, blur, blur, color, input);
+  }
+);
+
+export const Shadow = (props: AnimatedProps<ShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/imageFilters/index.ts

@@ -1,6 +1,5 @@
 export * from "./Blur";
 export * from "./Offset";
 export * from "./DisplacementMap";
-export * from "./DropShadow";
-export * from "./InnerShadow";
+export * from "./Shadow";
 export * from "./Morphology";

package/src/renderer/components/index.ts

@@ -8,10 +8,11 @@ export * from "./maskFilters";
 export * from "./imageFilters";
 export * from "./pathEffects";
 export * from "../processors";
+export * from "./Picture";
 
 export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
-export * from "./Defs";
+export * from "./Drawing";

package/src/renderer/components/maskFilters/Blur.tsx

@@ -29,5 +29,5 @@ export const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {
 
 BlurMask.defaultProps = {
   style: "normal",
-  respectCTM: false,
+  respectCTM: true,
 };

package/src/renderer/components/shapes/Box.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+import type { Color, SkRRect } from "../../../skia";
+import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import { createDrawing } from "../../nodes";
+import type { AnimatedProps, CustomPaintProps } from "../../processors";
+import { add, vec, rrect } from "../../processors";
+import { rect, isRRect } from "../../processors/Rects";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { SkJSIInstance } from "../../../skia/JsiInstance";
+import type { SkRect } from "../../../skia/Rect";
+
+const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  rrect(
+    rect(
+      box.rect.x - dx + tx,
+      box.rect.y - dy + ty,
+      box.rect.width + 2 * dx,
+      box.rect.height + 2 * dy
+    ),
+    box.rx + dx,
+    box.ry + dy
+  );
+
+const deflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  inflate(box, -dx, -dy, tx, ty);
+
+interface BoxShadowProps {
+  dx?: number;
+  dy?: number;
+  spread?: number;
+  blur: number;
+  color?: Color;
+  inner?: boolean;
+}
+
+interface BoxShadowDecl extends BoxShadowProps, SkJSIInstance<"BoxShadow"> {}
+
+const onDeclare = createDeclaration<BoxShadowProps>(
+  ({ dx, dy, spread, blur, color, inner }) => {
+    return { dx, dy, spread, blur, color, inner, __typename__: "BoxShadow" };
+  }
+);
+
+export const BoxShadow = (props: AnimatedProps<BoxShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+const isBoxShadow = (s: SkJSIInstance<string>): s is BoxShadowDecl =>
+  s.__typename__ === "BoxShadow";
+
+interface BoxProps extends CustomPaintProps {
+  box: SkRRect | SkRect;
+}
+
+const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
+  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);
+  const { canvas, paint, opacity } = ctx;
+  const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);
+  shadows
+    .filter((shadow) => !shadow.inner)
+    .map((shadow) => {
+      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+      const lPaint = Skia.Paint();
+      lPaint.setColor(processColor(color, opacity));
+      lPaint.setMaskFilter(
+        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+      );
+      canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);
+    });
+  canvas.drawRRect(box, paint);
+
+  shadows
+    .filter((shadow) => shadow.inner)
+    .map((shadow) => {
+      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+      const delta = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));
+      canvas.save();
+      canvas.clipRRect(box, ClipOp.Intersect, false);
+      const lPaint = Skia.Paint();
+      lPaint.setColor(processColor(color, opacity));
+      lPaint.setMaskFilter(
+        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+      );
+      const inner = deflate(box, spread, spread, dx, dy);
+      const outer = inflate(box, delta.x, delta.y);
+      canvas.drawDRRect(outer, inner, lPaint);
+      canvas.restore();
+    });
+});
+
+export const Box = (props: AnimatedProps<BoxProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};
+
+Box.defaultProps = {
+  shadows: [],
+};

package/src/renderer/components/shapes/index.ts

@@ -10,3 +10,4 @@ export * from "./Patch";
 export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
+export * from "./Box";

package/src/renderer/index.ts

@@ -1,3 +1,4 @@
 export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
+export * from "./useContextBridge";

package/src/renderer/nodes/Declaration.tsx

@@ -1,3 +1,6 @@
+import type { DependencyList } from "react";
+import { useCallback } from "react";
+
 import type { DrawingContext } from "../DrawingContext";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
@@ -18,6 +21,17 @@ export const createDeclaration = <T,>(
   cb: DeclarationCallback<T>
 ): DeclarationCallback<T> => cb;
 
+export const useDeclaration = <P,>(
+  cb: DeclarationCallback<P>,
+  deps?: DependencyList
+) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
+export const isDeclarationNode = (
+  node: Node
+): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
 }