motion-on-native 1.2.6 → 1.2.7

package/lib/index.js

@@ -250,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) {
@@ -272,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)(() => {
@@ -314,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-on-native",
-  "version": "1.2.6",
+  "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",