Merge pull request #62285 from callstack-internal/fix/optimize-useAnimatedHighlightStyle

Optimize useAnimatedHighlightStyle to reduce unnecessary recalculations

Author: mountiny

src/hooks/useAnimatedHighlightStyle/index.ts

@@ -65,12 +65,19 @@ export default function useAnimatedHighlightStyle({
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
     const theme = useTheme();
 
-    const highlightBackgroundStyle = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(repeatableProgress.get(), [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),
-        height: height ? interpolate(nonRepeatableProgress.get(), [0, 1], [0, height]) : 'auto',
-        opacity: interpolate(nonRepeatableProgress.get(), [0, 1], [0, 1]),
-        borderRadius,
-    }));
+    const highlightBackgroundStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const repeatableValue = repeatableProgress.get();
+        const nonRepeatableValue = nonRepeatableProgress.get();
+
+        return {
+            backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),
+            height: height ? interpolate(nonRepeatableValue, [0, 1], [0, height]) : 'auto',
+            opacity: interpolate(nonRepeatableValue, [0, 1], [0, 1]),
+            borderRadius,
+        };
+    }, [borderRadius, height, backgroundColor, highlightColor, theme.appBG, theme.border]);
 
     React.useEffect(() => {
         if (!shouldHighlight || startHighlight) {