fix(🐎): remove reanimated 2 support (#2864)

This would be a breaking change but we realized that the reanimated 2 support was actually not working in recent versions

apps/docs/docs/animations/reanimated3.md

@@ -5,8 +5,7 @@ sidebar_label: Animations
 slug: /animations/animations
 ---
 
-React Native Skia offers integration with [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/), enabling the execution of animations on the UI thread.
-This integration is available starting from Reanimated v3. If you are using Reanimated v2, refer to the [Reanimated 2 support section](/docs/animations/reanimated2).
+React Native Skia offers integration with [Reanimated v3 and above](https://docs.swmansion.com/react-native-reanimated/), enabling the execution of animations on the UI thread.
 
 React Native Skia supports the direct usage of Reanimated's shared and derived values as properties. There is no need for functions like `createAnimatedComponent` or `useAnimatedProps`; simply pass the Reanimated values directly as properties.
 

apps/docs/sidebars.js

@@ -140,7 +140,6 @@ const sidebars = {
         "animations/gestures",
         "animations/hooks",
         "animations/textures",
-        "animations/reanimated2",
       ],
     },
     {

packages/skia/src/external/reanimated/index.ts

@@ -1,5 +1,4 @@
 export * from "./useAnimatedImageValue";
-export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";

packages/skia/src/external/reanimated/renderHelpers.ts

@@ -6,7 +6,6 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-export let HAS_REANIMATED = false;
 export let HAS_REANIMATED_3 = false;
 try {
   // This logic is convoluted but necessary
@@ -16,21 +15,20 @@ try {
   const reanimatedVersion =
     require("react-native-reanimated/package.json").version;
   require("react-native-reanimated");
-  HAS_REANIMATED = !!reanimatedVersion;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
   ) {
     HAS_REANIMATED_3 = true;
   }
 } catch (e) {
-  HAS_REANIMATED = false;
+  // do nothing
 }
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
 export const unbindReanimatedNode = (node: Node<unknown>) => {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const previousMapperId = _bindings.get(node);
@@ -40,7 +38,7 @@ export const unbindReanimatedNode = (node: Node<unknown>) => {
 };
 
 export function extractReanimatedProps(props: AnimatedProps<any>) {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return [props, {}];
   }
   const reanimatedProps = {} as AnimatedProps<any>;
@@ -60,50 +58,12 @@ export function extractReanimatedProps(props: AnimatedProps<any>) {
   return [otherProps, reanimatedProps];
 }
 
-function bindReanimatedProps2(
-  container: Container,
-  node: Node<any>,
-  reanimatedProps: AnimatedProps<any>
-) {
-  const sharedValues = Object.values(reanimatedProps);
-  const previousMapperId = _bindings.get(node);
-  if (previousMapperId !== undefined) {
-    Rea.stopMapper(previousMapperId as number);
-  }
-  if (sharedValues.length > 0) {
-    const viewId = container.getNativeId();
-    const { SkiaViewApi } = global;
-    const updateProps = () => {
-      for (const propName in reanimatedProps) {
-        node && node.setProp(propName, reanimatedProps[propName].value);
-      }
-      // On React Native we use the SkiaViewApi to redraw because it can
-      // run on the worklet thread (container.redraw can't)
-      // if SkiaViewApi is undefined, we are on web and container.redraw()
-      // can safely be invoked
-      if (SkiaViewApi) {
-        SkiaViewApi.requestRedraw(viewId);
-      } else {
-        container.redraw();
-      }
-    };
-    const mapperId = Rea.startMapper(() => {
-      "worklet";
-      Rea.runOnJS(updateProps)();
-    }, sharedValues);
-    _bindings.set(node, mapperId);
-  }
-}
-
 export function bindReanimatedProps(
   container: Container,
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
-  if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-    return bindReanimatedProps2(container, node, reanimatedProps);
-  }
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const sharedValues = Object.values(reanimatedProps);

packages/skia/src/sksg/Container.ts

@@ -2,10 +2,6 @@ import { type SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
-import {
-  HAS_REANIMATED,
-  HAS_REANIMATED_3,
-} from "../external/reanimated/renderHelpers";
 
 import { createDrawingContext } from "./DrawingContext";
 import type { Node } from "./nodes";
@@ -40,9 +36,6 @@ export class Container {
 
   set root(root: Node[]) {
     const isOnscreen = this.nativeId !== -1;
-    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-      throw new Error("React Native Skia only supports Reanimated 3 and above");
-    }
     if (isOnscreen) {
       if (this.mapperId !== null) {
         Rea.stopMapper(this.mapperId);
@@ -62,9 +55,6 @@ export class Container {
 
   redraw() {
     const isOnscreen = this.nativeId !== -1;
-    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-      throw new Error("React Native Skia only supports Reanimated 3 and above");
-    }
     if (isOnscreen) {
       const { nativeId, Skia, root } = this;
       Rea.runOnUI(() => {