@shopify/react-native-skia 0.1.115

package/src/values/animation/timing/functions/__tests__/timing.spec.ts

@@ -0,0 +1,29 @@
+import { timing } from "../timing";
+
+const state = { current: 0, finished: false };
+
+describe("timing", () => {
+  it("should return zero when the timestamp is zero", () => {
+    expect(timing(0, 1000, (t) => t, false, false, state).current).toBe(0);
+  });
+
+  it("should return 1 when the timestamp is over duration", () => {
+    expect(timing(2000, 1000, (t) => t, false, false, state).current).toBe(1);
+  });
+
+  it("should return 0 when yoyo/loop is true and t is duration times 2", () => {
+    expect(timing(2000, 1000, (t) => t, true, true, state).current).toBe(0);
+  });
+
+  it("should return 1.0 when t = duration when looping and yoyo ", () => {
+    expect(timing(700, 700, (t) => t, true, true, state).current).toBe(1);
+  });
+
+  it("should return 0 when t = duration when looping and not yoyo ", () => {
+    expect(timing(700, 700, (t) => t, true, false, state).current).toBe(0);
+  });
+
+  it("should stop when duration is reached", () => {
+    expect(timing(700, 700, (t) => t, false, false, state).finished).toBe(true);
+  });
+});

package/src/values/animation/timing/functions/bezier.ts

@@ -0,0 +1,165 @@
+// eslint-disable-next-line max-len
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/bezier.js
+
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+const float32ArraySupported = typeof Float32Array === "function";
+
+function a(aA1: number, aA2: number): number {
+  return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+
+function b(aA1: number, aA2: number): number {
+  return 3.0 * aA2 - 6.0 * aA1;
+}
+
+function c(aA1: number): number {
+  return 3.0 * aA1;
+}
+
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+function calcBezier(aT: number, aA1: number, aA2: number): number {
+  return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
+}
+
+// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+function getSlope(aT: number, aA1: number, aA2: number): number {
+  return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
+}
+
+function binarySubdivide({
+  aX,
+  _aA,
+  _aB,
+  mX1,
+  mX2,
+}: {
+  aX: number;
+  _aA: number;
+  _aB: number;
+  mX1: number;
+  mX2: number;
+}): number {
+  let currentX;
+  let currentT;
+  let i = 0;
+  let aA = _aA;
+  let aB = _aB;
+  do {
+    currentT = aA + (aB - aA) / 2.0;
+    currentX = calcBezier(currentT, mX1, mX2) - aX;
+    if (currentX > 0.0) {
+      aB = currentT;
+    } else {
+      aA = currentT;
+    }
+  } while (
+    Math.abs(currentX) > SUBDIVISION_PRECISION &&
+    ++i < SUBDIVISION_MAX_ITERATIONS
+  );
+
+  return currentT;
+}
+
+function newtonRaphsonIterate(
+  aX: number,
+  _aGuessT: number,
+  mX1: number,
+  mX2: number
+): number {
+  let aGuessT = _aGuessT;
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+
+  return aGuessT;
+}
+
+export function bezier(
+  mX1: number,
+  mY1: number,
+  mX2: number,
+  mY2: number
+): (x: number) => number {
+  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
+    throw new Error("bezier x values must be in [0, 1] range");
+  }
+
+  // Precompute samples table
+  const sampleValues = float32ArraySupported
+    ? new Float32Array(kSplineTableSize)
+    : new Array(kSplineTableSize);
+  if (mX1 !== mY1 || mX2 !== mY2) {
+    for (let i = 0; i < kSplineTableSize; ++i) {
+      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+  }
+
+  function getTForX(aX: number): number {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    const lastSample = kSplineTableSize - 1;
+
+    for (
+      ;
+      currentSample !== lastSample && sampleValues[currentSample] <= aX;
+      ++currentSample
+    ) {
+      intervalStart += kSampleStepSize;
+    }
+
+    --currentSample;
+
+    // Interpolate to provide an initial guess for t
+    const dist =
+      (aX - sampleValues[currentSample]) /
+      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    }
+
+    if (initialSlope === 0.0) {
+      return guessForT;
+    }
+
+    return binarySubdivide({
+      aX,
+      _aA: intervalStart,
+      _aB: intervalStart + kSampleStepSize,
+      mX1,
+      mX2,
+    });
+  }
+
+  return function (x: number): number {
+    if (mX1 === mY1 && mX2 === mY2) {
+      return x; // linear
+    }
+
+    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+    if (x === 0) {
+      return 0;
+    }
+
+    if (x === 1) {
+      return 1;
+    }
+
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+}

package/src/values/animation/timing/functions/getResolvedParams.ts

@@ -0,0 +1,50 @@
+import type {
+  RequiredAnimationParams,
+  AnimationParams,
+  TimingConfig,
+} from "../../types";
+
+const DefaultParameters = {
+  to: 1,
+  loop: false,
+  yoyo: false,
+  immediate: true,
+};
+
+const DefaultTimingConfig = {
+  duration: 1000,
+  easing: (t: number) => t,
+};
+
+/**
+ * Resolves parameters from optional values to a single object
+ * @param toOrParams Params or to value
+ * @param config timing/spring configuration
+ */
+export const getResolvedParams = (
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig
+): RequiredAnimationParams & Required<TimingConfig> => {
+  let resolvedParameters: RequiredAnimationParams = {
+    ...DefaultParameters,
+  };
+
+  if (typeof toOrParams === "number") {
+    resolvedParameters.to = toOrParams;
+  } else {
+    resolvedParameters = {
+      from: toOrParams.from ?? resolvedParameters.from,
+      to: toOrParams.to ?? resolvedParameters.to,
+      loop: toOrParams.loop ?? resolvedParameters.loop,
+      yoyo: toOrParams.yoyo ?? resolvedParameters.yoyo,
+    };
+  }
+
+  const resolvedConfig: Required<TimingConfig> = { ...DefaultTimingConfig };
+  if (config) {
+    resolvedConfig.duration = config.duration;
+    resolvedConfig.easing = config.easing ?? ((t) => t);
+  }
+
+  return { ...resolvedParameters, ...resolvedConfig };
+};

package/src/values/animation/timing/functions/index.ts

@@ -0,0 +1,4 @@
+export { bezier } from "./bezier";
+export { timing } from "./timing";
+export * from "./types";
+export * from "./getResolvedParams";

package/src/values/animation/timing/functions/timing.ts

@@ -0,0 +1,44 @@
+import type { AnimationState } from "../../../types";
+
+/**
+ * Calculates and returns a timing value based on the
+ * input parameters. The timing value is a number between
+ * 0 and 1.
+ * @param t
+ * @param duration
+ * @param easing
+ * @param loop
+ * @param yoyo
+ * @param onStop
+ * @returns
+ */
+export const timing = (
+  t: number,
+  duration: number,
+  easing: (t: number) => number,
+  loop: boolean,
+  yoyo: boolean,
+  state: AnimationState
+) => {
+  let current = t / duration;
+  let { finished } = state;
+  // Side effect to stop animation when duration is reached (if loop is false)
+  if (current >= 1.0 && !loop) {
+    finished = true;
+    current = 1.0;
+  }
+  // calculate return value
+  let n = current % 1;
+  if (yoyo) {
+    n = current % 2.0 >= 1.0 ? 1 - (current % 1) : current % 1;
+  } else if (!loop) {
+    if (current >= 1.0) {
+      n = 1.0;
+    }
+  }
+  current = easing(Math.max(0, Math.min(1, n)));
+  return {
+    current,
+    finished,
+  };
+};

package/src/values/animation/timing/functions/types.ts

@@ -0,0 +1,8 @@
+export type EasingFunction = (value: number) => number;
+
+export interface TimingConfig {
+  from?: number;
+  to?: number;
+  duration?: number;
+  easing?: EasingFunction;
+}

package/src/values/animation/timing/index.ts

@@ -0,0 +1,4 @@
+export { Easing } from "./Easing";
+export { useTiming } from "./useTiming";
+export { useLoop } from "./useLoop";
+export { runTiming } from "./runTiming";

package/src/values/animation/timing/runTiming.ts

@@ -0,0 +1,33 @@
+import type { SkiaValue, SkiaAnimation } from "../../types";
+import type {
+  AnimationParams,
+  TimingConfig,
+  AnimationCallback,
+} from "../types";
+
+import { getResolvedParams } from "./functions";
+import { createTiming } from "./createTiming";
+/**
+ * Creates a new animation on an existing value that will be driven by
+ * an animation value. The value will be run from / to the value in
+ * params and modified by the provided easing curve for the length of
+ * the duration. When the value has reached its desired "to" value the
+ * animation will be stopped.
+ *
+ * @param value The value to animate
+ * @param toOrParams To value or Animation parameters
+ * @param config Spring or timing configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export const runTiming = (
+  value: SkiaValue<number>,
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig,
+  callback?: AnimationCallback
+): SkiaAnimation => {
+  const resolvedParameters = getResolvedParams(toOrParams, config);
+  const animation = createTiming(resolvedParameters, value, callback);
+  value.animation = animation;
+  return animation;
+};

package/src/values/animation/timing/useLoop.ts

@@ -0,0 +1,18 @@
+import type { TimingConfig } from "../types";
+
+import { useTiming } from "./useTiming";
+
+/**
+ * Configures a looped timing value. The value will go back and forth
+ * between 0 and 1 and back.
+ * @param config Timing configuration for easing and duration
+ * @returns A value that can be used for further animations
+ */
+export const useLoop = (config?: TimingConfig) =>
+  useTiming(
+    {
+      yoyo: true,
+      loop: true,
+    },
+    config
+  );

package/src/values/animation/timing/useTiming.ts

@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useRef } from "react";
+
+import type { SkiaReadonlyValue, SkiaAnimation } from "../../types";
+import type {
+  AnimationParams,
+  TimingConfig,
+  AnimationCallback,
+} from "../types";
+import { useValue } from "../../hooks/useValue";
+
+import { getResolvedParams } from "./functions";
+import { createTiming } from "./createTiming";
+
+/**
+ * Creats an animation value that will run whenever
+ * the animation parameters change. The animation start immediately.
+ * @param toOrParams
+ * @param config
+ * @returns A value that is animated
+ */
+export const useTiming = (
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig,
+  callback?: AnimationCallback
+): SkiaReadonlyValue<number> => {
+  // Resolve parameters - keep a cached version to avoid
+  // unnecesary re-renders.
+  const prevCfgRef = useRef<ReturnType<typeof getResolvedParams>>();
+  const resolvedParameters = useMemo(() => {
+    const nextParams = getResolvedParams(toOrParams, config);
+    if (!equals(prevCfgRef.current, nextParams)) {
+      prevCfgRef.current = nextParams;
+    }
+    return prevCfgRef.current!;
+  }, [config, toOrParams]);
+
+  // Create value
+  const value = useValue(resolvedParameters.from ?? 0);
+
+  // Create timing animation - keep a cached version to avoid
+  // uneccessary recreation of animations
+  const prevAnimationRef = useRef<SkiaAnimation>();
+  const prevParamsRef = useRef<typeof resolvedParameters>();
+  const animation = useMemo(() => {
+    if (!equals(prevParamsRef.current, resolvedParameters)) {
+      prevParamsRef.current = resolvedParameters;
+      prevAnimationRef.current = createTiming(
+        resolvedParameters,
+        value,
+        callback
+      );
+    }
+    return prevAnimationRef.current!;
+  }, [callback, resolvedParameters, value]);
+
+  // Run animation on the value - and stop it on unmount
+  useEffect(() => {
+    value.animation = animation;
+    return () => (value.animation = undefined);
+  }, [animation, value]);
+
+  // Return the value that is animated
+  return value;
+};
+
+const equals = <T1, T2>(a: T1, b: T2) => {
+  return JSON.stringify(a) === JSON.stringify(b);
+};

package/src/values/animation/types.ts

@@ -0,0 +1,23 @@
+export interface SpringConfig {
+  mass: number;
+  stiffness: number;
+  damping: number;
+  velocity: number;
+}
+
+export interface TimingConfig {
+  duration: number;
+  easing?: (t: number) => number;
+}
+
+export interface AnimationParams {
+  from?: number;
+  to?: number;
+  loop?: boolean;
+  yoyo?: boolean;
+}
+
+export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> &
+  Pick<AnimationParams, "from">;
+
+export type AnimationCallback = (current: number) => void;

package/src/values/api.ts

@@ -0,0 +1,49 @@
+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;
+}
+
+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,
+};
+
+export const { createValue, createDerivedValue } = ValueApi;

package/src/values/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./useClockValue";
+export * from "./useDerivedValue";
+export * from "./useValue";
+export * from "./useValueEffect";

package/src/values/hooks/useClockValue.ts

@@ -0,0 +1,18 @@
+import { useEffect, useMemo } from "react";
+
+import { ValueApi } from "../api";
+
+/**
+ * @returns A new value that will be updated on every frame redraw with the
+ * number of milliseconds elapsed since the value was started.
+ * The clock is created in the stopped state.
+ */
+
+export const useClockValue = () => {
+  const clock = useMemo(() => ValueApi.createClockValue(), []);
+  useEffect(() => {
+    clock.start();
+    return clock.stop;
+  }, [clock]);
+  return clock;
+};

package/src/values/hooks/useDerivedValue.ts

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+
+import { ValueApi } from "../api";
+import { isValue } from "../../renderer";
+
+/**
+ * Creates a new derived value - a value that will calculate its value depending
+ * on other values.
+ * @param cb Callback to calculate new value
+ * @param values Dependant values
+ * @returns A readonly value
+ */
+export const useDerivedValue = <R>(cb: () => R, values: unknown[]) =>
+  useMemo(
+    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    values
+  );

package/src/values/hooks/useValue.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+
+import { ValueApi } from "../api";
+import type { SkiaValue } from "../types";
+
+/**
+ * Creates a new value that holds some data.
+ * @param v Value to hold
+ * @returns A Value of type of v
+ */
+export const useValue = <T>(v: T): SkiaValue<T> => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => ValueApi.createValue(v), []);
+};

package/src/values/hooks/useValueEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+import type { SkiaReadonlyValue } from "../types";
+
+/**
+ * Sets up an effect that will be run whenever the value changes
+ * @param value Value to subscribe to changes on
+ * @param cb Callback to run when value changes
+ */
+export const useValueEffect = <T>(
+  value: SkiaReadonlyValue<T>,
+  cb: (v: T) => void
+) => {
+  useEffect(() => {
+    return value.addListener(cb);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+};

package/src/values/index.ts

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

package/src/values/types.ts

@@ -0,0 +1,40 @@
+export interface SkiaReadonlyValue<T = number> {
+  /**
+   * Gets the value hold by the Value object
+   */
+  readonly current: T;
+  /**
+   * Adds a listener that is called when value changes.
+   * Returns unsubscribe method.
+   */
+  addListener: (cb: (value: T) => void) => () => void;
+  /**
+   * Field to make typechecking easier
+   */
+  __typename__: "RNSkValue";
+}
+
+export interface SkiaValue<T = number> extends SkiaReadonlyValue<T> {
+  /**
+   * Get/sets the value hold by the Value object
+   */
+  current: T;
+  /**
+   * Get/sets the animation controlling the value
+   * */
+  animation: SkiaAnimation | undefined;
+}
+
+export interface SkiaClockValue extends SkiaReadonlyValue<number> {
+  start: () => void;
+  stop: () => void;
+}
+
+export interface SkiaAnimation {
+  cancel: () => void;
+}
+
+export interface AnimationState {
+  current: number;
+  finished: boolean;
+}