@shopify/react-native-skia 0.1.123 → 0.1.126

package/src/animation/functions/interpolate.ts

@@ -0,0 +1,182 @@
+/* eslint-disable max-len */
+export enum Extrapolate {
+  IDENTITY = "identity",
+  CLAMP = "clamp",
+  EXTEND = "extend",
+}
+
+interface InterpolationNarrowedInput {
+  leftEdgeInput: number;
+  rightEdgeInput: number;
+  leftEdgeOutput: number;
+  rightEdgeOutput: number;
+}
+
+export interface ExtrapolationConfig {
+  extrapolateLeft?: Extrapolate | string;
+  extrapolateRight?: Extrapolate | string;
+}
+
+interface RequiredExtrapolationConfig {
+  extrapolateLeft: Extrapolate;
+  extrapolateRight: Extrapolate;
+}
+
+export type ExtrapolationType =
+  | ExtrapolationConfig
+  | Extrapolate
+  | string
+  | undefined;
+
+function getVal(
+  type: Extrapolate,
+  coef: number,
+  val: number,
+  leftEdgeOutput: number,
+  rightEdgeOutput: number,
+  x: number
+): number {
+  switch (type) {
+    case Extrapolate.IDENTITY:
+      return x;
+    case Extrapolate.CLAMP:
+      if (coef * val < coef * leftEdgeOutput) {
+        return leftEdgeOutput;
+      }
+      return rightEdgeOutput;
+    case Extrapolate.EXTEND:
+    default:
+      return val;
+  }
+}
+
+function isExtrapolate(value: string): value is Extrapolate {
+  return (
+    value === Extrapolate.EXTEND ||
+    value === Extrapolate.CLAMP ||
+    value === Extrapolate.IDENTITY
+  );
+}
+
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+function validateType(type: ExtrapolationType): RequiredExtrapolationConfig {
+  // initialize extrapolationConfig with default extrapolation
+  const extrapolationConfig: RequiredExtrapolationConfig = {
+    extrapolateLeft: Extrapolate.EXTEND,
+    extrapolateRight: Extrapolate.EXTEND,
+  };
+
+  if (!type) {
+    return extrapolationConfig;
+  }
+
+  if (typeof type === "string") {
+    if (!isExtrapolate(type)) {
+      throw new Error(
+        `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`
+      );
+    }
+    extrapolationConfig.extrapolateLeft = type;
+    extrapolationConfig.extrapolateRight = type;
+    return extrapolationConfig;
+  }
+
+  // otherwise type is extrapolation config object
+  if (
+    (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+    (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))
+  ) {
+    throw new Error(
+      `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`
+    );
+  }
+
+  Object.assign(extrapolationConfig, type);
+  return extrapolationConfig;
+}
+
+function internalInterpolate(
+  x: number,
+  narrowedInput: InterpolationNarrowedInput,
+  extrapolationConfig: RequiredExtrapolationConfig
+) {
+  const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } =
+    narrowedInput;
+  if (rightEdgeInput - leftEdgeInput === 0) {
+    return leftEdgeOutput;
+  }
+  const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+  const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+  const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+
+  if (coef * val < coef * leftEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateLeft,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  } else if (coef * val > coef * rightEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateRight,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  }
+
+  return val;
+}
+
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(
+  x: number,
+  input: readonly number[],
+  output: readonly number[],
+  type?: ExtrapolationType
+): number {
+  if (input.length < 2 || output.length < 2) {
+    throw Error(
+      "Interpolation input and output should contain at least two values."
+    );
+  }
+
+  const extrapolationConfig = validateType(type);
+  const { length } = input;
+  const narrowedInput: InterpolationNarrowedInput = {
+    leftEdgeInput: input[0],
+    rightEdgeInput: input[1],
+    leftEdgeOutput: output[0],
+    rightEdgeOutput: output[1],
+  };
+  if (length > 2) {
+    if (x > input[length - 1]) {
+      narrowedInput.leftEdgeInput = input[length - 2];
+      narrowedInput.rightEdgeInput = input[length - 1];
+      narrowedInput.leftEdgeOutput = output[length - 2];
+      narrowedInput.rightEdgeOutput = output[length - 1];
+    } else {
+      for (let i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+          narrowedInput.leftEdgeInput = input[i - 1];
+          narrowedInput.rightEdgeInput = input[i];
+          narrowedInput.leftEdgeOutput = output[i - 1];
+          narrowedInput.rightEdgeOutput = output[i];
+          break;
+        }
+      }
+    }
+  }
+
+  return internalInterpolate(x, narrowedInput, extrapolationConfig);
+}

package/src/animation/functions/interpolateColors.ts

@@ -0,0 +1,58 @@
+import { mix } from "../../renderer";
+import type { Color } from "../../skia";
+import { Skia } from "../../skia";
+import type { SkColor } from "../../skia/Color";
+
+import { interpolate } from "./interpolate";
+
+const interpolateColorsRGB = (
+  value: number,
+  inputRange: number[],
+  outputRange: SkColor[]
+) => {
+  const r = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[0]),
+    "clamp"
+  );
+  const g = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[1]),
+    "clamp"
+  );
+  const b = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[2]),
+    "clamp"
+  );
+  const a = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[3]),
+    "clamp"
+  );
+  return new Float32Array([r, g, b, a]);
+};
+
+export const interpolateColors = (
+  value: number,
+  inputRange: number[],
+  _outputRange: Color[]
+) => {
+  const outputRange = _outputRange.map((cl) => Skia.Color(cl));
+  return interpolateColorsRGB(value, inputRange, outputRange);
+};
+
+export const mixColors = (value: number, x: Color, y: Color) => {
+  const c1 = Skia.Color(x);
+  const c2 = Skia.Color(y);
+  return new Float32Array([
+    mix(value, c1[0], c2[0]),
+    mix(value, c1[1], c2[1]),
+    mix(value, c1[2], c2[2]),
+    mix(value, c1[3], c2[3]),
+  ]);
+};

package/src/{values/animation → animation}/spring/runSpring.ts

@@ -1,4 +1,4 @@
-import type { SkiaValue, SkiaAnimation } from "../../types";
+import type { SkiaValue, SkiaAnimation } from "../../values/types";
 import type {
   AnimationParams,
   SpringConfig,

package/src/{values/animation → animation}/spring/useSpring.ts

@@ -1,4 +1,4 @@
-import type { SkiaReadonlyValue } from "../../types";
+import type { SkiaReadonlyValue } from "../../values/types";
 import type {
   SpringConfig,
   AnimationParams,

package/src/{values/animation → animation}/timing/createTiming.ts

@@ -3,8 +3,8 @@ import type {
   RequiredAnimationParams,
   AnimationCallback,
 } from "../types";
-import type { AnimationState, SkiaValue } from "../../types";
-import { ValueApi } from "../../api";
+import type { AnimationState, SkiaValue } from "../../values/types";
+import { ValueApi } from "../../values/api";
 
 import { timing } from "./functions";
 

package/src/{values/animation → animation}/timing/functions/getResolvedParams.ts

@@ -42,8 +42,8 @@ export const getResolvedParams = (
 
   const resolvedConfig: Required<TimingConfig> = { ...DefaultTimingConfig };
   if (config) {
-    resolvedConfig.duration = config.duration;
-    resolvedConfig.easing = config.easing ?? ((t) => t);
+    resolvedConfig.duration = config.duration ?? DefaultTimingConfig.duration;
+    resolvedConfig.easing = config.easing ?? DefaultTimingConfig.easing;
   }
 
   return { ...resolvedParameters, ...resolvedConfig };

package/src/{values/animation → animation}/timing/functions/timing.ts

@@ -1,4 +1,4 @@
-import type { AnimationState } from "../../../types";
+import type { AnimationState } from "../../../values/types";
 
 /**
  * Calculates and returns a timing value based on the

package/src/{values/animation → animation}/timing/runTiming.ts

@@ -1,4 +1,4 @@
-import type { SkiaValue, SkiaAnimation } from "../../types";
+import type { SkiaValue, SkiaAnimation } from "../../values/types";
 import type {
   AnimationParams,
   TimingConfig,

package/src/{values/animation → animation}/timing/useTiming.ts

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useRef } from "react";
 
-import type { SkiaReadonlyValue, SkiaAnimation } from "../../types";
+import type { SkiaReadonlyValue, SkiaAnimation } from "../../values/types";
 import type {
   AnimationParams,
   TimingConfig,
   AnimationCallback,
 } from "../types";
-import { useValue } from "../../hooks/useValue";
+import { useValue } from "../../values/hooks/useValue";
 
 import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";

package/src/{values/animation → animation}/types.ts

@@ -1,12 +1,12 @@
 export interface SpringConfig {
-  mass: number;
-  stiffness: number;
-  damping: number;
-  velocity: number;
+  mass?: number;
+  stiffness?: number;
+  damping?: number;
+  velocity?: number;
 }
 
 export interface TimingConfig {
-  duration: number;
+  duration?: number;
   easing?: (t: number) => number;
 }
 

package/src/index.ts

@@ -5,3 +5,4 @@ export * from "./views";
 export * from "./skia";
 export * from "./external";
 export * from "./values";
+export * from "./animation";

package/src/renderer/Canvas.tsx

@@ -36,12 +36,19 @@ const CanvasContext = React.createContext<SkiaReadonlyValue<{
   height: number;
 }> | null>(null);
 
-export const useCanvasSize = () => {
-  const canvas = useContext(CanvasContext);
-  if (!canvas) {
+export const useCanvas = () => {
+  const size = useContext(CanvasContext);
+  if (!size) {
     throw new Error("Canvas context is not available");
   }
-  return canvas;
+  return { size };
+};
+
+export const useCanvasSize = () => {
+  console.warn(
+    "useCanvasSize is deprecated, use the size member of useCanvas() instead."
+  );
+  return useCanvas().size;
 };
 
 export const skiaReconciler = ReactReconciler(skHostConfig);

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

@@ -1,11 +1,11 @@
 import React from "react";
 import type { ReactNode } from "react";
 
+import type { Color } from "../../../skia";
 import { BlendMode, Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { Color } from "../../../skia";
 
 import { composeColorFilter } from "./Compose";
 

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

@@ -15,7 +15,7 @@ export interface LerpProps {
 
 const onDeclare = createDeclaration<LerpProps>(({ t }, children) => {
   const [src, dst] = children.filter(isColorFilter);
-  const cf = Skia.ColorFilter.MakeLerp(t, dst, src);
+  const cf = Skia.ColorFilter.MakeLerp(t, src, dst);
   return composeColorFilter(
     cf,
     children.filter((c) => c !== src && c !== dst)

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

@@ -2,6 +2,8 @@ import type { SkColor } from "../../../skia";
 import { BlendMode, Skia, TileMode } from "../../../skia";
 import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
 
+const Black = Skia.Color("black");
+
 export const MakeInnerShadow = (
   shadowOnly: boolean | undefined,
   dx: number,
@@ -12,11 +14,11 @@ export const MakeInnerShadow = (
   input: SkImageFilter | null
 ) => {
   const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
     null
   );
   const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
     null
   );
   const f1 = Skia.ImageFilter.MakeColorFilter(

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { SkRuntimeEffect } from "../../../skia/RuntimeEffect/RuntimeEffect";
+
+import { getInput } from "./getInput";
+
+export interface RuntimeShaderProps {
+  source: SkRuntimeEffect;
+}
+
+const onDeclare = createDeclaration<RuntimeShaderProps>(
+  ({ source }, children) => {
+    const rtb = Skia.RuntimeShaderBuilder(source);
+    return Skia.ImageFilter.MakeRuntimeShader(rtb, null, getInput(children));
+  }
+);
+
+export const RuntimeShader = (props: AnimatedProps<RuntimeShaderProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -3,3 +3,4 @@ export * from "./Offset";
 export * from "./DisplacementMap";
 export * from "./Shadow";
 export * from "./Morphology";
+export * from "./RuntimeShader";

package/src/renderer/components/shaders/Gradient.ts

@@ -1,4 +1,4 @@
-import { TileMode, Skia } from "../../../skia";
+import { Skia, TileMode } from "../../../skia";
 import type { SkEnum } from "../../processors/Paint";
 import type { TransformProps } from "../../processors/Transform";
 import { enumKey } from "../../processors/Paint";
@@ -19,9 +19,7 @@ export const processGradientProps = ({
   flags,
   ...transform
 }: GradientProps) => ({
-  colors: colors.map((color) =>
-    typeof color === "string" ? Skia.Color(color) : color
-  ),
+  colors: colors.map((color) => Skia.Color(color)),
   positions: positions ?? null,
   mode: TileMode[enumKey(mode ?? "clamp")],
   flags,

package/src/renderer/components/shaders/Shader.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import type { ReactNode } from "react";
 
 import { isShader } from "../../../skia";
-import type { IRuntimeEffect } from "../../../skia";
+import type { SkRuntimeEffect } from "../../../skia";
 import type { Vector, AnimatedProps, TransformProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
 import { localMatrix } from "../../processors";
 
-// We need to use any here because hasOwnProperty doesn't work on JSI instances
 const isVector = (obj: unknown): obj is Vector =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (obj as any).x !== undefined && (obj as any).y !== undefined;
 
@@ -28,7 +28,7 @@ const processValue = (value: UniformValue): number | readonly number[] => {
 };
 
 export interface ShaderProps extends TransformProps {
-  source: IRuntimeEffect;
+  source: SkRuntimeEffect;
   uniforms: Uniforms;
   opaque?: boolean;
   children?: ReactNode | ReactNode[];

package/src/renderer/processors/Circles.ts

@@ -15,8 +15,9 @@ interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx;
+  (def as any).cx !== undefined;
 export const processCircle = (def: CircleDef) => {
   if (isCircleScalarDef(def)) {
     return { c: vec(def.cx, def.cy), r: def.r };

package/src/renderer/processors/Font.ts

@@ -5,7 +5,7 @@ import type { FontMgr } from "../../skia/FontMgr/FontMgr";
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
 export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
-  // We use any here for safety (JSI instances don't have hasProperty working properly);
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
 

package/src/renderer/processors/Rects.ts

@@ -1,26 +1,18 @@
-// Here we use any because hasOwnProperty doesn't work on JSI instances not does the (key in obj) syntax
-// And using Object.keys for such use-case is incredibly slow
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SkRect, SkRRect } from "../../skia";
+import { Skia } from "../../skia";
 
 import { vec } from "./math/Vector";
 import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
 
-export const point = (x: number, y: number) => ({ x, y });
+export const point = (x: number, y: number) => Skia.Point(x, y);
 
-export const rect = (x: number, y: number, width: number, height: number) => ({
-  x,
-  y,
-  width,
-  height,
-});
+export const rect = (x: number, y: number, width: number, height: number) =>
+  Skia.XYWHRect(x, y, width, height);
 
-export const rrect = (r: SkRect, rx: number, ry: number) => ({
-  rect: r,
-  rx,
-  ry,
-});
+export const rrect = (r: SkRect, rx: number, ry: number) =>
+  Skia.RRectXY(r, rx, ry);
 
 export const bounds = (rects: SkRect[]) => {
   const x = Math.min(...rects.map((r) => r.x));
@@ -47,10 +39,13 @@ export const center = (r: SkRect | SkRRect) =>
     ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
     : vec(r.x + r.width / 2, r.y + r.height / 2);
 
+// We have an issue to check property existence on JSI backed instances
 const isRRectCtor = (def: RRectDef): def is RRectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
   (def as any).rect !== undefined;