Merge pull request #2042 from Shopify/deprecate-skia-values

Deprecates Skia values

Author: wcandillon

package/src/animation/spring/runSpring.ts

@@ -10,6 +10,9 @@ 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

package/src/animation/spring/useSpring.ts

@@ -10,6 +10,9 @@ 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

package/src/animation/timing/runTiming.ts

@@ -8,6 +8,9 @@ import type {
 import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 /**
+ * @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

package/src/animation/timing/useLoop.ts

@@ -3,6 +3,9 @@ import type { TimingConfig } from "../types";
 import { useTiming } from "./useTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * 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

package/src/animation/timing/useTiming.ts

@@ -12,6 +12,9 @@ import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creats an animation value that will run whenever
  * the animation parameters change. The animation start immediately.
  * @param toOrParams

package/src/values/api.ts

@@ -1,8 +1,61 @@
-import type { ISkiaValueApi } from "./types";
+import type {
+  AnimationState,
+  ISkiaValueApi,
+  SkiaAnimation,
+  SkiaClockValue,
+  SkiaMutableValue,
+  SkiaValue,
+} from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
 const { SkiaValueApi } = global;
-export const ValueApi = SkiaValueApi;
+
+const deprecatedWarning = () => {
+  console.warn(
+    `Skia values are deprecated and will be removed in the next Skia release.
+Please use Reanimated instead: https://shopify.github.io/react-native-skia/docs/animations/animations`
+  );
+};
+
+export const ValueApi = {
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createValue<T>(initialValue: T): SkiaMutableValue<T> {
+    deprecatedWarning();
+    return SkiaValueApi.createValue(initialValue);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createComputedValue<R>(
+    cb: () => R,
+    values: SkiaValue<unknown>[]
+  ): SkiaValue<R> {
+    deprecatedWarning();
+    return SkiaValueApi.createComputedValue(cb, values);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createClockValue(): SkiaClockValue {
+    deprecatedWarning();
+    return SkiaValueApi.createClockValue();
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createAnimation<S extends AnimationState = AnimationState>(
+    cb: (t: number, state: S | undefined) => S
+  ): SkiaAnimation {
+    deprecatedWarning();
+    return SkiaValueApi.createAnimation(cb);
+  },
+};

package/src/values/hooks/useClockValue.ts

@@ -3,6 +3,9 @@ import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * @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.

package/src/values/hooks/useComputedValue.ts

@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import { isValue } from "../../renderer/processors/Animations";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new computed value - a value that will calculate its value depending
  * on other values.
  * @param cb Callback to calculate new value

package/src/values/hooks/useValue.ts

@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import type { SkiaMutableValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new value that holds some data.
  * @param v Value to hold
  * @returns A Value of type of v

package/src/values/hooks/useValueEffect.ts

@@ -3,6 +3,9 @@ import { useEffect } from "react";
 import type { SkiaValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * 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