motion-on-native 1.2.5 → 1.2.7

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;
@@ -246,18 +250,23 @@ function createMotionComponent(Component) {
                 default: return null;
             }
         };
+        // Memoize animate prop to prevent unnecessary re-animations
+        const animateString = JSON.stringify(animate);
+        const memoizedAnimate = (0, react_1.useMemo)(() => animate, [animateString]);
+        // Set initial values on mount
+        (0, react_1.useEffect)(() => {
+            if (initial !== false) {
+                Object.entries(initial).forEach(([key, value]) => {
+                    const sharedValue = getSharedValue(key);
+                    if (sharedValue && value !== undefined) {
+                        sharedValue.value = value;
+                    }
+                });
+            }
+        }, []);
         // Mount animation: initial -> animate
         (0, react_1.useEffect)(() => {
             if (!hasAnimated && !isExitingRef.current) {
-                // Set initial values immediately
-                if (initial !== false) {
-                    Object.entries(initial).forEach(([key, value]) => {
-                        const sharedValue = getSharedValue(key);
-                        if (sharedValue && value !== undefined) {
-                            sharedValue.value = value;
-                        }
-                    });
-                }
                 // Animate to target values
                 const timer = setTimeout(() => {
                     if (!isExitingRef.current) {
@@ -268,9 +277,7 @@ function createMotionComponent(Component) {
                 return () => clearTimeout(timer);
             }
             return undefined;
-        }, []);
-        // Memoize animate prop to prevent unnecessary re-animations
-        const memoizedAnimate = (0, react_1.useMemo)(() => animate, [JSON.stringify(animate)]);
+        }, [memoizedAnimate]);
         // Handle animate prop changes (only animate if values actually changed)
         const prevAnimateRef = (0, react_1.useRef)(memoizedAnimate);
         (0, react_1.useEffect)(() => {
@@ -310,22 +317,24 @@ function createMotionComponent(Component) {
                 isExitingRef.current = false;
                 setIsPresent(true);
                 setHasAnimated(false);
-                // Reset to initial values
-                if (initial !== false) {
-                    Object.entries(initial).forEach(([key, value]) => {
-                        const sharedValue = getSharedValue(key);
-                        if (sharedValue && value !== undefined) {
-                            sharedValue.value = value;
-                        }
-                    });
-                }
-                // Animate to target after a frame
+                // Reset to initial values and animate
                 setTimeout(() => {
-                    if (!isExitingRef.current) {
-                        animateToValues(memoizedAnimate);
-                        setHasAnimated(true);
+                    if (initial !== false) {
+                        Object.entries(initial).forEach(([key, value]) => {
+                            const sharedValue = getSharedValue(key);
+                            if (sharedValue && value !== undefined) {
+                                sharedValue.value = value;
+                            }
+                        });
                     }
-                }, 16);
+                    // Animate to target after a frame
+                    setTimeout(() => {
+                        if (!isExitingRef.current) {
+                            animateToValues(memoizedAnimate);
+                            setHasAnimated(true);
+                        }
+                    }, 16);
+                }, 0);
             }
         }, [shouldExit]);
         // Animated style
@@ -340,6 +349,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 +494,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.5",
+  "version": "1.2.7",
   "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",