motion-on-native 1.2.4 → 1.2.6

package/lib/index.d.ts

@@ -5,6 +5,8 @@ export interface AnimationProps {
     x?: number;
     y?: number;
     z?: number;
+    translateX?: number;
+    translateY?: number;
     scale?: number;
     scaleX?: number;
     scaleY?: number;

package/lib/index.js

@@ -67,6 +67,8 @@ function createMotionComponent(Component) {
         const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
         const y = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('y', initial));
         const z = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('z', initial));
+        const translateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateX', initial));
+        const translateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateY', initial));
         const scale = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scale', initial));
         const scaleX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleX', initial));
         const scaleY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleY', initial));
@@ -183,6 +185,8 @@ function createMotionComponent(Component) {
                 case 'x': return x;
                 case 'y': return y;
                 case 'z': return z;
+                case 'translateX': return translateX;
+                case 'translateY': return translateY;
                 case 'scale': return scale;
                 case 'scaleX': return scaleX;
                 case 'scaleY': return scaleY;
@@ -261,7 +265,7 @@ function createMotionComponent(Component) {
                 // Animate to target values
                 const timer = setTimeout(() => {
                     if (!isExitingRef.current) {
-                        animateToValues(animate);
+                        animateToValues(memoizedAnimate);
                         setHasAnimated(true);
                     }
                 }, 16);
@@ -269,20 +273,20 @@ function createMotionComponent(Component) {
             }
             return undefined;
         }, []);
+        // Memoize animate prop to prevent unnecessary re-animations
+        const memoizedAnimate = (0, react_1.useMemo)(() => animate, [JSON.stringify(animate)]);
         // Handle animate prop changes (only animate if values actually changed)
-        const prevAnimateRef = (0, react_1.useRef)(animate);
-        const animateStringRef = (0, react_1.useRef)(JSON.stringify(animate));
+        const prevAnimateRef = (0, react_1.useRef)(memoizedAnimate);
         (0, react_1.useEffect)(() => {
             if (hasAnimated && !isExitingRef.current) {
                 // Only animate if animate prop actually changed
-                const currentAnimateString = JSON.stringify(animate);
-                if (animateStringRef.current !== currentAnimateString) {
-                    animateToValues(animate);
-                    prevAnimateRef.current = animate;
-                    animateStringRef.current = currentAnimateString;
+                const hasChanged = JSON.stringify(prevAnimateRef.current) !== JSON.stringify(memoizedAnimate);
+                if (hasChanged) {
+                    animateToValues(memoizedAnimate);
+                    prevAnimateRef.current = memoizedAnimate;
                 }
             }
-        }, [animate]);
+        }, [memoizedAnimate]);
         // Handle shouldExit
         (0, react_1.useEffect)(() => {
             var _a;
@@ -322,7 +326,7 @@ function createMotionComponent(Component) {
                 // Animate to target after a frame
                 setTimeout(() => {
                     if (!isExitingRef.current) {
-                        animateToValues(animate);
+                        animateToValues(memoizedAnimate);
                         setHasAnimated(true);
                     }
                 }, 16);
@@ -340,6 +344,10 @@ function createMotionComponent(Component) {
                 transform.push({ translateY: y.value });
             if (z.value !== 0)
                 transform.push({ translateZ: z.value });
+            if (translateX.value !== 0)
+                transform.push({ translateX: translateX.value });
+            if (translateY.value !== 0)
+                transform.push({ translateY: translateY.value });
             if (scale.value !== 1)
                 transform.push({ scale: scale.value });
             if (scaleX.value !== 1)
@@ -481,6 +489,8 @@ function getDefaultValue(key) {
         case 'x':
         case 'y':
         case 'z':
+        case 'translateX':
+        case 'translateY':
             return 0;
         case 'rotate':
         case 'rotateX':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-on-native",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",