From daf4697f80284989aea97eafb8b8aa151171c8f9 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Fri, 29 Nov 2024 08:02:54 +0100
Subject: [PATCH] new reanimated api instead of .value

---
 src/components/Switch.tsx                     |  6 +--
 src/components/Tooltip/GenericTooltip.tsx     | 38 ++++++++++---------
 .../generators/TooltipStyleUtils/index.ts     |  2 +-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index ae4e2bca01d1..16242fce7fca 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -44,17 +44,17 @@ function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, dis
                 disabledAction?.();
                 return;
             }
-            offsetX.value = withTiming(isOn ? OFFSET_X.OFF : OFFSET_X.ON, {duration: 300});
+            offsetX.set(withTiming(isOn ? OFFSET_X.OFF : OFFSET_X.ON, {duration: 300}));
             onToggle(!isOn);
         });
     };
 
     const animatedThumbStyle = useAnimatedStyle(() => ({
-        transform: [{translateX: offsetX.value}],
+        transform: [{translateX: offsetX.get()}],
     }));
 
     const animatedSwitchTrackStyle = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(offsetX.value, [OFFSET_X.OFF, OFFSET_X.ON], [theme.icon, theme.success]),
+        backgroundColor: interpolateColor(offsetX.get(), [OFFSET_X.OFF, OFFSET_X.ON], [theme.icon, theme.success]),
     }));
 
     return (
diff --git a/src/components/Tooltip/GenericTooltip.tsx b/src/components/Tooltip/GenericTooltip.tsx
index cdebee0b50b2..040d0d1002d9 100644
--- a/src/components/Tooltip/GenericTooltip.tsx
+++ b/src/components/Tooltip/GenericTooltip.tsx
@@ -82,19 +82,21 @@ function GenericTooltip({
 
         // When TooltipSense is active, immediately show the tooltip
         if (TooltipSense.isActive() && !shouldForceAnimate) {
-            animation.value = 1;
+            animation.set(1);
         } else {
-            isTooltipSenseInitiator.value = true;
-            animation.value = withDelay(
-                500,
-                withTiming(
-                    1,
-                    {
-                        duration: 140,
-                    },
-                    (finished) => {
-                        isAnimationCanceled.value = !finished;
-                    },
+            isTooltipSenseInitiator.set(true);
+            animation.set(
+                withDelay(
+                    500,
+                    withTiming(
+                        1,
+                        {
+                            duration: 140,
+                        },
+                        (finished) => {
+                            isAnimationCanceled.set(!finished);
+                        },
+                    ),
                 ),
             );
         }
@@ -105,8 +107,8 @@ function GenericTooltip({
     useEffect(() => {
         // if the tooltip text changed before the initial animation was finished, then the tooltip won't be shown
         // we need to show the tooltip again
-        if (isVisible && isAnimationCanceled.value && text && prevText !== text) {
-            isAnimationCanceled.value = false;
+        if (isVisible && isAnimationCanceled.get() && text && prevText !== text) {
+            isAnimationCanceled.set(false);
             showTooltip();
         }
     }, [isVisible, text, prevText, showTooltip, isAnimationCanceled]);
@@ -130,13 +132,13 @@ function GenericTooltip({
     const hideTooltip = useCallback(() => {
         cancelAnimation(animation);
 
-        if (TooltipSense.isActive() && !isTooltipSenseInitiator.value) {
+        if (TooltipSense.isActive() && !isTooltipSenseInitiator.get()) {
             // eslint-disable-next-line react-compiler/react-compiler
-            animation.value = 0;
+            animation.set(0);
         } else {
             // Hide the first tooltip which initiated the TooltipSense with animation
-            isTooltipSenseInitiator.value = false;
-            animation.value = 0;
+            isTooltipSenseInitiator.set(false);
+            animation.set(0);
         }
         TooltipSense.deactivate();
         setIsVisible(false);
diff --git a/src/styles/utils/generators/TooltipStyleUtils/index.ts b/src/styles/utils/generators/TooltipStyleUtils/index.ts
index efab7fae73f4..950ba241570b 100644
--- a/src/styles/utils/generators/TooltipStyleUtils/index.ts
+++ b/src/styles/utils/generators/TooltipStyleUtils/index.ts
@@ -270,7 +270,7 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
         const isTooltipSizeReady = tooltipWidth !== undefined && props.tooltipWrapperHeight !== undefined;
         let scale = 1;
         if (isTooltipSizeReady) {
-            scale = props.currentSize.value;
+            scale = props.currentSize.get();
         }
         return {
             transform: [{scale}],