@shopify/react-native-skia 0.1.123 → 0.1.126

package/src/renderer/processors/math/Matrix3.ts

@@ -1,9 +1,5 @@
 import { exhaustiveCheck } from "../../typeddash";
-import type { SkMatrix } from "../../../skia/Matrix";
-
-export type Vec3 = readonly [number, number, number];
-
-export type Matrix3 = readonly [Vec3, Vec3, Vec3];
+import { Skia } from "../../../skia";
 
 type Transform2dName =
   | "translateX"
@@ -34,121 +30,44 @@ export type Transforms2d = readonly (
   | Pick<Transformations, "rotate">
 )[];
 
-const identityMatrix: Matrix3 = [
-  [1, 0, 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const translateXMatrix = (x: number): Matrix3 => [
-  [1, 0, x],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const translateYMatrix = (y: number): Matrix3 => [
-  [1, 0, 0],
-  [0, 1, y],
-  [0, 0, 1],
-];
-
-const scaleMatrix = (s: number): Matrix3 => [
-  [s, 0, 0],
-  [0, s, 0],
-  [0, 0, 1],
-];
-
-const scaleXMatrix = (s: number): Matrix3 => [
-  [s, 0, 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const scaleYMatrix = (s: number): Matrix3 => [
-  [1, 0, 0],
-  [0, s, 0],
-  [0, 0, 1],
-];
-
-const skewXMatrix = (s: number): Matrix3 => [
-  [1, Math.tan(s), 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const skewYMatrix = (s: number): Matrix3 => [
-  [1, 0, 0],
-  [Math.tan(s), 1, 0],
-  [0, 0, 1],
-];
-
-const rotateZMatrix = (r: number): Matrix3 => [
-  [Math.cos(r), -1 * Math.sin(r), 0],
-  [Math.sin(r), Math.cos(r), 0],
-  [0, 0, 1],
-];
-
-const dot3 = (row: Vec3, col: Vec3) =>
-  row[0] * col[0] + row[1] * col[1] + row[2] * col[2];
-
-const multiply3 = (m1: Matrix3, m2: Matrix3) => {
-  const col0 = [m2[0][0], m2[1][0], m2[2][0]] as const;
-  const col1 = [m2[0][1], m2[1][1], m2[2][1]] as const;
-  const col2 = [m2[0][2], m2[1][2], m2[2][2]] as const;
-  return [
-    [dot3(m1[0], col0), dot3(m1[0], col1), dot3(m1[0], col2)],
-    [dot3(m1[1], col0), dot3(m1[1], col1), dot3(m1[1], col2)],
-    [dot3(m1[2], col0), dot3(m1[2], col1), dot3(m1[2], col2)],
-  ] as const;
-};
-
-export const matrixVecMul3 = (m: Matrix3, v: Vec3) =>
-  [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)] as const;
-
-const skiaMatrix3 = (m: Matrix3): SkMatrix => {
-  return [
-    m[0][0],
-    m[0][1],
-    m[0][2],
-    m[1][0],
-    m[1][1],
-    m[1][2],
-    m[2][0],
-    m[2][1],
-    m[2][2],
-  ];
-};
-
-export const processTransform2d = (transforms: Transforms2d) =>
-  skiaMatrix3(processTransform(transforms));
-
-const processTransform = (transforms: Transforms2d) =>
-  transforms.reduce((acc, transform) => {
+export const processTransform2d = (transforms: Transforms2d) => {
+  const m = Skia.Matrix();
+  for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
     if (key === "translateX") {
-      return multiply3(acc, translateXMatrix(value));
+      m.preTranslate(value, 0);
+      continue;
     }
     if (key === "translateY") {
-      return multiply3(acc, translateYMatrix(value));
+      m.preTranslate(0, value);
+      continue;
     }
     if (key === "scale") {
-      return multiply3(acc, scaleMatrix(value));
+      m.preScale(value, value);
+      continue;
     }
     if (key === "scaleX") {
-      return multiply3(acc, scaleXMatrix(value));
+      m.preScale(value, 0);
+      continue;
     }
     if (key === "scaleY") {
-      return multiply3(acc, scaleYMatrix(value));
+      m.preScale(0, value);
+      continue;
     }
     if (key === "skewX") {
-      return multiply3(acc, skewXMatrix(value));
+      m.preSkew(value, 0);
+      continue;
     }
     if (key === "skewY") {
-      return multiply3(acc, skewYMatrix(value));
+      m.preSkew(0, value);
+      continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      return multiply3(acc, rotateZMatrix(value));
+      m.preRotate((value * 180) / Math.PI);
+      continue;
     }
-    return exhaustiveCheck(key);
-  }, identityMatrix);
+    exhaustiveCheck(key);
+  }
+  return m;
+};

package/src/renderer/processors/math/Vector.ts

@@ -1,11 +1,12 @@
-import { interpolate } from "../../../values/animation/functions/interpolate";
+import { interpolate } from "../../../animation/functions/interpolate";
+import { Skia } from "../../../skia";
 
 export interface Vector {
   x: number;
   y: number;
 }
 
-export const vec = (x = 0, y?: number) => ({ x, y: y ?? x });
+export const vec = (x = 0, y?: number) => Skia.Point(x, y ?? x);
 export const neg = (a: Vector) => vec(-a.x, -a.y);
 export const add = (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y);
 export const sub = (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y);

package/src/skia/Color.ts

@@ -1,34 +1,20 @@
 import { Skia } from "./Skia";
 
-// This is the JSI color. Currently a number. This may change.
-export type SkColor = number;
-// Input colors can be string or number
-export type Color = string | number;
+// This is the JSI color
+export type SkColor = Float32Array;
+// Input colors can be string, number or Float32Array
+export type Color = string | Float32Array | number;
 
-export const alphaf = (c: number) => ((c >> 24) & 255) / 255;
-export const red = (c: number) => (c >> 16) & 255;
-export const green = (c: number) => (c >> 8) & 255;
-export const blue = (c: number) => c & 255;
-export const rgbaColor = (r: number, g: number, b: number, af: number) => {
-  const a = Math.round(af * 255);
-  return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-};
+export const RED = 0;
+export const GREEN = 1;
+export const BLUE = 2;
+export const ALPHA = 3;
 
-const processColorAsArray = (cl: Color) => {
-  const icl = typeof cl === "string" ? Skia.Color(cl) : cl;
-  const r = red(icl);
-  const g = green(icl);
-  const b = blue(icl);
-  const a = alphaf(icl);
-  return [r, g, b, a] as const;
-};
+export const rgbaColor = (r: number, g: number, b: number, a: number) =>
+  new Float32Array([r, g, b, a]);
 
 export const processColor = (cl: Color, currentOpacity: number) => {
-  const [r, g, b, a] = processColorAsArray(cl);
-  return rgbaColor(r, g, b, a * currentOpacity);
-};
-
-export const processColorAsUnitArray = (cl: Color, currentOpacity: number) => {
-  const [r, g, b, a] = processColorAsArray(cl);
-  return [r / 255, g / 255, b / 255, a * currentOpacity] as const;
+  const color = Skia.Color(cl);
+  color[ALPHA] *= currentOpacity;
+  return color;
 };

package/src/skia/ImageFilter/ImageFilterFactory.ts

@@ -3,6 +3,7 @@ import type { SkColorFilter } from "../ColorFilter/ColorFilter";
 import type { SkShader } from "../Shader/Shader";
 import type { SkRect } from "../Rect";
 import type { BlendMode } from "../Paint/BlendMode";
+import type { SkRuntimeShaderBuilder } from "../RuntimeEffect";
 
 import type { SkImageFilter, TileMode } from "./ImageFilter";
 
@@ -169,4 +170,23 @@ export interface ImageFilterFactory {
     foreground: SkImageFilter | null,
     cropRect?: SkRect
   ) => SkImageFilter;
+  /**
+   *  Create a filter that fills the output with the per-pixel evaluation of the SkShader produced
+   *  by the SkRuntimeShaderBuilder. The shader is defined in the image filter's local coordinate
+   *  system, so it will automatically be affected by SkCanvas' transform.
+   *
+   *  @param builder         The builder used to produce the runtime shader, that will in turn
+   *                         fill the result image
+   *  @param childShaderName The name of the child shader defined in the builder that will be
+   *                         bound to the input param (or the source image if the input param
+   *                         is null).  If null the builder can have exactly one child shader,
+   *                         which automatically binds the input param.
+   *  @param input           The image filter that will be provided as input to the runtime
+   *                         shader. If null the implicit source image is used instead
+   */
+  MakeRuntimeShader: (
+    builder: SkRuntimeShaderBuilder,
+    childShaderName: string | null,
+    input: SkImageFilter | null
+  ) => SkImageFilter;
 }

package/src/skia/Matrix.ts

@@ -1,3 +1,4 @@
+import type { SkJSIInstance } from "./JsiInstance";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -10,7 +11,7 @@ export enum MatrixIndex {
   persp2 = 8,
 }
 
-export interface SkMatrix {
+export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   0: number;
   1: number;
   2: number;
@@ -20,4 +21,10 @@ export interface SkMatrix {
   6: number;
   7: number;
   8: number;
+
+  preConcat: (matrix: SkMatrix) => void;
+  preTranslate: (x: number, y: number) => void;
+  preScale: (x: number, y: number) => void;
+  preSkew: (x: number, y: number) => void;
+  preRotate: (theta: number) => void;
 }

package/src/skia/RuntimeEffect/RuntimeEffect.ts

@@ -10,7 +10,9 @@ export interface SkSLUniform {
   isInteger: boolean;
 }
 
-export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
+export type SkRuntimeShaderBuilder = SkJSIInstance<"RuntimeShaderBuilder">;
+
+export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
   /**
    * Returns a shader executed using the given uniform data.
    * @param uniforms

package/src/skia/RuntimeEffect/RuntimeEffectFactory.ts

@@ -1,4 +1,4 @@
-import type { IRuntimeEffect } from "./RuntimeEffect";
+import type { SkRuntimeEffect } from "./RuntimeEffect";
 
 export interface RuntimeEffectFactory {
   /**
@@ -7,6 +7,6 @@ export interface RuntimeEffectFactory {
    * @param callback - will be called with any compilation error. If not provided, errors will
    *                   be printed to console.log().
    */
-  Make: (sksl: string) => IRuntimeEffect | null;
+  Make: (sksl: string) => SkRuntimeEffect | null;
   //Make(sksl: string, callback?: (err: string) => void): RuntimeEffect | null;
 }

package/src/skia/Shader/useShader.ts

@@ -3,4 +3,7 @@ import { useMemo } from "react";
 import { Skia } from "../Skia";
 
 export const useShader = (sksl: string) =>
-  useMemo(() => Skia.RuntimeEffect.Make(sksl), [sksl]);
+  useMemo(() => {
+    console.warn("Use shader will be deprecated.");
+    return Skia.RuntimeEffect.Make(sksl);
+  }, [sksl]);

package/src/skia/Skia.ts

@@ -1,131 +1,12 @@
-import { Platform, processColor } from "react-native";
-
 /*global SkiaApi*/
-import type { ImageFilterFactory } from "./ImageFilter";
-import type { PathFactory } from "./Path";
-import type { ColorFilterFactory } from "./ColorFilter";
-import type { SkFont } from "./Font";
-import type { SkTypeface, TypefaceFactory } from "./Typeface";
-import type { ImageFactory } from "./Image";
-import type { MaskFilterFactory } from "./MaskFilter";
-import type { SkPaint } from "./Paint";
-import type { SkRect } from "./Rect";
-import type { SkRRect } from "./RRect";
-import type { RuntimeEffectFactory } from "./RuntimeEffect";
-import type { ShaderFactory } from "./Shader";
-import type { SkMatrix } from "./Matrix";
-import type { PathEffectFactory } from "./PathEffect";
-import type { SkPoint } from "./Point";
-import type { SkVertices, VertexMode } from "./Vertices/Vertices";
-import type { DataFactory } from "./Data";
-import type { SVGFactory } from "./SVG";
-import type { TextBlobFactory } from "./TextBlob";
-import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
-import type { SurfaceFactory } from "./Surface";
 import "./NativeSetup";
-import type { SkRSXform } from "./RSXform";
-import type { SkPath } from "./Path/Path";
-import type { SkContourMeasureIter } from "./ContourMeasure";
-import type { PictureFactory, SkPictureRecorder } from "./Picture";
-import type { Color, SkColor } from "./Color";
-
-/*
- * Parse CSS colors
- */
-const SkiaColor = (cl: Color) => {
-  if (typeof cl === "number") {
-    return cl;
-  }
-  const color = Skia.parseColorString(cl);
-  if (color !== undefined) {
-    return color;
-  } else {
-    // If the color is not recognized, we fallback to React Native
-    let rnColor = processColor(cl);
-    // 1. Neither Skia or RN could parse the color
-    if (typeof rnColor !== "number") {
-      console.warn("Skia couldn't parse the following color " + cl);
-      return BLACK;
-      // 2. The color is recognized by RN but not by Skia
-    } else {
-      console.warn(
-        "Skia couldn't parse the following color " +
-          cl +
-          ". The color parsing was delegated to React Native. Please file on issue with that color."
-      );
-      // On android we need to move the alpha byte to the start of the structure
-      if (Platform.OS === "android") {
-        rnColor = rnColor >>> 0;
-        const a = (rnColor >> 24) & 0xff;
-        const r = (rnColor >> 16) & 0xff;
-        const g = (rnColor >> 8) & 0xff;
-        const b = rnColor & 0xff;
-        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-      }
-      return rnColor;
-    }
-  }
-};
-
-/**
- * Declares the interface for the native Skia API
- */
-export interface Skia {
-  Point: (x: number, y: number) => SkPoint;
-  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
-  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
-  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
-  Color: (color: Color) => SkColor;
-  parseColorString: (color: string) => SkColor | undefined;
-  ContourMeasureIter: (
-    path: SkPath,
-    forceClosed: boolean,
-    resScale: number
-  ) => SkContourMeasureIter;
-  Paint: () => SkPaint;
-  PictureRecorder: () => SkPictureRecorder;
-  Picture: PictureFactory;
-  Path: PathFactory;
-  Matrix: () => SkMatrix;
-  ColorFilter: ColorFilterFactory;
-  Font: (typeface?: SkTypeface, size?: number) => SkFont;
-  Typeface: TypefaceFactory;
-  MaskFilter: MaskFilterFactory;
-  RuntimeEffect: RuntimeEffectFactory;
-  ImageFilter: ImageFilterFactory;
-  Shader: ShaderFactory;
-  PathEffect: PathEffectFactory;
-  /**
-   * Returns an Vertices based on the given positions and optional parameters.
-   * See SkVertices.h (especially the Builder) for more details.
-   * @param mode
-   * @param positions
-   * @param textureCoordinates
-   * @param colors - either a list of int colors or a flattened color array.
-   * @param indices
-   * @param isVolatile
-   */
-  MakeVertices(
-    mode: VertexMode,
-    positions: SkPoint[],
-    textureCoordinates?: SkPoint[] | null,
-    colors?: SkColor[],
-    indices?: number[] | null,
-    isVolatile?: boolean
-  ): SkVertices;
-  Data: DataFactory;
-  Image: ImageFactory;
-  SVG: SVGFactory;
-  FontMgr: FontMgrFactory;
-  TextBlob: TextBlobFactory;
-  Surface: SurfaceFactory;
-}
+import type { SkiaApi as SkSkiaApi } from "./SkiaApi";
 
 /**
  * Declares the SkiaApi as an available object in the global scope
  */
 declare global {
-  var SkiaApi: Skia;
+  var SkiaApi: SkSkiaApi;
 }
 
 /**
@@ -149,15 +30,14 @@ export const Skia = {
   Point: SkiaApi.Point,
   XYWHRect: SkiaApi.XYWHRect,
   RRectXY: SkiaApi.RRectXY,
+  RuntimeShaderBuilder: SkiaApi.RuntimeShaderBuilder,
   Paint: SkiaApi.Paint,
   PictureRecorder: SkiaApi.PictureRecorder,
   Picture: SkiaApi.Picture,
   Path: SkiaApi.Path,
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,
-  // Here are constructors for data types which are represented as typed arrays in CanvasKit
-  Color: SkiaColor,
-  parseColorString: SkiaApi.parseColorString,
+  Color: SkiaApi.Color,
   RSXform: SkiaApi.RSXform,
   // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
   MakeSurface: SkiaApi.Surface.Make,
@@ -165,5 +45,3 @@ export const Skia = {
   MakeImage: SkiaApi.Image.MakeImage,
   MakeVertices: SkiaApi.MakeVertices,
 };
-
-const BLACK = Skia.parseColorString("black")!;

package/src/skia/SkiaApi.ts

@@ -0,0 +1,86 @@
+import type { ImageFilterFactory } from "./ImageFilter";
+import type { PathFactory } from "./Path";
+import type { ColorFilterFactory } from "./ColorFilter";
+import type { SkFont } from "./Font";
+import type { SkTypeface, TypefaceFactory } from "./Typeface";
+import type { ImageFactory } from "./Image";
+import type { MaskFilterFactory } from "./MaskFilter";
+import type { SkPaint } from "./Paint";
+import type { SkRect } from "./Rect";
+import type { SkRRect } from "./RRect";
+import type { RuntimeEffectFactory } from "./RuntimeEffect";
+import type { ShaderFactory } from "./Shader";
+import type { SkMatrix } from "./Matrix";
+import type { PathEffectFactory } from "./PathEffect";
+import type { SkPoint } from "./Point";
+import type { SkVertices, VertexMode } from "./Vertices/Vertices";
+import type { DataFactory } from "./Data";
+import type { SVGFactory } from "./SVG";
+import type { TextBlobFactory } from "./TextBlob";
+import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
+import type { SurfaceFactory } from "./Surface";
+import "./NativeSetup";
+import type { SkRSXform } from "./RSXform";
+import type { SkPath } from "./Path/Path";
+import type { SkContourMeasureIter } from "./ContourMeasure";
+import type { PictureFactory, SkPictureRecorder } from "./Picture";
+import type { Color, SkColor } from "./Color";
+import type {
+  SkRuntimeShaderBuilder,
+  SkRuntimeEffect,
+} from "./RuntimeEffect/RuntimeEffect";
+
+/**
+ * Declares the interface for the native Skia API
+ */
+export interface SkiaApi {
+  Point: (x: number, y: number) => SkPoint;
+  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
+  RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;
+  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
+  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+  Color: (color: Color) => SkColor;
+  parseColorString: (color: string) => SkColor | undefined;
+  ContourMeasureIter: (
+    path: SkPath,
+    forceClosed: boolean,
+    resScale: number
+  ) => SkContourMeasureIter;
+  Paint: () => SkPaint;
+  PictureRecorder: () => SkPictureRecorder;
+  Picture: PictureFactory;
+  Path: PathFactory;
+  Matrix: () => SkMatrix;
+  ColorFilter: ColorFilterFactory;
+  Font: (typeface?: SkTypeface, size?: number) => SkFont;
+  Typeface: TypefaceFactory;
+  MaskFilter: MaskFilterFactory;
+  RuntimeEffect: RuntimeEffectFactory;
+  ImageFilter: ImageFilterFactory;
+  Shader: ShaderFactory;
+  PathEffect: PathEffectFactory;
+  /**
+   * Returns an Vertices based on the given positions and optional parameters.
+   * See SkVertices.h (especially the Builder) for more details.
+   * @param mode
+   * @param positions
+   * @param textureCoordinates
+   * @param colors - either a list of int colors or a flattened color array.
+   * @param indices
+   * @param isVolatile
+   */
+  MakeVertices(
+    mode: VertexMode,
+    positions: SkPoint[],
+    textureCoordinates?: SkPoint[] | null,
+    colors?: SkColor[],
+    indices?: number[] | null,
+    isVolatile?: boolean
+  ): SkVertices;
+  Data: DataFactory;
+  Image: ImageFactory;
+  SVG: SVGFactory;
+  FontMgr: FontMgrFactory;
+  TextBlob: TextBlobFactory;
+  Surface: SurfaceFactory;
+}

package/src/skia/Surface/Surface.ts

@@ -3,7 +3,7 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 import type { SkRect } from "../Rect";
 
-export interface ISurface extends SkJSIInstance<"Surface"> {
+export interface SkSurface extends SkJSIInstance<"Surface"> {
   /** Returns Canvas that draws into the surface. Subsequent calls return the
      same Canvas. Canvas returned is managed and owned by Surface, and is
      deleted when Surface is deleted.

package/src/skia/Surface/SurfaceFactory.ts

@@ -1,4 +1,4 @@
-import type { ISurface } from "./Surface";
+import type { SkSurface } from "./Surface";
 
 export interface SurfaceFactory {
   /**
@@ -8,5 +8,5 @@ export interface SurfaceFactory {
    * @param width - number of pixels of the width of the drawable area.
    * @param height - number of pixels of the height of the drawable area.
    */
-  Make: (width: number, height: number) => ISurface | null;
+  Make: (width: number, height: number) => SkSurface | null;
 }

package/src/values/api.ts

@@ -1,49 +1,10 @@
-import type {
-  SkiaAnimation,
-  AnimationState,
-  SkiaReadonlyValue,
-  SkiaClockValue,
-  SkiaValue,
-} from "./types";
-
-export interface ISkiaValueApi {
-  /**
-   * Creates a new value that holds the initial value and that
-   * can be changed.
-   */
-  createValue: <T>(initialValue: T) => SkiaValue<T>;
-  /**
-   * Creates a derived value. This is a calculated value that returns the result of
-   * a function that is called with the values of the dependencies.
-   */
-  createDerivedValue: <R>(
-    cb: () => R,
-    values: Array<SkiaReadonlyValue<unknown>>
-  ) => SkiaReadonlyValue<R>;
-  /**
-   * Creates a clock value where the value is the number of milliseconds elapsed
-   * since the clock was created
-   */
-  createClockValue: () => SkiaClockValue;
-  /**
-   * Creates an animation that is driven from a clock and updated every frame.
-   * @param cb Callback to calculate next value from time.
-   * @returns An animation object that can control a value.
-   */
-  createAnimation: <S extends AnimationState = AnimationState>(
-    cb: (t: number, state: S | undefined) => S
-  ) => SkiaAnimation;
-}
+import type { ISkiaValueApi } from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
-export const ValueApi: ISkiaValueApi = {
-  createValue: global.SkiaValueApi.createValue,
-  createDerivedValue: global.SkiaValueApi.createDerivedValue,
-  createClockValue: global.SkiaValueApi.createClockValue,
-  createAnimation: global.SkiaValueApi.createAnimation,
-};
+const { SkiaValueApi } = global;
+export const ValueApi = SkiaValueApi;
 
 export const { createValue, createDerivedValue } = ValueApi;

package/src/values/api.web.ts

@@ -0,0 +1,5 @@
+import { ValueApi as ValueApiWeb } from "./web";
+
+export const ValueApi = ValueApiWeb;
+
+export const { createValue, createDerivedValue } = ValueApi;

package/src/values/index.ts

@@ -1,4 +1,3 @@
 export * from "./types";
 export * from "./hooks";
-export * from "./animation";
 export * from "./api";