new reanimated api instead of .value

Expensify · Nov 29, 2024 · daf4697 · daf4697
1 parent 9f8a42b
commit daf4697
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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}],