@idealyst/animate 1.2.59 → 1.2.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/animate",
-  "version": "1.2.59",
+  "version": "1.2.61",
   "description": "Cross-platform animation hooks for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -30,7 +30,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.59",
+    "@idealyst/theme": "^1.2.61",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-reanimated": ">=3.0.0",
@@ -48,7 +48,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.59",
+    "@idealyst/theme": "^1.2.61",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",

package/src/useAnimatedStyle.native.ts

@@ -133,9 +133,8 @@ export function useAnimatedStyle(
     return result;
   }, [normalizedTransform]);
 
-  // Animate function
-  const animate = (sharedValue: any, targetValue: any, isString = false) => {
-    'worklet';
+  // Create animation wrapper - called from JS thread, returns animation modifier
+  const animate = (targetValue: any, isString = false) => {
     if (useSpring && !isString) {
       const config = springConfig(springType as any);
       return finalDelay > 0
@@ -157,54 +156,54 @@ export function useAnimatedStyle(
   useEffect(() => {
     // Visual properties
     if (style.opacity !== undefined) {
-      opacity.value = animate(opacity, style.opacity);
+      opacity.value = animate(style.opacity);
     }
     if (style.backgroundColor !== undefined) {
-      backgroundColor.value = animate(backgroundColor, style.backgroundColor, true);
+      backgroundColor.value = animate(style.backgroundColor, true);
     }
     if (style.borderColor !== undefined) {
-      borderColor.value = animate(borderColor, style.borderColor, true);
+      borderColor.value = animate(style.borderColor, true);
     }
     if (style.borderWidth !== undefined) {
-      borderWidth.value = animate(borderWidth, style.borderWidth);
+      borderWidth.value = animate(style.borderWidth);
     }
     if (style.borderRadius !== undefined) {
-      borderRadius.value = animate(borderRadius, style.borderRadius);
+      borderRadius.value = animate(style.borderRadius);
     }
 
     // Layout properties
     if (style.top !== undefined) {
-      top.value = animate(top, style.top);
+      top.value = animate(style.top);
     }
     if (style.right !== undefined) {
-      right.value = animate(right, style.right);
+      right.value = animate(style.right);
     }
     if (style.bottom !== undefined) {
-      bottom.value = animate(bottom, style.bottom);
+      bottom.value = animate(style.bottom);
     }
     if (style.left !== undefined) {
-      left.value = animate(left, style.left);
+      left.value = animate(style.left);
     }
     if (style.width !== undefined) {
-      width.value = animate(width, style.width);
+      width.value = animate(style.width);
     }
     if (style.height !== undefined) {
-      height.value = animate(height, style.height);
+      height.value = animate(style.height);
     }
 
     // Update transform values
-    translateX.value = animate(translateX, transforms.translateX);
-    translateY.value = animate(translateY, transforms.translateY);
-    scale.value = animate(scale, transforms.scale);
-    scaleX.value = animate(scaleX, transforms.scaleX);
-    scaleY.value = animate(scaleY, transforms.scaleY);
-    rotate.value = animate(rotate, transforms.rotate, true);
-    rotateX.value = animate(rotateX, transforms.rotateX, true);
-    rotateY.value = animate(rotateY, transforms.rotateY, true);
-    rotateZ.value = animate(rotateZ, transforms.rotateZ, true);
-    skewX.value = animate(skewX, transforms.skewX, true);
-    skewY.value = animate(skewY, transforms.skewY, true);
-    perspective.value = animate(perspective, transforms.perspective);
+    translateX.value = animate(transforms.translateX);
+    translateY.value = animate(transforms.translateY);
+    scale.value = animate(transforms.scale);
+    scaleX.value = animate(transforms.scaleX);
+    scaleY.value = animate(transforms.scaleY);
+    rotate.value = animate(transforms.rotate, true);
+    rotateX.value = animate(transforms.rotateX, true);
+    rotateY.value = animate(transforms.rotateY, true);
+    rotateZ.value = animate(transforms.rotateZ, true);
+    skewX.value = animate(transforms.skewX, true);
+    skewY.value = animate(transforms.skewY, true);
+    perspective.value = animate(transforms.perspective);
   }, [
     style.opacity,
     style.backgroundColor,
@@ -222,6 +221,7 @@ export function useAnimatedStyle(
 
   // Create animated style - only include properties that were specified
   const animatedStyle = useReanimatedStyle(() => {
+    'worklet';
     const result: Record<string, any> = {
       opacity: opacity.value,
       backgroundColor: backgroundColor.value,