fix(📚): document incompatibility with interpolateColor from Reanimated (

#2331)

docs/docs/animations/reanimated3.md

@@ -45,3 +45,72 @@ export const HelloWorld = () => {
 ```
 
 We offer some [Skia specific animation hooks](/docs/animations/hooks), especially for paths.
+
+## Colors
+
+For colors, React Native Skia uses a different storage format for than Reanimated.
+This means that [`interpolateColor`](https://docs.swmansion.com/react-native-reanimated/docs/utilities/interpolateColor/) from Reanimated won't work out of the box.
+Instead you can use `interpolateColors` from React Native Skia.
+
+```tsx twoslash
+import {
+  Canvas,
+  LinearGradient,
+  Fill,
+  // Use this function instead of interpolateColor from Reanimated
+  interpolateColors,
+  vec,
+} from "@shopify/react-native-skia";
+import { useEffect } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+const startColors = [
+  "rgba(34, 193, 195, 0.4)",
+  "rgba(34,193,195,0.4)",
+  "rgba(63,94,251,1)",
+  "rgba(253,29,29,0.4)",
+];
+const endColors = [
+  "rgba(0,212,255,0.4)",
+  "rgba(253,187,45,0.4)",
+  "rgba(252,70,107,1)",
+  "rgba(252,176,69,0.4)",
+];
+
+export const AnimatedGradient = () => {
+  const { width, height } = useWindowDimensions();
+  const colorsIndex = useSharedValue(0);
+  useEffect(() => {
+    colorsIndex.value = withRepeat(
+      withTiming(startColors.length - 1, {
+        duration: 4000,
+      }),
+      -1,
+      true
+    );
+  }, []);
+  const gradientColors = useDerivedValue(() => {
+    return [
+      interpolateColors(colorsIndex.value, [0, 1, 2, 3], startColors),
+      interpolateColors(colorsIndex.value, [0, 1, 2, 3], endColors),
+    ];
+  });
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Fill>
+        <LinearGradient
+          start={vec(0, 0)}
+          end={vec(width, height)}
+          colors={gradientColors}
+        />
+      </Fill>
+    </Canvas>
+  );
+};
+```