From 0732041a91f034889523b5aa64b0e4a069dad4ef Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
Date: Wed, 2 Oct 2024 17:03:36 +0200
Subject: [PATCH] test: add example/test case

---
 apps/test-examples/index.tsx        |   1 +
 apps/test-examples/src/Test2471.tsx | 108 ++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 apps/test-examples/src/Test2471.tsx

diff --git a/apps/test-examples/index.tsx b/apps/test-examples/index.tsx
index 05d853456..06527e5e7 100644
--- a/apps/test-examples/index.tsx
+++ b/apps/test-examples/index.tsx
@@ -33,6 +33,7 @@ import Test2403 from './src/Test2403';
 import Test2407 from './src/Test2407';
 import Test2417 from './src/Test2417';
 import Test2455 from './src/Test2455';
+import Test2471 from './src/Test2471';
 
 export default function App() {
   return <ColorTest />;
diff --git a/apps/test-examples/src/Test2471.tsx b/apps/test-examples/src/Test2471.tsx
new file mode 100644
index 000000000..ab5b5f154
--- /dev/null
+++ b/apps/test-examples/src/Test2471.tsx
@@ -0,0 +1,108 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+import Reanimated, {
+  interpolateColor,
+  useAnimatedProps,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import {Circle, Path, Svg} from 'react-native-svg';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedTest = (): JSX.Element => {
+  const animColor = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animColor, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animColor, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, []);
+  return (
+    <Svg width="100" height="100" viewBox="-4 -4 32 32" fill="none">
+      <AnimatedPath
+        d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z"
+        strokeWidth="4"
+        fill={animColor.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['red', 'green'],
+        })}
+        stroke={animColor.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['blue', 'yellow'],
+        })}
+      />
+      <AnimatedCircle
+        cx="20"
+        cy="20"
+        r="6"
+        fill={animColor.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['blue', 'red'],
+        })}
+        color={animColor.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['pink', 'black'],
+        })}
+        stroke="currentColor"
+      />
+    </Svg>
+  );
+};
+
+const ReanimatedPath = Reanimated.createAnimatedComponent(Path);
+const ReanimatedCircle = Reanimated.createAnimatedComponent(Circle);
+const ReanimatedTest = (): JSX.Element => {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, {duration: 1000}), -1, true);
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    fill: interpolateColor(progress.value, [0, 1], ['red', 'green']),
+    stroke: interpolateColor(progress.value, [0, 1], ['blue', 'yellow']),
+  }));
+  const animatedProps2 = useAnimatedProps(() => ({
+    fill: interpolateColor(progress.value, [0, 1], ['blue', 'red']),
+    color: interpolateColor(progress.value, [0, 1], ['pink', 'black']),
+  }));
+
+  return (
+    <Svg width="100" height="100" viewBox="-4 -4 32 32" fill="none">
+      <ReanimatedPath
+        d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z"
+        strokeWidth="4"
+        animatedProps={animatedProps}
+      />
+      <ReanimatedCircle
+        cx="20"
+        cy="20"
+        r="6"
+        animatedProps={animatedProps2}
+        stroke="currentColor"
+      />
+    </Svg>
+  );
+};
+
+export default () => {
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Text>Animated test</Text>
+      <AnimatedTest />
+      <Text>Reanimated test</Text>
+      <ReanimatedTest />
+    </View>
+  );
+};