@shopify/react-native-skia 0.1.229 → 0.1.230

package/lib/typescript/src/views/SkiaView.d.ts

@@ -1,35 +0,0 @@
-import React from "react";
-import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
-import type { SkiaDrawViewProps } from "./types";
-export declare const SkiaViewNativeId: {
-    current: number;
-};
-/**
- * @deprecated If you are looking to use the Skia imperative API, you can use:
- * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
- * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
- */
-export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
-    constructor(props: SkiaDrawViewProps);
-    private _nativeId;
-    get nativeId(): number;
-    componentDidUpdate(prevProps: SkiaDrawViewProps): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    redraw(): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(values: SkiaValue<unknown>[]): () => void;
-    render(): React.JSX.Element;
-}

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -1,7 +0,0 @@
-import type { SkCanvas } from "../skia/types";
-import type { SkiaDrawViewProps, TouchInfo } from "./types";
-import { SkiaBaseWebView } from "./SkiaBaseWebView";
-export declare class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
-    constructor(props: SkiaDrawViewProps);
-    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
-}

package/lib/typescript/src/views/useDrawCallback.d.ts

@@ -1,8 +0,0 @@
-import type { DependencyList } from "react";
-import type { RNSkiaDrawCallback } from "./types";
-/**
- * Creates a memoized callback for the onDraw handler of a Skia component.
- * @param callback The callback to memoize.
- * @param deps Dependencies for the callback.
- * */
-export declare const useDrawCallback: (callback: RNSkiaDrawCallback, deps?: DependencyList) => RNSkiaDrawCallback;

package/src/animation/decay/decay.ts

@@ -1,35 +0,0 @@
-import type { DecayState, DefaultDecayConfig } from "./types";
-
-const VELOCITY_EPS = 1;
-const SLOPE_FACTOR = 0.1;
-
-export const decay = (
-  now: number,
-  state: DecayState,
-  config: DefaultDecayConfig
-): DecayState => {
-  const { lastTimestamp, startTimestamp, initialVelocity, current, velocity } =
-    state;
-  const nextState = { ...state };
-  const deltaTime = Math.min(now - lastTimestamp, 64);
-  const v =
-    velocity *
-    Math.exp(
-      -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
-    );
-  nextState.current = current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
-  nextState.velocity = v;
-  nextState.lastTimestamp = now;
-
-  if (config.clamp) {
-    if (initialVelocity < 0 && nextState.current <= config.clamp[0]) {
-      nextState.current = config.clamp[0];
-      nextState.finished = true;
-    } else if (initialVelocity > 0 && nextState.current >= config.clamp[1]) {
-      nextState.current = config.clamp[1];
-      nextState.finished = true;
-    }
-  }
-  nextState.finished = Math.abs(v) < VELOCITY_EPS;
-  return nextState;
-};

package/src/animation/decay/index.ts

@@ -1 +0,0 @@
-export { runDecay } from "./runDecay";

package/src/animation/decay/runDecay.ts

@@ -1,40 +0,0 @@
-import { ValueApi } from "../../values/api";
-import type { SkiaMutableValue } from "../../values/types";
-
-import { decay } from "./decay";
-import type { DecayConfig, DefaultDecayConfig, DecayState } from "./types";
-
-/**
- * Runs a decay animation from the current value to zero with the given decay
- * configuration.
- * @param value value to animate
- * @param config Configuration or default configuration
- * @returns Animation
- */
-export const runDecay = (
-  value: SkiaMutableValue<number>,
-  config?: DecayConfig
-) => {
-  const resolvedConfig: DefaultDecayConfig = {
-    deceleration: 0.998,
-    velocityFactor: 1,
-    velocity: 0,
-    from: value.current,
-    ...config,
-  };
-  const updateFunction = (t: number, state: DecayState | undefined) => {
-    if (!state) {
-      return {
-        current: resolvedConfig.from,
-        finished: false,
-        lastTimestamp: t,
-        startTimestamp: t,
-        initialVelocity: resolvedConfig.velocity,
-        velocity: resolvedConfig.velocity,
-      };
-    }
-    return decay(t, state, resolvedConfig);
-  };
-  value.animation = ValueApi.createAnimation(updateFunction);
-  return value.animation;
-};

package/src/animation/decay/types.ts

@@ -1,24 +0,0 @@
-import type { AnimationState } from "../../values/types";
-
-export interface DecayConfig {
-  from?: number;
-  deceleration?: number;
-  velocityFactor?: number;
-  clamp?: number[];
-  velocity?: number;
-}
-
-export interface DefaultDecayConfig {
-  from: number;
-  deceleration: number;
-  velocityFactor: number;
-  clamp?: number[];
-  velocity: number;
-}
-
-export interface DecayState extends AnimationState {
-  lastTimestamp: number;
-  startTimestamp: number;
-  initialVelocity: number;
-  velocity: number;
-}

package/src/animation/spring/Spring.ts

@@ -1,61 +0,0 @@
-import type { SpringConfig } from "./types";
-
-/*
-  Spring animation configurations
-*/
-const Config = {
-  Gentle: {
-    mass: 1,
-    stiffness: 170,
-    damping: 19,
-    velocity: 0,
-  },
-  Wobbly: {
-    mass: 1,
-    stiffness: 180,
-    damping: 12,
-    velocity: 0,
-  },
-  WobblySlow: {
-    mass: 4,
-    stiffness: 180,
-    damping: 25,
-    velocity: 0,
-  },
-  Stiff: {
-    mass: 1,
-    stiffness: 200,
-    damping: 20,
-    velocity: 0,
-  },
-  Default: {
-    mass: 1,
-    stiffness: 100,
-    damping: 10,
-    velocity: 0,
-  },
-};
-
-export const Spring = {
-  Config,
-  Gentle: (config: SpringConfig = {}) => ({
-    ...Config.Gentle,
-    ...config,
-  }),
-  Wobbly: (config: SpringConfig = {}) => ({
-    ...Config.Wobbly,
-    ...config,
-  }),
-  WobblySlow: (config: SpringConfig = {}) => ({
-    ...Config.WobblySlow,
-    ...config,
-  }),
-  Stiff: (config: SpringConfig = {}) => ({
-    ...Config.Stiff,
-    ...config,
-  }),
-  Default: (config: SpringConfig = {}) => ({
-    ...Config.Default,
-    ...config,
-  }),
-};

package/src/animation/spring/functions/index.ts

@@ -1 +0,0 @@
-export { createSpringEasing } from "./spring";

package/src/animation/spring/functions/spring.ts

@@ -1,86 +0,0 @@
-import type { SpringConfig } from "../types";
-import type { TimingConfig } from "../../types";
-
-/**
- * @description Returns a cached jsContext function for a spring with duration
- * @param mass The mass of the spring
- * @param stiffness The stiffness of the spring
- * @param damping Spring damping
- * @param velocity The initial velocity
- */
-export const createSpringEasing = (
-  params: Partial<SpringConfig>
-): TimingConfig => {
-  const config = {
-    mass: 1,
-    stiffness: 100,
-    damping: 10,
-    velocity: 0,
-    ...params,
-  };
-  config.velocity /= 100;
-  return getSpringEasing(config);
-};
-
-const getSpringEasing = (config: Required<SpringConfig>) => {
-  const { stiffness, mass, damping, velocity: initialVelocity } = config;
-  // Setup spring state
-  const state = {
-    w0: Math.sqrt(stiffness / mass),
-    zeta: 0,
-    wd: 0,
-    a: 1,
-    b: 0,
-  };
-  state.zeta = damping / (2 * Math.sqrt(stiffness * mass));
-  state.wd =
-    state.zeta < 1 ? state.w0 * Math.sqrt(1 - state.zeta * state.zeta) : 0;
-  state.a = 1;
-  state.b =
-    state.zeta < 1
-      ? (state.zeta * state.w0 + -initialVelocity) / state.wd
-      : -initialVelocity + state.w0;
-
-  const update = (t: number, duration?: number) => {
-    let progress = duration ? (duration * t) / 1000 : t;
-    if (state.zeta < 1) {
-      progress =
-        Math.exp(-progress * state.zeta * state.w0) *
-        (state.a * Math.cos(state.wd * progress) +
-          state.b * Math.sin(state.wd * progress));
-    } else {
-      progress =
-        (state.a + state.b * progress) * Math.exp(-progress * state.w0);
-    }
-    if (t === 0 || t === 1) {
-      return t;
-    }
-    return 1 - progress;
-  };
-
-  const getDurationMs = () => {
-    var frame = 1 / 6;
-    var elapsed = 0;
-    var rest = 0;
-    while (true) {
-      elapsed += frame;
-      if (update(elapsed) === 1) {
-        rest++;
-        if (rest >= 6) {
-          break;
-        }
-      } else {
-        rest = 0;
-      }
-    }
-    var durationMs = elapsed * frame * 1000;
-    return durationMs + 1000;
-  };
-
-  const durationMs = getDurationMs();
-
-  return {
-    easing: (t: number) => update(t, durationMs),
-    duration: durationMs,
-  };
-};

package/src/animation/spring/index.ts

@@ -1,3 +0,0 @@
-export { Spring } from "./Spring";
-export { runSpring } from "./runSpring";
-export { useSpring } from "./useSpring";

package/src/animation/spring/runSpring.ts

@@ -1,40 +0,0 @@
-import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
-import type {
-  AnimationParams,
-  SpringConfig,
-  AnimationCallback,
-} from "../types";
-import { runTiming } from "../timing/runTiming";
-
-import { Spring } from "./Spring";
-import { createSpringEasing } from "./functions/spring";
-
-/**
- * @deprecated Use Reanimated 3 for animations:
- * https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * 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 configuration
- * @returns an animation value that can be used to start/stop
- * the animation.
- */
-export const runSpring = (
-  value: SkiaMutableValue<number>,
-  toOrParams: number | AnimationParams,
-  config?: SpringConfig,
-  callback?: AnimationCallback
-): SkiaAnimation => {
-  return runTiming(
-    value,
-    toOrParams,
-    createSpringEasing(config ?? Spring.Config.Default),
-    callback
-  );
-};

package/src/animation/spring/types.ts

@@ -1,6 +0,0 @@
-export interface SpringConfig {
-  mass?: number;
-  stiffness?: number;
-  velocity?: number;
-  damping?: number;
-}

package/src/animation/spring/useSpring.ts

@@ -1,31 +0,0 @@
-import type { SkiaValue } from "../../values/types";
-import type {
-  SpringConfig,
-  AnimationParams,
-  AnimationCallback,
-} from "../types";
-import { useTiming } from "../timing";
-
-import { Spring } from "./Spring";
-import { createSpringEasing } from "./functions/spring";
-
-/**
- * @deprecated Use Reanimated 3 for animations:
- * https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Creats a spring based animation value that will run whenever
- * the animation parameters change.
- * @param toOrParams
- * @param config
- * @returns
- */
-export const useSpring = (
-  toOrParams: number | AnimationParams,
-  config?: SpringConfig,
-  callback?: AnimationCallback
-): SkiaValue<number> =>
-  useTiming(
-    toOrParams,
-    createSpringEasing(config ?? Spring.Config.Default),
-    callback
-  );

package/src/animation/timing/Easing.ts

@@ -1,102 +0,0 @@
-// eslint-disable-next-line max-len
-// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/Easing.js
-
-import { bezier } from "./functions";
-
-export class Easing {
-  static step0(n: number): number {
-    return n > 0 ? 1 : 0;
-  }
-
-  static step1(n: number): number {
-    return n >= 1 ? 1 : 0;
-  }
-
-  static linear(t: number): number {
-    return t;
-  }
-
-  static ease(t: number): number {
-    return Easing.bezier(0.42, 0, 1, 1)(t);
-  }
-
-  static quad(t: number): number {
-    return t * t;
-  }
-
-  static cubic(t: number): number {
-    return t * t * t;
-  }
-
-  static poly(n: number): (t: number) => number {
-    return (t: number): number => t ** n;
-  }
-
-  static sin(t: number): number {
-    return 1 - Math.cos((t * Math.PI) / 2);
-  }
-
-  static circle(t: number): number {
-    return 1 - Math.sqrt(1 - t * t);
-  }
-
-  static exp(t: number): number {
-    return 2 ** (10 * (t - 1));
-  }
-
-  static elastic(bounciness = 1): (t: number) => number {
-    const p = bounciness * Math.PI;
-    return (t): number =>
-      1 - Math.cos((t * Math.PI) / 2) ** 3 * Math.cos(t * p);
-  }
-
-  static back(s = 1.70158): (t: number) => number {
-    return (t): number => t * t * ((s + 1) * t - s);
-  }
-
-  static bounce(t: number): number {
-    if (t < 1 / 2.75) {
-      return 7.5625 * t * t;
-    }
-
-    if (t < 2 / 2.75) {
-      const t2_ = t - 1.5 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.75;
-    }
-
-    if (t < 2.5 / 2.75) {
-      const t2_ = t - 2.25 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.9375;
-    }
-
-    const t2 = t - 2.625 / 2.75;
-    return 7.5625 * t2 * t2 + 0.984375;
-  }
-
-  static bezier(
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number
-  ): (t: number) => number {
-    return bezier(x1, y1, x2, y2);
-  }
-
-  static in(easing: (t: number) => number): (t: number) => number {
-    return easing;
-  }
-
-  static out(easing: (t: number) => number): (t: number) => number {
-    return (t): number => 1 - easing(1 - t);
-  }
-
-  static inOut(easing: (t: number) => number): (t: number) => number {
-    return (t): number => {
-      if (t < 0.5) {
-        return easing(t * 2) / 2;
-      }
-
-      return 1 - easing((1 - t) * 2) / 2;
-    };
-  }
-}

package/src/animation/timing/createTiming.ts

@@ -1,62 +0,0 @@
-import type {
-  TimingConfig,
-  RequiredAnimationParams,
-  AnimationCallback,
-} from "../types";
-import type { AnimationState, SkiaMutableValue } from "../../values/types";
-import { ValueApi } from "../../values/api";
-
-import { timing } from "./functions";
-
-/**
- * Creates an animation that is driven by a clock 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. If loop is set to true, the animation will continue
- * to run until stopped.
- *
- * @param params Animation parameters
- * @param config Spring or timing configuration
- * @param value Optional value that the animation will update
- * @params an animation value that can be used to start/stop
- * the animation.
- */
-export const createTiming = (
-  params: RequiredAnimationParams & Required<TimingConfig>,
-  value?: SkiaMutableValue<number>,
-  callback?: AnimationCallback
-) => {
-  // Update from to be either the declared from value,
-  // the current value of the value or zero
-  const resolvedParams = {
-    ...params,
-    from: params.from ?? value?.current ?? 0,
-  };
-
-  // Update function for the animation value
-  const animationFunction = (t: number, state: AnimationState | undefined) => {
-    // Update the input value using the provided update function
-    const nextState = timing(
-      t,
-      params.duration,
-      params.easing,
-      params.loop ?? false,
-      params.yoyo ?? false,
-      state ?? { current: params.from!, finished: false }
-    );
-    const current =
-      nextState.current * (resolvedParams.to - resolvedParams.from!) +
-      resolvedParams.from!;
-    if (callback && nextState.finished === true) {
-      callback(current);
-    }
-    return {
-      ...nextState,
-      current,
-    };
-  };
-
-  // Create animation value
-  return ValueApi.createAnimation(animationFunction);
-};