Update documentation

Author: wcandillon

docs/docs/animations/hooks.md

@@ -5,6 +5,77 @@ sidebar_label: Hooks
 slug: /animations/hooks
 ---
 
+## usePathInterpolation
+
+This hook interpolates between different path values based on a progress value, providing smooth transitions between the provided paths.
+
+Paths need to be interpolatable, meaning they must contain the same number and types of commands. If the paths have different commands or different numbers of commands, the interpolation may not behave as expected. Ensure that all paths in the `outputRange` array are structured similarly for proper interpolation.
+
+```tsx twoslash
+import React, { useEffect } from 'react';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { Skia, usePathInterpolation, Canvas, Path } from '@shopify/react-native-skia';
+
+const angryPath = Skia.Path.MakeFromSVGString("M 16 25 C 32 27 43 28 49 28 C 54 28 62 28 73 26 C 66 54 60 70 55 74 C 51 77 40 75 27 55 C 25 50 21 40 27 55 L 16 25 Z")!;
+const normalPath = Skia.Path.MakeFromSVGString("M 21 31 C 31 32 39 32 43 33 C 67 35 80 36 81 38 C 84 42 74 57 66 60 C 62 61 46 59 32 50 C 24 44 20 37 21 31 Z")!;
+const goodPath = Skia.Path.MakeFromSVGString("M 21 45 C 21 37 24 29 29 25 C 34 20 38 18 45 18 C 58 18 69 30 69 45 C 69 60 58 72 45 72 C 32 72 21 60 21 45 Z")!;
+
+const Demo = () => {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    progress.value = withTiming(1, { duration: 1000 });
+  }, []);
+
+  const path = usePathInterpolation(progress, [0, 0.5, 1], [angryPath, normalPath, goodPath]);
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Path path={path} style="stroke" strokeWidth={5} strokeCap="round" strokeJoin="round" />
+    </Canvas>
+  );
+};
+```
+
+## usePathValue
+
+This hooks offers an easy way to animate paths.
+Behind the scene, it make sure that everything is done as efficiently as possible.
+
+```tsx twoslash
+import {useSharedValue, withSpring} from "react-native-reanimated";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
+import {usePathValue, Canvas, Path, processTransform3d, Skia} from "@shopify/react-native-skia";
+
+const rrct = Skia.RRectXY(Skia.XYWHRect(0, 0, 100, 100), 10, 10);
+
+export const FrostedCard = () => {
+  const rotateY = useSharedValue(0);
+
+  const gesture = Gesture.Pan().onChange((event) => {
+    rotateY.value -= event.changeX / 300;
+  });
+
+  const clip = usePathValue((path) => {
+    "worklet";
+    path.addRRect(rrct);
+    path.transform(
+      processTransform3d([
+        { translate: [50, 50] },
+        { perspective: 300 },
+        { rotateY: rotateY.value },
+        { translate: [-50, -50] },
+      ])
+    );
+  });
+  return (
+    <GestureDetector gesture={gesture}>
+      <Canvas style={{ flex: 1 }}>
+        <Path path={clip} />
+      </Canvas>
+    </GestureDetector>
+  );
+};
+```
+
 ## useClock
 
 This hook returns a number indicating the time in milliseconds since the hook was activated.
@@ -32,31 +103,20 @@ export default function App() {
 }
 ```
 
-## usePathInterpolation
-
-This hook interpolates between different path values based on a progress value, providing smooth transitions between the provided paths.
+## Canvas Size
 
-Paths need to be interpolatable, meaning they must contain the same number and types of commands. If the paths have different commands or different numbers of commands, the interpolation may not behave as expected. Ensure that all paths in the `outputRange` array are structured similarly for proper interpolation.
+The Canvas element has an `onSize` property that can receive a shared value, which will be updated whenever the canvas size changes.
 
 ```tsx twoslash
-import React, { useEffect } from 'react';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
-import { Skia, usePathInterpolation, Canvas, Path } from '@shopify/react-native-skia';
-
-const angryPath = Skia.Path.MakeFromSVGString("M 16 25 C 32 27 43 28 49 28 C 54 28 62 28 73 26 C 66 54 60 70 55 74 C 51 77 40 75 27 55 C 25 50 21 40 27 55 L 16 25 Z")!;
-const normalPath = Skia.Path.MakeFromSVGString("M 21 31 C 31 32 39 32 43 33 C 67 35 80 36 81 38 C 84 42 74 57 66 60 C 62 61 46 59 32 50 C 24 44 20 37 21 31 Z")!;
-const goodPath = Skia.Path.MakeFromSVGString("M 21 45 C 21 37 24 29 29 25 C 34 20 38 18 45 18 C 58 18 69 30 69 45 C 69 60 58 72 45 72 C 32 72 21 60 21 45 Z")!;
+import {useSharedValue} from "react-native-reanimated";
+import {Fill, Canvas} from "@shopify/react-native-skia";
 
 const Demo = () => {
-  const progress = useSharedValue(0);
-  useEffect(() => {
-    progress.value = withTiming(1, { duration: 1000 });
-  }, []);
-
-  const path = usePathInterpolation(progress, [0, 0.5, 1], [angryPath, normalPath, goodPath]);
+  // size will be updated as the canvas size changes
+  const size = useSharedValue({ width: 0, height: 0 });
   return (
-    <Canvas style={{ flex: 1 }}>
-      <Path path={path} style="stroke" strokeWidth={5} strokeCap="round" strokeJoin="round" />
+    <Canvas style={{ flex: 1 }} onSize={size}>
+      <Fill color="white" />
     </Canvas>
   );
 };

docs/docs/animations/reanimated3.md

@@ -45,60 +45,4 @@ export const HelloWorld = () => {
 };
 ```
 
-## Performance
-
-When animating with React Native Skia, we recommend avoiding new JSI allocations on each frame. Instead of creating a new value on each frame to notify Reanimated that the value has changed, directly mutate the value and notify Reanimated. Below are examples illustrating this pattern:
-
-```tsx twoslash
-import {Gesture} from "react-native-gesture-handler";
-import {useSharedValue} from "react-native-reanimated";
-import {Skia, notifyChange} from "@shopify/react-native-skia";
-
-const matrix = useSharedValue(Skia.Matrix());
-const path = useSharedValue(Skia.Path.Make().moveTo(0, 0));
-
-const pan = Gesture.Pan().onChange((e) => {
-  // ❌ Avoid creating a new path on every frame
-  const newPath = path.value.copy();
-  path.value = newPath.lineTo(e.changeX, e.changeY);
-});
-
-const pan2 = Gesture.Pan().onChange((e) => {
-  // ✅ Instead, mutate the value directly and notify Reanimated
-  path.value.lineTo(e.changeX, e.changeY);
-  notifyChange(path);
-});
-
-const pinch = Gesture.Pinch().onChange((e) => {
-  // ❌ Avoid creating a new matrix on every frame
-  const newMatrix = Skia.Matrix(matrix.value.get());
-  matrix.value = newMatrix.scale(e.scale);
-});
-
-const pinch2 = Gesture.Pinch().onChange((e) => {
-  // ✅ Mutate the value and notify Reanimated
-  matrix.value.scale(e.scale);
-  notifyChange(matrix);
-});
-```
-
-`path.interpolate` now has an extra parameter to interpolate paths without allocating new paths. We provide a [usePathInterpolation](/docs/animations/hooks#usepathinterpolation) hook that will do all the heavy lifting for you.
-
-## Canvas Size
-
-The Canvas element has an `onSize` property that can receive a shared value, which will be updated whenever the canvas size changes.
-
-```tsx twoslash
-import {useSharedValue} from "react-native-reanimated";
-import {Fill, Canvas} from "@shopify/react-native-skia";
-
-const Demo = () => {
-  // size will be updated as the canvas size changes
-  const size = useSharedValue({ width: 0, height: 0 });
-  return (
-    <Canvas style={{ flex: 1 }} onSize={size}>
-      <Fill color="white" />
-    </Canvas>
-  );
-};
-```
+We offer some [Skia specific animation hooks](/docs/animations/hooks), especially for paths.

example/src/Examples/FrostedCard/FrostedCard.tsx

@@ -55,6 +55,7 @@ export const FrostedCard = () => {
     });
 
   const clip = usePathValue((path) => {
+    "worklet";
     path.addRRect(rrct);
     path.transform(
       processTransform3d([
@@ -66,7 +67,6 @@ export const FrostedCard = () => {
       ])
     );
   });
-
   return (
     <View style={{ flex: 1 }}>
       <GestureDetector gesture={gesture}>

package/src/external/reanimated/interpolators.ts

@@ -3,7 +3,7 @@ import type {
   FrameInfo,
   SharedValue,
 } from "react-native-reanimated";
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
@@ -37,10 +37,10 @@ export const usePathValue = (cb: (path: SkPath) => void) => {
 
 export const useClock = () => {
   const clock = useSharedValue(0);
-  const callback = useRef((info: FrameInfo) => {
+  const callback = useCallback((info: FrameInfo) => {
     "worklet";
     clock.value = info.timeSinceFirstFrame;
-  }).current;
+  }, []);
   useFrameCallback(callback);
   return clock;
 };