@shopify/react-native-skia 0.1.213 → 0.1.215

package/lib/typescript/src/skia/web/JsiSkPath.d.ts

@@ -21,12 +21,12 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     rMoveTo(x: number, y: number): this;
     rLineTo(x: number, y: number): this;
     rQuadTo(x1: number, y1: number, x2: number, y2: number): this;
-    setFillType(fill: FillType): void;
-    setIsVolatile(volatile: boolean): void;
+    setFillType(fill: FillType): this;
+    setIsVolatile(volatile: boolean): this;
     stroke(opts?: StrokeOpts): this | null;
-    close(): void;
-    reset(): void;
-    rewind(): void;
+    close(): this;
+    reset(): this;
+    rewind(): this;
     computeTightBounds(): SkRect;
     arcToOval(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number, forceMoveTo: boolean): this;
     arcToRotated(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, x: number, y: number): this;
@@ -39,8 +39,8 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     equals(other: SkPath): boolean;
     getBounds(): JsiSkRect;
     getFillType(): number;
-    quadTo(x1: number, y1: number, x2: number, y2: number): void;
-    addRect(rect: SkRect, isCCW?: boolean): void;
+    quadTo(x1: number, y1: number, x2: number, y2: number): this;
+    addRect(rect: SkRect, isCCW?: boolean): this;
     addRRect(rrect: SkRRect, isCCW?: boolean): this;
     getPoint(index: number): JsiSkPoint;
     isEmpty(): boolean;
@@ -51,8 +51,8 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     simplify(): boolean;
     toSVGString(): string;
     trim(start: number, stop: number, isComplement: boolean): this | null;
-    transform(m3: SkMatrix): void;
-    interpolate(end: SkPath, t: number): JsiSkPath | null;
+    transform(m3: SkMatrix): this;
+    interpolate(end: SkPath, t: number, output?: SkPath): SkPath | JsiSkPath | null;
     isInterpolatable(path2: SkPath): boolean;
     toCmds(): PathCommand[];
 }

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/libskparagraph.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>libskparagraph.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>libskparagraph.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/libsksg.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>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_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</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>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskunicode.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>libskunicode.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>libskunicode.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_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

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.213",
+  "version": "0.1.215",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "29.5.6",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
     "@types/react-native": "0.70.6",
@@ -92,13 +92,14 @@
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
-    "jest": "28.1.3",
+    "jest": "29.6.4",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "react": "18.1.0",
     "react-native": "0.71.7",
     "react-native-builder-bob": "^0.18.2",
+    "react-native-reanimated": "^3.5.4",
     "ts-jest": "^28.0.7",
     "typescript": "4.8.3",
     "ws": "^8.11.0"

package/react-native-skia.podspec

@@ -17,7 +17,7 @@ Pod::Spec.new do |s|
   # 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.platforms    = { :ios => "12.0" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true

package/src/animation/functions/interpolatePaths.ts

@@ -9,11 +9,12 @@ const lerp = (
   from: number,
   to: number,
   p1: SkPath,
-  p2: SkPath
+  p2: SkPath,
+  output?: SkPath
 ) => {
   "worklet";
   const t = (value - from) / (to - from);
-  return p2.interpolate(p1, t)!;
+  return p2.interpolate(p1, t, output)!;
 };
 
 /**
@@ -36,7 +37,8 @@ export const interpolatePaths = (
   value: number,
   input: number[],
   outputRange: SkPath[],
-  options?: ExtrapolationType
+  options?: ExtrapolationType,
+  output?: SkPath
 ) => {
   "worklet";
   const extrapolation = validateInterpolationOptions(options);
@@ -84,6 +86,7 @@ export const interpolatePaths = (
     input[i],
     input[i + 1],
     outputRange[i],
-    outputRange[i + 1]
+    outputRange[i + 1],
+    output
   );
 };

package/src/dom/nodes/datatypes/Rect.ts

@@ -4,8 +4,12 @@ import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 
 import { processRadius } from "./Radius";
 
-export const isEdge = (pos: Vector, b: SkRect) =>
-  pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height;
+export const isEdge = (pos: Vector, b: SkRect) => {
+  "worklet";
+  return (
+    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
+  );
+};
 
 // We have an issue to check property existence on JSI backed instances
 const isRRectCtor = (def: RRectDef): def is RRectCtor =>

package/src/external/reanimated/index.ts

@@ -1,2 +1,4 @@
-export * from "./useSharedValueEffect";
+export * from "./useAnimatedImageValue";
+export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
+export * from "./interpolators";

package/src/external/reanimated/interpolators.ts

@@ -0,0 +1,89 @@
+import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
+import { useMemo } from "react";
+
+import type { SkPath, SkPoint } from "../../skia/types";
+import { interpolatePaths, interpolateVector } from "../../animation";
+import { Skia } from "../../skia";
+
+import {
+  useAnimatedReaction,
+  useFrameCallback,
+  useSharedValue,
+} from "./moduleWrapper";
+
+export const notifyChange = (value: SharedValue<unknown>) => {
+  "worklet";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (value as any)._value = value.value;
+};
+
+export const useClock = () => {
+  const clock = useSharedValue(0);
+  useFrameCallback((info) => {
+    clock.value = info.timeSinceFirstFrame;
+  });
+  return clock;
+};
+
+/**
+ * @worklet
+ */
+type Interpolator<T> = (
+  value: number,
+  input: number[],
+  output: T[],
+  options: ExtrapolationType,
+  result: T
+) => T;
+
+const useInterpolator = <T>(
+  factory: () => T,
+  value: SharedValue<number>,
+  interpolator: Interpolator<T>,
+  input: number[],
+  output: T[],
+  options?: ExtrapolationType
+) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(
+    () => value.value,
+    (val) => {
+      result.value = interpolator(val, input, output, options, result.value);
+      notifyChange(result);
+    },
+    [input, output, options]
+  );
+  return result;
+};
+
+export const usePathInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPath[],
+  options?: ExtrapolationType
+) =>
+  useInterpolator(
+    () => Skia.Path.Make(),
+    value,
+    interpolatePaths,
+    input,
+    outputRange,
+    options
+  );
+
+export const useVectorInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPoint[],
+  options?: ExtrapolationType
+) =>
+  useInterpolator(
+    () => Skia.Point(0, 0),
+    value,
+    interpolateVector,
+    input,
+    outputRange,
+    options
+  );

package/src/external/reanimated/moduleWrapper.ts

@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useMemo } from "react";
-
-import type { SharedValueType } from "../../renderer/processors/Animations";
+import type { DependencyList } from "react";
+import type {
+  FrameCallback,
+  FrameInfo,
+  SharedValue,
+} from "react-native-reanimated";
 
 // This one is needed for the deprecated useSharedValue function
 // We can remove it once we remove the deprecation
@@ -13,9 +16,7 @@ let reanimatedVersion: string;
 
 try {
   Reanimated2 = require("react-native-reanimated");
-  reanimatedVersion =
-    // eslint-disable-next-line import/extensions
-    require("react-native-reanimated/package.json").version;
+  reanimatedVersion = require("react-native-reanimated/package.json").version;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
@@ -36,26 +37,38 @@ export function throwOnMissingReanimated() {
   }
 }
 
-function throwOnMissingReanimated3() {
-  if (!HAS_REANIMATED3) {
-    throw new Error(
-      `Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`
-    );
-  }
-}
+export const useSharedValue: <T>(
+  init: T,
+  oneWayReadsOnly?: boolean
+) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
 
-export const useSharedValue =
-  Reanimated2?.useSharedValue ||
-  ((value: number) => useMemo(() => ({ value }), [value]));
-export const useFrameCallback: (...args: any[]) => any =
-  Reanimated2?.useFrameCallback || throwOnMissingReanimated;
+export const useFrameCallback: (
+  callback: (frameInfo: FrameInfo) => void,
+  autostart?: boolean
+) => FrameCallback = Reanimated2?.useFrameCallback || throwOnMissingReanimated;
+
+export const startMapper: (
+  worklet: () => void,
+  inputs?: unknown[],
+  outputs?: unknown[]
+) => number = Reanimated2?.startMapper || throwOnMissingReanimated;
+
+export const stopMapper: (mapperID: number) => void =
+  Reanimated2?.stopMapper || throwOnMissingReanimated;
 
-export const startMapper = Reanimated2?.startMapper || throwOnMissingReanimated;
-export const stopMapper = Reanimated2?.stopMapper || throwOnMissingReanimated;
 export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;
-export const isSharedValue = <T>(
-  value: unknown
-): value is SharedValueType<T> => {
-  throwOnMissingReanimated3();
-  return !!value && Reanimated3.isSharedValue(value);
+
+export const useAnimatedReaction: <T>(
+  prepare: () => T,
+  react: (v: T) => void,
+  dependencies?: DependencyList
+) => void = Reanimated2?.useAnimatedReaction || throwOnMissingReanimated;
+
+export const isSharedValue = <T>(value: unknown): value is SharedValue<T> => {
+  return (
+    !!value &&
+    (Reanimated3
+      ? Reanimated3.isSharedValue(value)
+      : (value as any).value !== undefined)
+  );
 };