Merge pull request #1473 from Shopify/reanimated2

Refine useSharedValueEffect deprecation and documentation

docs/docs/animations/animations.md

@@ -5,6 +5,13 @@ sidebar_label: Animations
 slug: /animations/animations
 ---
 
+:::info
+
+Currently, built-in Skia animations are dependant on the JS thread.
+For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated).
+
+:::
+
 To ease building animation, the library provides some utilities to help you. There are two types of utility functions - imperative functions and hooks.
 
 If you have a Skia Value that you want to animate declaratively, a hook is the best choice.

docs/docs/animations/gestures.md

@@ -5,6 +5,14 @@ sidebar_label: Touch Events
 slug: /animations/touch-events
 ---
 
+
+:::info
+
+Currently, built-in Skia animations are dependant on the JS thread.
+For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated).
+
+:::
+
 ### useTouchHandler
 
 The `useTouchHandler` hook handles touches in the `Canvas`.

docs/docs/animations/reanimated.md

@@ -5,10 +5,10 @@ sidebar_label: Reanimated
 slug: /animations/reanimated
 ---
 
-React Native Skia renders drawings on the UI-thread and it provides an integration with Reanimated that allows for animations
-to be executed on the UI-thread as well.
+React Native Skia provides an integration with Reanimated that allows for animations
+to be executed on the UI-thread. 
 
-First, you need will need to install [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
+This integration is available with [Reanimated v3 or higher](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation). If you are using Reanimated 2, [see Reanimated 2 support](#reanimated-2).
 
 ## Hello World
 
@@ -89,4 +89,50 @@ export const AnimationWithTouchHandler = () => {
     </GestureDetector>
   );
 };
+```
+
+## Reanimated 2
+
+If you are using Reanimated 2, we offer a hook named `useSharedValueEffect` where you can update Skia values when Reanimated values are updated.
+
+:::info
+
+useSharedValueEffect() runs on the JS thread. We suggest using Reanimated 3 if possible, [see Reanimated 3 support](/docs/animations/reanimated).
+
+:::
+
+
+### Example
+
+In the example below we are running a Reanimated animation on the shared value named progress - and then we have callback invoked on any shared value change thanks to the useSharedValueEffect hook:
+
+```tsx twoslash
+import {useEffect} from "react";
+import {Canvas, Rect, mix, useSharedValueEffect, useValue} from "@shopify/react-native-skia";
+import {useSharedValue, withRepeat, withTiming} from "react-native-reanimated";
+
+const MyComponent = () => {
+  const x = useValue(0);
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
+  }, [progress]);
+
+  useSharedValueEffect(() => {
+    x.current = mix(progress.value, 0, 100);
+  }, progress); // you can pass other shared values as extra parameters
+
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Rect
+        x={x}
+        y={100}
+        width={10}
+        height={10}
+        color="red"
+      />
+    </Canvas>
+  );
+};
 ```

docs/docs/animations/values.md

@@ -8,6 +8,7 @@ slug: /animations/values
 :::info
 
 Currently, built-in Skia animations are dependant on the JS thread.
+For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated).
 
 :::
 

package/src/external/reanimated/useSharedValueEffect.ts

@@ -8,6 +8,7 @@ import {
   runOnJS,
   startMapper,
   stopMapper,
+  HAS_REANIMATED3,
 } from "./moduleWrapper";
 
 /**
@@ -21,10 +22,12 @@ export const useSharedValueEffect = <T = number>(
   value: SharedValueType<T>,
   ...values: SharedValueType<T>[]
 ) => {
-  console.warn(
-    `useSharedValueEffect() is now deprecated, you can use Reanimated values directly.
-Learn more at https://shopify.github.io/react-native-skia/.`
-  );
+  if (HAS_REANIMATED3) {
+    console.warn(
+      `useSharedValueEffect() is deprecated with Reanimated 3, you can use Reanimated values directly.
+Learn more at https://shopify.github.io/react-native-skia/docs/animations/reanimated.`
+    );
+  }
   const input = useSharedValue(0);
 
   useEffect(() => {