@shopify/react-native-skia 0.1.129 → 0.1.132

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

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.129",
+  "version": "0.1.132",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -20,7 +20,6 @@
     "android/cpp/**",
     "android/src/**",
     "libs/android/**",
-    "src/**",
     "index.js",
     "cpp/**/*.{h,cpp}",
     "ios",
@@ -35,7 +34,7 @@
     "tsc": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
     "test": "jest",
-    "postinstall": "node scripts/install-npm.js && patch-package",
+    "postinstall": "node scripts/install-npm.js",
     "build": "bob build"
   },
   "repository": {
@@ -69,18 +68,18 @@
     "@types/jest": "^27.0.3",
     "@types/react-native": "^0.65.0",
     "@types/react-reconciler": "^0.26.4",
-    "canvaskit-wasm": "^0.34.0",
     "eslint": "7.32.0",
     "eslint-config-react-native-wcandillon": "^3.7.2",
     "jest": "^27.4.3",
+    "patch-package": "^6.4.7",
     "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",
-    "patch-package": "^6.4.7"
+    "typescript": "^4.6.4"
   },
   "dependencies": {
+    "canvaskit-wasm": "^0.34.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/src/animation/functions/index.ts

@@ -1,2 +1,4 @@
-export { interpolate } from "./interpolate";
-export { interpolateColors, mixColors } from "./interpolateColors";
+export * from "./interpolate";
+export * from "./interpolateColors";
+export * from "./interpolateVector";
+export * from "./interpolatePaths";

package/src/animation/functions/interpolatePaths.ts

@@ -0,0 +1,38 @@
+import type { SkPath } from "../../skia/types";
+
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export const interpolatePaths = (
+  value: number,
+  input: number[],
+  outputRange: SkPath[]
+) => {
+  let i = 0;
+  for (; i <= input.length - 1; i++) {
+    if (value >= input[i] && value <= input[i + 1]) {
+      break;
+    }
+    if (i === input.length - 1) {
+      if (value < input[0]) {
+        return outputRange[0];
+      } else {
+        return outputRange[i];
+      }
+    }
+  }
+  const t = (value - input[i]) / (input[i + 1] - input[i]);
+  return outputRange[i + 1].interpolate(outputRange[i], t)!;
+};

package/src/animation/functions/interpolateVector.ts

@@ -0,0 +1,26 @@
+import type { Vector } from "../../skia/types";
+
+import { interpolate } from "./interpolate";
+
+export const interpolateVector = (
+  value: number,
+  inputRange: readonly number[],
+  outputRange: readonly Vector[],
+  options?: Parameters<typeof interpolate>[3]
+) => ({
+  x: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.x),
+    options
+  ),
+  y: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.y),
+    options
+  ),
+});
+
+export const mixVector = (value: number, from: Vector, to: Vector) =>
+  interpolateVector(value, [0, 1], [from, to]);

package/src/index.ts

@@ -1,5 +1,6 @@
 import "./skia/NativeSetup";
 export * from "./renderer";
+export * from "./renderer/Canvas";
 export * from "./views";
 export * from "./skia";
 export * from "./external";

package/src/renderer/Canvas.tsx

@@ -3,7 +3,6 @@ import React, {
   useState,
   useCallback,
   useMemo,
-  useContext,
   forwardRef,
   useRef,
 } from "react";
@@ -19,36 +18,15 @@ import ReactReconciler from "react-reconciler";
 
 import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
-import { Skia, SkiaPaint } from "../skia";
-import type { FontMgr } from "../skia";
+import type { SkFontMgr } from "../skia/types";
 import { useValue } from "../values/hooks/useValue";
-import type { SkiaValue } from "../values/types";
+import { Skia } from "../skia/Skia";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
-import { vec } from "./processors";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
-
-const CanvasContext = React.createContext<SkiaValue<{
-  width: number;
-  height: number;
-}> | null>(null);
-
-export const useCanvas = () => {
-  const size = useContext(CanvasContext);
-  if (!size) {
-    throw new Error("Canvas context is not available");
-  }
-  return { size };
-};
-
-export const useCanvasSize = () => {
-  console.warn(
-    "useCanvasSize is deprecated, use the size member of useCanvas() instead."
-  );
-  return useCanvas().size;
-};
+import { CanvasProvider } from "./useCanvas";
 
 export const skiaReconciler = ReactReconciler(skHostConfig);
 
@@ -72,14 +50,15 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
   ref?: RefObject<SkiaView>;
   children: ReactNode;
   onTouch?: TouchHandler;
-  fontMgr?: FontMgr;
+  fontMgr?: SkFontMgr;
 }
 
 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 size = useValue({ width: 0, height: 0 });
+    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
@@ -97,9 +76,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     // Render effect
     useEffect(() => {
       render(
-        <CanvasContext.Provider value={canvasCtx}>
-          {children}
-        </CanvasContext.Provider>,
+        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,
         root,
         container
       );
@@ -114,12 +91,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           onTouch(info.touches);
         }
         if (
-          width !== canvasCtx.current.width ||
-          height !== canvasCtx.current.height
+          width !== canvasCtx.size.current.width ||
+          height !== canvasCtx.size.current.height
         ) {
-          canvasCtx.current = { width, height };
+          canvasCtx.size.current = { width, height };
         }
-        const paint = SkiaPaint();
+        const paint = Skia.Paint();
         const ctx = {
           width,
           height,
@@ -128,8 +105,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           paint,
           opacity: 1,
           ref,
-          center: vec(width / 2, height / 2),
+          center: Skia.Point(width / 2, height / 2),
           fontMgr: fontMgr ?? defaultFontMgr,
+          Skia,
         };
         container.draw(ctx);
       },

package/src/renderer/DrawingContext.ts

@@ -1,9 +1,7 @@
 import type { RefObject } from "react";
 
 import type { DrawingInfo, SkiaView } from "../views";
-import type { FontMgr, SkCanvas, SkPaint } from "../skia";
-
-import type { Vector } from "./processors/math/Vector";
+import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
 
 export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   canvas: SkCanvas;
@@ -11,5 +9,6 @@ export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   opacity: number;
   center: Vector;
   ref: RefObject<SkiaView>;
-  fontMgr: FontMgr;
+  fontMgr: SkFontMgr;
+  Skia: Skia;
 }

package/src/renderer/HostConfig.ts

@@ -1,4 +1,4 @@
-/*global NodeJS, performance*/
+/*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
 
 import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
@@ -137,7 +137,7 @@ export const skHostConfig: SkiaHostConfig = {
   /**
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
-  now: performance.now,
+  now: Date.now,
 
   supportsMutation: true,
   isPrimaryRenderer: false,

package/src/renderer/components/Blend.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import { isImageFilter, Skia, BlendMode, isShader } from "../../skia";
+import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import type { AnimatedProps, SkEnum } from "../processors";
 import { enumKey } from "../processors/Paint";
@@ -11,16 +11,18 @@ interface BlendProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<BlendProps>(({ mode }, children) => {
-  const [inner, outer] = children;
-  const blend = BlendMode[enumKey(mode)];
-  if (isImageFilter(outer) && isImageFilter(inner)) {
-    return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-  } else if (isShader(outer) && isShader(inner)) {
-    return Skia.Shader.MakeBlend(blend, outer, inner);
+const onDeclare = createDeclaration<BlendProps>(
+  ({ mode }, children, { Skia }) => {
+    const [inner, outer] = children;
+    const blend = BlendMode[enumKey(mode)];
+    if (isImageFilter(outer) && isImageFilter(inner)) {
+      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+    } else if (isShader(outer) && isShader(inner)) {
+      return Skia.Shader.MakeBlend(blend, outer, inner);
+    }
+    throw new Error("<Blend /> can only blend Shaders or ImageFilters");
   }
-  throw new Error("<Blend /> can only blend Shaders or ImageFilters");
-});
+);
 
 export const Blend = (props: AnimatedProps<BlendProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/Compose.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isImageFilter, isColorFilter } from "../../skia";
+import { isImageFilter, isColorFilter } from "../../skia/types";
 import { createDeclaration } from "../nodes/Declaration";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 
@@ -9,7 +9,7 @@ export interface ComposeProps {
   children: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration((_, children) => {
+const onDeclare = createDeclaration((_, children, { Skia }) => {
   const [inner, outer] = children;
   if (isColorFilter(outer) && isColorFilter(inner)) {
     return Skia.ColorFilter.MakeCompose(outer, inner);

package/src/renderer/components/Group.tsx

@@ -1,9 +1,13 @@
 import React from "react";
 import type { RefObject } from "react";
 
-import type { SkPaint } from "../../skia";
-import { ClipOp } from "../../skia";
-import { processTransform, processPaint, processClip } from "../processors";
+import type { SkPaint } from "../../skia/types";
+import { ClipOp } from "../../skia/types";
+import {
+  processCanvasTransform,
+  processPaint,
+  processClip,
+} from "../processors";
 import type {
   CustomPaintProps,
   TransformProps,
@@ -24,7 +28,7 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
 
 const onDraw = createDrawing<GroupProps>(
   (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
-    const { canvas, opacity } = ctx;
+    const { canvas, opacity, Skia } = ctx;
     const declarations = node.children
       .filter(isDeclarationNode)
       .map((child) => child.draw(ctx));
@@ -33,6 +37,7 @@ const onDraw = createDrawing<GroupProps>(
       (child) => child instanceof DrawingNode
     );
     const paint = processPaint(
+      ctx.Skia,
       ctx.paint.copy(),
       opacity,
       groupProps,
@@ -53,10 +58,10 @@ const onDraw = createDrawing<GroupProps>(
       } else {
         canvas.save();
       }
-      processTransform(ctx, groupProps);
+      processCanvasTransform(ctx, groupProps);
       if (clip) {
         const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-        processClip(canvas, clip, op);
+        processClip(Skia, canvas, clip, op);
       }
     }
     node.visit(

package/src/renderer/components/Mask.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
-import { BlendMode, Skia } from "../../skia";
+import { BlendMode } from "../../skia/types";
+import { useCanvas } from "../useCanvas";
 
 import { Group } from "./Group";
 
@@ -13,6 +14,7 @@ interface MaskProps {
 }
 
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+  const { Skia } = useCanvas();
   const maskPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.Src);
@@ -20,12 +22,12 @@ export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
       paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
     }
     return paint;
-  }, [mode]);
+  }, [Skia, mode]);
   const clippingPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.DstIn);
     return paint;
-  }, []);
+  }, [Skia]);
   return (
     <Group layer>
       <Group layer={maskPaint}>

package/src/renderer/components/Paint.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
-import type { SkPaint } from "../../skia";
-import { SkiaPaint } from "../../skia";
+import type { SkPaint } from "../../skia/types";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
+import { useCanvas } from "../useCanvas";
 
 export const usePaintRef = () => useRef<SkPaint>(null);
 
@@ -15,12 +15,13 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
 
 export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
   (props, ref) => {
-    const paint = useMemo(() => SkiaPaint(), []);
+    const { Skia } = useCanvas();
+    const paint = useMemo(() => Skia.Paint(), [Skia]);
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>
         createDeclaration<PaintProps>((paintProps, children, ctx) =>
-          processPaint(paint, ctx.opacity, paintProps, children)
+          processPaint(ctx.Skia, paint, ctx.opacity, paintProps, children)
         ),
       [paint]
     );

package/src/renderer/components/Picture.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkPicture } from "../../skia";
+import type { SkPicture } from "../../skia/types";
 import { createDrawing } from "../nodes/Drawing";
 
 export interface PictureProps {

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -22,7 +22,7 @@ export interface BackdropFilterProps extends GroupProps {
 const onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {
   disableFilterMemoization(node.children);
   const toFilter = node.visit(ctx);
-  const filter = getInput(toFilter);
+  const filter = getInput(ctx.Skia, toFilter);
   if (!filter) {
     throw new Error("No image filter provided to the background");
   }

package/src/renderer/components/colorFilters/BlendColor.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import type { Color } from "../../../skia";
-import { BlendMode, Skia } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
@@ -16,12 +16,12 @@ export interface BlendColorProps {
 }
 
 const onDeclare = createDeclaration<BlendColorProps>(
-  ({ mode, color }, children) => {
+  ({ mode, color }, children, { Skia }) => {
     const cf = Skia.ColorFilter.MakeBlend(
       Skia.Color(color),
       BlendMode[enumKey(mode)]
     );
-    return composeColorFilter(cf, children);
+    return composeColorFilter(Skia, cf, children);
   }
 );
 

package/src/renderer/components/colorFilters/Compose.ts

@@ -1,8 +1,9 @@
-import type { SkColorFilter } from "../../../skia";
-import { isColorFilter, isImageFilter, Skia } from "../../../skia";
+import type { SkColorFilter, Skia } from "../../../skia/types";
+import { isColorFilter, isImageFilter } from "../../../skia/types";
 import type { DeclarationResult } from "../../nodes";
 
 export const composeColorFilter = (
+  Skia: Skia,
   cf: SkColorFilter,
   children: DeclarationResult[]
 ) => {

package/src/renderer/components/colorFilters/Lerp.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isColorFilter } from "../../../skia";
+import { isColorFilter } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -12,10 +12,11 @@ export interface LerpProps {
   children: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<LerpProps>(({ t }, children) => {
+const onDeclare = createDeclaration<LerpProps>(({ t }, children, { Skia }) => {
   const [src, dst] = children.filter(isColorFilter);
   const cf = Skia.ColorFilter.MakeLerp(t, src, dst);
   return composeColorFilter(
+    Skia,
     cf,
     children.filter((c) => c !== src && c !== dst)
   );

package/src/renderer/components/colorFilters/LinearToSRGBGamma.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LinearToSRGBGammaProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeLinearToSRGBGamma();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const LinearToSRGBGamma = (

package/src/renderer/components/colorFilters/LumaColorFilter.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LumaColorFilterProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeLumaColorFilter();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const LumaColorFilter = (props: AnimatedProps<LumaColorFilterProps>) => {