chore: refactor ArtworkSaveIconWrapper (#12846)

* chore: refactor ArtworkSaveIconWrapper

* chore: decrease mass

Author: MounirDhahri

src/app/Components/ArtworkGrids/ArtworkSaveIconWrapper.tsx

@@ -1,51 +1,54 @@
 import { HeartFillIcon, HeartStrokeIcon } from "@artsy/icons/native"
 import { HEART_ICON_SIZE } from "app/Components/constants"
 import { useEffect, useRef } from "react"
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withSpring,
-  withTiming,
-} from "react-native-reanimated"
+import { Animated, useAnimatedValue } from "react-native"
 
 export const ArtworkSaveIconWrapper: React.FC<{
   isSaved: boolean
   testID?: string
   accessibilityLabel?: string
   fill?: string
 }> = ({ isSaved, testID, accessibilityLabel, fill }) => {
-  const scaleAnimation = useSharedValue(1)
+  const scaleAnimation = useAnimatedValue(1)
   const didMount = useRef(false)
 
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{ scale: scaleAnimation.value }],
-  }))
-
   useEffect(() => {
     if (!didMount.current) {
       didMount.current = true
       return
     }
 
     if (isSaved) {
-      scaleAnimation.value = withSequence(
-        withSpring(isSaved ? 0.7 : 1, {
-          mass: 1,
+      Animated.sequence([
+        Animated.spring(scaleAnimation, {
+          toValue: 0.7,
+          mass: 0.01,
           stiffness: 300,
-          damping: 20,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnimation, {
+          toValue: 1.1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnimation, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
         }),
-        withTiming(1.1, { duration: 300 }),
-        withTiming(1, { duration: 200 })
-      )
+      ]).start()
     } else {
       // We don't want to animation the dislike
-      scaleAnimation.value = 1
+      scaleAnimation.setValue(1)
     }
   }, [isSaved, scaleAnimation])
 
   return (
-    <Animated.View style={animatedStyles} testID={testID} accessibilityLabel={accessibilityLabel}>
+    <Animated.View
+      style={{ transform: [{ scale: scaleAnimation }] }}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
       {!!isSaved ? (
         <HeartFillIcon
           height={HEART_ICON_SIZE}