motion-on-native 1.1.2 → 1.1.4

package/lib/index.d.ts

@@ -68,6 +68,8 @@ export interface TransitionProps {
     mass?: number;
     delay?: number;
     ease?: string;
+    repeat?: number | 'infinity';
+    repeatType?: 'loop' | 'reverse';
 }
 export interface MotionComponentProps {
     initial?: AnimationProps | false;

package/lib/index.js

@@ -53,6 +53,8 @@ const DEFAULT_TRANSITION = {
     damping: 15,
     stiffness: 100,
     duration: 300,
+    repeat: 0,
+    repeatType: 'loop',
 };
 function createMotionComponent(Component) {
     return function MotionComponent(props) {
@@ -128,26 +130,50 @@ function createMotionComponent(Component) {
         // Animation helper
         const animateToValues = (targetValues, transitionConfig = transition) => {
             Object.entries(targetValues).forEach(([key, value]) => {
-                var _a, _b, _c, _d;
+                var _a;
                 if (value !== undefined) {
                     const sharedValue = getSharedValue(key);
                     if (sharedValue) {
-                        const config = transitionConfig.type === 'spring'
-                            ? (0, react_native_reanimated_1.withSpring)(value, {
-                                damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
-                                stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
-                                mass: (_c = transitionConfig.mass) !== null && _c !== void 0 ? _c : 1,
-                            })
-                            : (0, react_native_reanimated_1.withTiming)(value, {
-                                duration: (_d = transitionConfig.duration) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.duration,
-                            });
+                        const animateWithRepeat = (currentValue, targetValue, repeatCount) => {
+                            var _a, _b, _c, _d, _e;
+                            const config = transitionConfig.type === 'spring'
+                                ? (0, react_native_reanimated_1.withSpring)(targetValue, {
+                                    damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
+                                    stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
+                                    mass: (_c = transitionConfig.mass) !== null && _c !== void 0 ? _c : 1,
+                                })
+                                : (0, react_native_reanimated_1.withTiming)(targetValue, {
+                                    duration: (_d = transitionConfig.duration) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.duration,
+                                });
+                            sharedValue.value = config;
+                            // Handle repeat
+                            if (transitionConfig.repeat && repeatCount > 0) {
+                                const duration = (_e = transitionConfig.duration) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.duration;
+                                setTimeout(() => {
+                                    const nextTarget = transitionConfig.repeatType === 'reverse'
+                                        ? (sharedValue.value === targetValue ? currentValue : targetValue)
+                                        : targetValue;
+                                    const nextCurrent = transitionConfig.repeatType === 'reverse'
+                                        ? (sharedValue.value === targetValue ? targetValue : currentValue)
+                                        : currentValue;
+                                    if (transitionConfig.repeat === 'infinity') {
+                                        animateWithRepeat(nextCurrent, nextTarget, Infinity);
+                                    }
+                                    else {
+                                        animateWithRepeat(nextCurrent, nextTarget, repeatCount - 1);
+                                    }
+                                }, duration);
+                            }
+                        };
+                        const currentValue = sharedValue.value;
+                        const repeatTimes = transitionConfig.repeat === 'infinity' ? Infinity : ((_a = transitionConfig.repeat) !== null && _a !== void 0 ? _a : 0);
                         if (transitionConfig.delay) {
                             setTimeout(() => {
-                                sharedValue.value = config;
+                                animateWithRepeat(currentValue, value, repeatTimes);
                             }, transitionConfig.delay);
                         }
                         else {
-                            sharedValue.value = config;
+                            animateWithRepeat(currentValue, value, repeatTimes);
                         }
                     }
                 }
@@ -247,10 +273,16 @@ function createMotionComponent(Component) {
             }
             return undefined;
         }, []);
-        // Handle animate prop changes
+        // Handle animate prop changes (only animate if values actually changed)
+        const prevAnimateRef = (0, react_1.useRef)(animate);
         (0, react_1.useEffect)(() => {
             if (hasAnimated && !isExitingRef.current) {
-                animateToValues(animate);
+                // Only animate if animate prop actually changed
+                const hasChanged = JSON.stringify(prevAnimateRef.current) !== JSON.stringify(animate);
+                if (hasChanged) {
+                    animateToValues(animate);
+                    prevAnimateRef.current = animate;
+                }
             }
         }, [animate]);
         // Handle shouldExit

package/package.json

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