From 77fef701a0d7c54abbf4aa4d1320d2d4e6d177e7 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 3 Apr 2024 15:53:29 +0200
Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=93=9A):=20document=20incompatibility?=
 =?UTF-8?q?=20with=20interpolateColor=20from=20Reanimated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/animations/reanimated3.md | 69 +++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/docs/docs/animations/reanimated3.md b/docs/docs/animations/reanimated3.md
index d5e6e7726b..390b337359 100644
--- a/docs/docs/animations/reanimated3.md
+++ b/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>
+  );
+};
+```
\ No newline at end of file